时间戳

首页 > 解决方案 > HTML5

javascript - HTML5

问题描述

我使用 Bootstrap 的轮播滑块。但是当我将图像和视频放入其中时，当我循环播放视频时，它们不会停止循环。但我希望他们停止并重置，所以当它回到那张幻灯片时，视频从头开始，而不是在视频中间的某个地方。另外我想知道是否可以不设置间隔，而是在转到下一张幻灯片之前将视频播放到最后。

JS

$("#myCarousel").carousel({
    interval: 4500
});

PHP

<div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel">
<div class="carousel-inner">
    <div class="carousel-item active">
        <img src="">
    </div>
    <div class="carousel-item">
        <video id="myVideo" loop autoplay muted><source src=""></video>
    </div>
    <div class="carousel-item">
        <video id="myVideo" loop autoplay muted><source src=""></video>
    </div>
</div>
</div>

标签： javascriptphphtmlhtml5-videocarousel

解决方案

我做了一个JSFiddle。我已从loop autoplay视频标签中删除。

$("#myCarousel").carousel({
  interval: 4500
});

$("#myCarousel").on('slid.bs.carousel', function () {
   var vids = $(this).find(".active video");
   if(vids.length > 0){
      vids[0].pause();
      vids[0].currentTime = 0;
      vids[0].play();
   }
})
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel">
<div class="carousel-inner">
    <div class="carousel-item active">
        <img src="">
    </div>
    <div class="carousel-item">
        <video id="myVideo" muted><source src="https://www.w3schools.com/html/mov_bbb.mp4"></video>
    </div>
    <div class="carousel-item">
        <video id="myVideo2" muted><source src="https://www.w3schools.com/html/mov_bbb.mp4"></video>
    </div>
</div>
</div>

推荐阅读