Как сделать плейлист через Owl Carousel

313

26 января 2018, 22:17

1) Как сделать автовоспроизведение активного видео в Owl Carousel (чтобы при загрузке страницы чразу начиналось видео)?

2) Как сделать так, чтобы при окончании одного видео, автоматически перелистывалось на следующее видео и также начиналось автовоспроизведение?

Answer 1

Ответ нашел тут: https://stackoverflow.com/questions/39854483/html5-video-in-owl-carousel-with-circular-autoplay-video-and-carosel

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>