올빼미 회전 목마 2 : 동영상의 게으른 부하 내가 게으른 부하 올빼미 회전 목마 (V2)에 의해 구동되는 회전 목마가 활성화

Question

:

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