Question

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

我知道有很多类似的主题，但是一切都是从1-3年前（引导程序3/2）开始的，现在什么都行不通...

这是我的HTML示例代码

<div id="mediaCarousel" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <video autoplay width="100%"><source src="video1.mp4"></video>
         </div>
    <div class="carousel-item">
        <img class="d-block w-100" src="image1.jpg" alt="Second slide">
     </div>
     <div class="carousel-item">
         <img class="d-block w-100" src="image2.jpg" alt="Third slide">
    </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>

提前谢谢！ ;）

Answer 1

按照上面2条评论的建议进行修改，使其适应您的示例代码，请参见下面的示例：

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 width="100%" id="video_1" ><source src="video1.mp4"></video>
         </div>
    <div class="carousel-item">
        <img class="d-block w-100" src="image1.jpg" alt="Second slide">
     </div>
     <div class="carousel-item">
         <img class="d-block w-100" src="image2.jpg" alt="Third slide">
    </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>

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

1 个答案: