javascript - 猫头鹰旋转木马2 : Lazy load for videos

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();
  }
});