HTML5 <Video> 幻灯片后重置视频

Question

我使用 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>

Answer 1

我做了一个 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>

HTML5 <Video> 幻灯片后重置视频

HTML5 <Video> reset video after slide

html

javascript

php

carousel

html5-video