3

下面的代码适用于循环视频和轮播自动播放，但问题是当更改浏览器窗口选项卡并在一段时间后返回时，此选项卡视频卡住并且我的循环停止。

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>

4

1 回答 1

0

首先，我遇到了同样的问题，这对我帮助很大，所以谢谢。

为了解决您的问题，我只是$(".owl-item.active video", this.$element)[0].play();在两个“结束”功能中添加了而不是owl.trigger('play.owl.autoplay')它，即使在多个视频之间来回切换，离开然后再次切换时，它对我来说也完美无缺。

于 2018-05-08T13:47:18.930 回答