HTML5<视频>幻灯片播放后重置视频 [英] HTML5 <Video> reset video after slide

问题描述

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

I use the carousel slider from Bootstrap. But when I put images and videos in it but when I loop the videos they won't stop looping. But I want them to stop and reset so when it gets back to that slide the video starts from the beginning, not somewhere in the middle of the video. Also I was wondering if it's possible to not set an interval but play the video till the end before going to the next slide.

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>

推荐答案

我做了一个JSFiddle.我已经从视频标签中删除了 loop自动播放.

I made a JSFiddle. I have removed loop autoplay from the video tags.

$("#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<视频>幻灯片播放后重置视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！