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>