CODEWITHSUNDEEP
javascriptjqueryhtmlowl-carousel-2
sdvnksv
sdvnksv

Reputation: 9678

Owl carousel 2: Lazy load for videos

I have a carousel powered by Owl carousel v2 with lazy load enabled:

JS:

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

HTML:

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

which works OK. Then I tried to apply the same code to the HTML5 video tags I have:

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

which didn't work. Any ideas how to enable it for videos too?

Upvotes: 0

Views: 1945

Answers (1)

sdvnksv
sdvnksv

Reputation: 9678

If anybody came accross the same issue, the solution I came up with is below:

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

Upvotes: 2

Related Questions