视频播放时停止轮播 - Bootstrap 4

Posted 2023-03-05

【中文标题】视频播放时停止轮播 - Bootstrap 4

【英文标题】：Stop carousel when video playing - Bootstrap 4

【发布时间】：2019-08-23 22:30:03

【问题描述】：

我正在创建带有一些视频（不仅是）的 Bootstrap(4) 轮播，我希望它在视频播放（自动播放）时停止并在视频结束时继续。

我知道有很多类似的主题，但一切都是 1-3 年前的（bootstrap 3/2），现在没有任何效果......

这是我的 html 示例代码

<div id="mediaCarousel" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <video autoplay ><source src="video1.mp4"></video>
         </div>
    <div class="carousel-item">
        <img class="d-block w-100" src="image1.jpg" >
     </div>
     <div class="carousel-item">
         <img class="d-block w-100" src="image2.jpg" >
    </div>
</div>

我尝试过的和大部分时间看到的示例：

<script type="text/javascript">
    $("#mediaCarousel").carousel( interval: false); // this prevents the auto-loop
    var videos = document.querySelectorAll("video");
    videos.forEach(function(e) 
        e.addEventListener('ended', myHandler, false);
    ); 

    function myHandler(e) 
        $("#mediaCarousel").carousel('next');
    
</script>

提前谢谢你！ ;)

【问题讨论】：

为每个视频元素注册一个“播放/结束”事件监听器，并在播放时调用监听器.carousel('pause')，在结束时调用.carousel('next')

更多关于 Marc 提到的信息w3schools.com/tags/av_event_play.asp

【参考方案1】：

遵循上述 2 cmets 的建议，并将其调整为您的示例代码，请参见下面的示例：

1 - 为您的视频标签设置一个 ID (id="video_1")

<div id="mediaCarousel" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <video autoplay  id="video_1" ><source src="video1.mp4"></video>
         </div>
    <div class="carousel-item">
        <img class="d-block w-100" src="image1.jpg" >
     </div>
     <div class="carousel-item">
         <img class="d-block w-100" src="image2.jpg" >
    </div>
</div>

2 - 更新 javascript：

<script type="text/javascript">
    $("#mediaCarousel").carousel( interval: false); // this prevents the auto-loop
    var vid1 = document.getElementById("video_1");
    vid1.onended = function()  $("#mediaCarousel").carousel('next'); ;

</script>