Bootstrap Carousel视频问题：需激活播放非激活暂停、返回续播

修复后的HTML代码 #

<div id="myCarousel" class="carousel slide">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <video class="carousel-video" height="400" muted>
                <source src="../../lib-indah/asset/content/6.mp4" type="video/mp4">
            </video>
        </div>
        <div class="carousel-item">
            <video class="carousel-video" height="400" muted>
                <source src="../../lib-indah/asset/content/6.mp4" type="video/mp4">
            </video>
        </div>
        <div class="carousel-item">
            <img src="../../lib-indah/asset/content/1.jpg" height="300" class="d-block w-100" alt="...">
        </div>
    </div>
</div>

修复后的JavaScript代码 #

// 初始化轮播，可根据需求调整自动切换间隔
$('#myCarousel').carousel({
    interval: 5000
});

// 轮播切换完成后处理视频播放/暂停逻辑
$('#myCarousel').on('slid.bs.carousel', function () {
    // 暂停所有非激活项内的视频
    $('.carousel-item:not(.active) .carousel-video').each(function() {
        this.pause();
    });
    // 播放当前激活项内的视频（如果存在）
    const activeVideo = $('.carousel-item.active .carousel-video')[0];
    if (activeVideo) {
        activeVideo.play();
    }
});

// 视频播放时暂停轮播自动切换
$('.carousel-video').on('play', function () {
    $('#myCarousel').carousel('pause');
});

// 视频播放结束后恢复轮播自动切换
$('.carousel-video').on('ended', function () {
    $('#myCarousel').carousel('cycle');
});

// 页面加载完成后，自动播放初始激活项内的视频
$(document).ready(function() {
    $('.carousel-item.active .carousel-video')[0]?.play();
});

关键修改说明 #

• 修正ID重复问题：原代码多个视频使用相同id违反HTML规范，改为统一类名carousel-video，方便批量控制。
• 移除全局自动播放：去掉视频的autoplay属性，避免页面加载时所有视频同时播放，改为通过JS控制播放时机。
• 精准控制视频状态：轮播切换时，统一暂停非激活项的视频、播放激活项的视频，确保只有当前可见的视频在运行。
• 保留播放进度：视频暂停时不会重置播放位置，再次播放时会从上次暂停的节点继续，满足返回已播放视频的续播需求。
• 初始化播放处理：页面加载完成后自动启动初始激活项的视频播放。

内容的提问来源于stack exchange，提问作者Sakura