我正在用一些视频(不仅)创建 Bootstrap(4) 轮播,我希望它在视频播放时停止(使用自动播放)并在视频结束时继续。
我知道有很多类似的主题,但一切都来自 1-3 年前( bootstrap 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>
先感谢您 ! ;)
最佳答案
遵循上面 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>
关于javascript - 播放视频时停止轮播 - Bootstrap 4,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55477450/