3

The below code is working fine for circular video and carousel auto play, but problem is that when changing the browser window tab and after some time coming back, this tab video is stuck and my circular stops.

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>
mhatch
  • 4,441
  • 6
  • 36
  • 62
Ashish Mehta
  • 7,226
  • 4
  • 25
  • 52

1 Answers1

0

First off, I was having the same problem and this helped me tremendously so thank you.

To solve your problem I just added $(".owl-item.active video", this.$element)[0].play(); inside both "ended" functions instead of owl.trigger('play.owl.autoplay') and it works flawlessly for me even when switching back and forth between multiple videos, leaving and then switching again.

Dtrav
  • 355
  • 1
  • 2
  • 14