https://www.nayeef.com/dist/front/static/new_default_theme/slideshow.js?v=630

1if (!customElements.get("f-slideshow")) {
2    class FSlideshow extends HTMLElement {
3        constructor() {
4            super();
5        }
6
7        connectedCallback() {
8            this.autoplay = this.dataset.autoplay === "1";
9            this.autoplaySpeed = parseInt(this.dataset.autoplaySpeed);
10            this.showArrows = this.dataset.enableArrows === "1";
11            this.showDots = this.dataset.enableDots === "1";
12            this.id = this.dataset.id;
13            this.sliderContainer = this.querySelector(".swiper-container");
14
15            this.lastVideo = null;
16            this.lastActive = null;
17            this.timeout = null;
18            this.initSlider();
19        }
20
21        initSlider() {
22            const swiperConfig = {
23                init: false,
24                autoplay: this.autoplay
25                    ? {
26                        delay: this.autoplaySpeed * 1000,
27                        disableOnInteraction: false, // ✅ 改：不要因为用户交互打断
28                    }
29                    : false,
30                slidesPerView: 1,
31                slidesPerGroup: 1,
32                loop: true,
33                effect: "fade",
34                fadeEffect: {
35                    crossFade: true,
36                },
37                speed: 1000,
38                navigation: this.showArrows
39                    ? {
40                        nextEl: this.querySelector(".f-slider-controls__button-next"),
41                        prevEl: this.querySelector(".f-slider-controls__button-prev"),
42                    }
43                    : false,
44                pagination: this.showDots
45                    ? {
46                        el: ".swiper-pagination",
47                        clickable: true,
48                        bulletClass: "f-dot",
49                        bulletActiveClass: "f-dot--active",
50                    }
51                    : false,
52                breakpoints: {
53                    992: {
54                        threshold: 2,
55                    },
56                },
57                on: {
58                    init: () => {
59                        // ✅ 初始化后立即播放首屏视频
60                        setTimeout(() => {
61                            this.playActiveVideo();
62                            window.dispatchEvent(new Event("resize"));
63                        }, 150);
64                    },
65                    slideChange: () => this.handleChange(),
66                },
67            };
68
69            this.slider = new Swiper(this.sliderContainer, swiperConfig);
70            this.slider.init();
71
72            // ✅ 窗口尺寸变化后重新播放视频
73            window.addEventListener("resize", () => {
74                clearTimeout(this._resizeTimer);
75                this._resizeTimer = setTimeout(() => {
76                    this.playActiveVideo();
77                }, 300);
78            });
79        }
80
81        handleChange() {
82            const { activeIndex, slides } = this.slider;
83            const activeSlide = slides[activeIndex];
84            if (!activeSlide) return;
85
86            const slideType = activeSlide.dataset.slideType;
87
88            if (slideType === "video_slide") {
89                const video = activeSlide.querySelector("video");
90                if (video) {
91                    // 暂停上一个视频
92                    if (this.lastVideo && this.lastVideo !== video) {
93                        this.lastVideo.pause();
94                    }
95
96                    // ✅ 自动播放当前视频
97                    const playPromise = video.play();
98                    if (playPromise !== undefined) {
99                        playPromise
100                            .then(() => {
101                                this.lastVideo = video;
102                            })
103                            .catch((err) => {
104                                console.warn("Video play prevented:", err);
105                            });
106                    }
107                }
108            } else {
109                // 非视频时暂停上一个视频
110                if (this.lastVideo) {
111                    this.lastVideo.pause();
112                    this.lastVideo = null;
113                }
114            }
115        }
116
117        playActiveVideo() {
118            // ✅ 专门用于初始化或 resize 时调用
119            if (!this.slider) return;
120            const { activeIndex, slides } = this.slider;
121            const activeSlide = slides[activeIndex];
122            if (!activeSlide) return;
123            if (activeSlide.dataset.slideType !== "video_slide") return;
124
125            const video = activeSlide.querySelector("video");
126            if (!video) return;
127
128            // 若 loop 模式下视频被克隆，强制播放真实节点
129            try {
130                video.currentTime = 0;
131                video.play();
132                this.lastVideo = video;
133            } catch (err) {
134                console.warn("playActiveVideo failed:", err);
135            }
136        }
137
138        onBlockSelect(ev) {
139            const block = ev.target;
140            const index = Number(block.dataset.slide);
141            this.lastActive = index;
142            if (this.slider) {
143                this.slider.slideToLoop(index);
144                this.playActiveVideo(); // ✅ 立即播放
145            }
146        }
147    }
148

149    customElements.define("f-slideshow", FSlideshow);
150}