我正在尝试实现Bootstrap轮播。轮播将具有包含视频或图像的幻灯片。我想这样做,以使视频幻灯片在视频持续时间内保持事件状态(设置为自动播放),然后继续使用图像的默认间隔。
我已经设置好轮播,使其包含四个图像和一个视频。为了简单起见,我在这里删除了其中3张图像的代码。在不添加任何其他Javascript的情况下,轮播会循环显示图像和视频,并且视频播放没有问题。由于为所有幻灯片设置了默认间隔,因此轮播会在视频播放完成之前移至下一张幻灯片。
使用一些Javascript,我设法影响了时间间隔,但是我并不真正了解这种行为,或者我的Javascript甚至没有道理。老实说,自从我使用Java语言以来已经有一段时间了。
<div id="VIS-BBNALobby-C" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item">
<img class="d-block w-100" src="/media/VIS-BBNALobby-M/aaa.jpg">
</div>
<div class="carousel-item vidslide active">
<video class="d-block w-100" autoplay="" muted="">
<source src="/media/VIS-BBNALobby-M/vid.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
<script>
$('#VIS-BBNALobby-C').on('slide.bs.carousel', function () {
var slide = $('#VIS-BBNALobby-C').find('.active')
if(slide.hasClass('vidslide')){
$('#VIS-BBNALobby-C').carousel('pause');
}
while(!(slide.attr('ended'))){
//waiting for video playback to end
}
$('#VIS-BBNALobby-C').carousel('cycle');
});
</script>
我希望旋转木马暂停循环播放,直到视频返回播放结束为止,在这种情况下,循环播放将恢复。我相信发生的事情是视频播放,轮播直到第一个移至下一张幻灯片才暂停,然后循环播放。我很难告诉发生了什么事。我不太习惯使用浏览器进行调试。
解决方案:我接受了6502提出的事件建议,尽管我在W3Schools上写得有些不同。
var vid = document.getElementById("wedidit");
vid.onplay = function() {
$('#VIS-BBNALobby-C').carousel('pause');
};
vid.onended = function () {
$('#VIS-BBNALobby-C').carousel('next');
$('#VIS-BBNALobby-C').carousel('cycle');
};
更好的解决方案:我印象中,“数据间隔”标签仅适用于轮播元素,但实际上适用于轮播元素元素。我能够仅设置单个项目的间隔,这使操作变得更加容易。
<div id="VIS-BBNALobby-C" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" data-interval="1000">
<img class="d-block w-100" src="/media/VIS-BBNALobby-M/aaa.jpg" alt="First slide">
</div>
<div class="carousel-item" data-interval="91000">
<video id="wedidit" class="d-block w-100" autoplay muted loop>
<source src="/media/VIS-BBNALobby-M/vid.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
最佳答案
您无法在Javascript中像这样“等待”,您需要使用事件。
您需要将视频结束事件附加到处理程序,该处理程序将通过以下方式恢复轮播的循环:
addEventListener(video, "ended", ()=>('#VIS-BBNALobby-C').carousel('cycle'));
关于javascript - 如何基于HTML5视频元素的行为来控制引导轮播的行为?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/57812273/