jquery - Owl Carousel 中的 HTML5 视频，带有圆形自动播放视频和轮播

Question

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

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>

Answer 1

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

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