下面的代码对于循环视频和轮播自动播放工作正常,但问题是当更改浏览器窗口选项卡并在一段时间后返回时,此选项卡视频卡住并且我的循环停止。
var owl = $('.owl-carousel');
$('.owl-carousel').owlCarousel({
items: 1,
loop: true,
dots: false,
video: true,
autoplay: true,
onInitialized: function() {
if ($(".owl-item.active video", this.$element).length) {
$(".owl-item.active video", this.$element)[0].play();
owl.trigger('stop.owl.autoplay')
$(".owl-item.active video", this.$element).on('ended', function() {
owl.trigger('play.owl.autoplay')
});
}
},
onTranslated: function() {
if ($(".owl-item.active video", this.$element).length) {
$(".owl-item.active video", this.$element)[0].play();
owl.trigger('stop.owl.autoplay')
$(".owl-item.active video", this.$element).on('ended', function() {
owl.trigger('play.owl.autoplay')
});
}
}
});
<link href="http://owlcarousel.owlgraphic.com/assets/owlcarousel/assets/owl.theme.default.min.css" rel="stylesheet" />
<link href="http://owlcarousel.owlgraphic.com/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://owlcarousel.owlgraphic.com/assets/owlcarousel/owl.carousel.js"></script>
<ul class="owl-carousel">
<li>
<video id="myVideo">
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
</li>
<li>
<img src="http://www.w3schools.com/html/pic_mountain.jpg" alt="pic_mountain" style="height:250px" />
</li>
</ul>
最佳答案
首先,我遇到了同样的问题,这对我帮助很大,非常感谢。
为了解决您的问题,我刚刚在两个“结束”函数中添加了 $(".owl-item.active video", this.$element)[0].play();
而不是owl.trigger('play.owl.autoplay')
即使在多个视频之间来回切换、离开然后再次切换时,它对我来说也能完美运行。
关于jquery - Owl Carousel 中的 HTML5 视频,带有圆形自动播放视频和轮播,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39854483/