Сова Карусель 2: Ленивая загрузка для видео

Question

У меня есть карусель на базе Owl Carousel v2 с включенной отложенной загрузкой:

JS:

$('.owl-carousel').owlCarousel({
  lazyLoad: true
});

HTML:

<div class="owl-carousel">
  <div>
   <img class="owl-lazy" data-src="...">
  </div>
</div>

который работает хорошо. Затем я попытался применить тот же код к тегам видео HTML5, которые у меня есть:

<div class="owl-carousel">
  <div>
   <video>
     <source class="owl-lazy" data-src="..." type="video/mp4">
   </video>
  </div>
</div>

который не работал. Есть идеи, как включить его для видео тоже?

Answer 1

Если кто-то сталкивался с той же проблемой, решение, которое я нашел, ниже:

// Lazy load for videos
var modalSlider = $('.owl-carousel');

modalSlider.on('changed.owl.carousel', function(event) {
  var current = event.item.index;
  var currentVideo = $(event.target).find('.owl-item').eq(current).find('video');
  var currentVideoSource = currentVideo.find('source');

  // Pause all videos
  var videos = modalSlider.find('video');

  if ( videos.length ) {
    videos.each(function() {
      $(this)[0].pause();
    });
  }

  // Play if video found
  if ( currentVideo.length ) {
    var currentVideoSrc = currentVideoSource.attr('data-src');
    currentVideoSource.attr('src', currentVideoSrc);
    currentVideo[0].load();
    currentVideo[0].play();
  }
});