Bootstrap 4轮播：视频播放时暂停，结束后自动切换下一张

问题分析 #

你之前的代码未生效主要有两个核心问题：

1. 视频设置了loop属性，导致视频持续循环播放，永远不会触发ended事件；
2. 恢复轮播的方法错误，$("#demo").carousel()并不是重启自动轮播的正确方式，Bootstrap 4轮播需要用carousel('cycle')来恢复自动切换。

修正后的完整实现 #

第一步：修改HTML视频标签

先移除视频的loop属性，让视频播放一次后自然结束：

<div id="demo" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ul class="carousel-indicators">
        <li data-target="#demo" data-slide-to="0" class="active"></li>
        <li data-target="#demo" data-slide-to="1"></li>
        <li data-target="#demo" data-slide-to="2"></li>
    </ul>
    <!-- The slideshow -->
    <div class="carousel-inner">
        <div class="carousel-item active">
            <!-- 移除loop属性 -->
            <video class="img-fluid" id="video_1" autoplay muted>
                <source src="{{ asset('img_link/v.mp4')}}" type="video/mp4" />
            </video>
        </div>
        <div class="carousel-item">
            <img src="{{ asset('img_link/AdminLTELogo.png')}}" alt="Chicago">
        </div>
        <div class="carousel-item">
            <img src="{{ asset('img_link/AdminLTELogo.png')}}" alt="New York">
        </div>
    </div>
    <!-- Left and right controls -->
    <a class="carousel-control-prev" href="#demo" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next" href="#demo" data-slide="next">
        <span class="carousel-control-next-icon"></span>
    </a>
</div>

第二步：修正JavaScript逻辑

确保DOM加载完成后绑定事件，视频播放时暂停轮播，结束后主动切换到下一张再重启轮播：

$(document).ready(function() {
    const $carousel = $('#demo');
    const $video = $('#video_1');

    // 视频开始播放时暂停轮播
    $video.on('play', function() {
        $carousel.carousel('pause');
        console.log('视频播放，轮播已暂停');
    });

    // 视频结束时切换到下一张并重启轮播
    $video.on('ended', function() {
        // 主动切换到下一张幻灯片
        $carousel.carousel('next');
        // 延迟执行确保幻灯片切换完成
        setTimeout(function() {
            $carousel.carousel('cycle');
        }, 500);
        console.log('视频结束，已切换到下一张并重启轮播');
    });
});

特殊需求扩展（视频循环+切换幻灯片） #

如果需要视频循环播放，但每次循环结束后切换幻灯片，不能用原生loop属性，需手动监听ended事件实现：

$(document).ready(function() {
    const $carousel = $('#demo');
    const $video = $('#video_1');

    $video.on('play', function() {
        $carousel.carousel('pause');
    });

    $video.on('ended', function() {
        // 切换到下一张幻灯片
        $carousel.carousel('next');
        // 幻灯片切换完成后重新播放视频并暂停轮播
        setTimeout(function() {
            $video[0].play();
            $carousel.carousel('pause');
        }, 500);
    });
});

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