请求实现Swiper视频轮播：播放完毕自动切换并循环

问题说明 #

需要实现当前视频播放完毕后自动切换到下一个视频，且所有视频播放完成后重复轮播循环，现有代码无法实现该效果。

修正后的完整代码 #

HTML #

先修正结构错误，每个swiper-slide对应一个独立视频（原代码一个slide包含两个视频，会导致Swiper切换逻辑混乱）：

<div class="swiper swiper-big">
    <div class="swiper-wrapper">
        <!-- 第一个视频轮播项 -->
        <div class="swiper-slide">
            <div class="swiper-blur"></div>
            <div class="swiper-video-blur">
                <video class="video" muted style="width: 100%; height: 100%; object-fit: cover; cursor: pointer;" poster="https://i.imgur.com/GTJB1xh.jpeg" src="https://ak2.picdn.net/shutterstock/videos/34123252/preview/stock-footage-coworkers-discussing-in-the-future-of-their-company-over-several-charts-and-graphs-business.mp4"></video>
            </div>
        </div>
        <!-- 第二个视频轮播项 -->
        <div class="swiper-slide">
            <div class="swiper-blur"></div>
            <div class="swiper-video-blur">
                <video class="video" muted style="width: 100%; height: 100%; object-fit: cover; cursor: pointer;" poster="https://i.imgur.com/fR5sk7O.jpeg" src="https://ak1.picdn.net/shutterstock/videos/25348301/preview/stock-footage--business-new-customers-sale-and-people-concept-thousands-of-people-formed-qr-code-crowd-flight.webm"></video>
            </div>
        </div>
    </div>
    <!-- 保留原有导航组件 -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-pagination"></div>
</div>

CSS（保留原有样式，无修改） #

.swiper {
    width: 100%;
    overflow: hidden;
}

.swiper-big .swiper-slide .banner {
    position: relative;
    display: block;
    height: 36vw;
    min-height: 193px;
    border-radius: 8px;
    overflow: hidden;
    width: 100%;
    filter: blur(0px);
}

.swiper-big .swiper-slide .banner::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background-color: rgba(1, 1, 1, .2);
    pointer-events: none;
}

.swiper-big {
    min-height: 180px;
}

.swiper-big img {
    width: 97%;
    height: 500px;
    object-fit: cover;
}
.swiper-blur {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 10;
    box-shadow: inset 0px 0 40px 51px #1a1c1f;
    background: linear-gradient(270deg,rgba(20,20,20,0) 1%,rgba(20,20,20,.7) 100%);
}
.swiper-video-blur {
    width: 100%;
    position: absolute;
    z-index: 9;
}

JavaScript（核心修改部分） #

// 保留原有移动端判断函数
function isMobileDevice() {
    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}

const swiper_option1 = {
    loop: true, // 开启循环轮播模式
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
    pagination: {
        el: '.swiper-pagination',
        clickable: true
    },
    spaceBetween: 0,
    on: {
        transitionStart: function() {
            // 切换时暂停所有视频并隐藏
            document.querySelectorAll('video').forEach(video => {
                video.pause();
                video.style.display = 'none';
                video.muted = true;
            });
            // 保留原有音量图标逻辑
            $('.swiper-volume').addClass('fa-volume-high').removeClass('fa-volume-xmark');
        },
        init: function() {
            this.startActiveVideo();
        },
        transitionEnd: function() {
            this.startActiveVideo();
        }
    }
};

// 给Swiper实例添加播放当前激活视频的方法
Swiper.prototype.startActiveVideo = function() {
    const activeSlide = this.slides[this.activeIndex];
    const video = activeSlide.querySelector('.swiper-video-blur video');
    if (!video) return;

    // 显示并播放当前视频
    video.style.display = 'block';
    video.play();

    // 监听视频结束事件，触发轮播切换
    video.onended = () => {
        // 循环模式下判断是否为最后一个真实slide
        const isLastSlide = this.activeIndex === this.slides.length - 1;
        isLastSlide ? this.slideTo(0) : this.slideNext();
    };
};

const swiper1 = new Swiper('.swiper-big', swiper_option1);

关键改动说明 #

1. 修正HTML结构：每个swiper-slide仅包含一个视频容器，确保Swiper能正确识别轮播项。
2. 开启循环模式：添加loop: true，实现所有视频播放完毕后自动回到第一个。
3. 绑定视频结束事件：给当前激活视频绑定onended事件，播放完成后触发Swiper切换逻辑。
4. 封装播放逻辑：将激活slide的视频播放逻辑封装成实例方法，避免代码重复。
5. 移除固定延迟autoplay：原固定3秒延迟不符合"视频播放完再切换"的需求，改为由视频结束事件触发切换。

内容的提问来源于stack exchange，提问作者Đức Nguyễn