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>