猫头鹰转盘2：视频延迟加载

我已经启用搭载猫头鹰旋转木马V2与延迟加载一个旋转木马：猫头鹰转盘2：视频延迟加载

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>

哪个没有用。任何想法如何启用它的视频呢？

来源

2017-05-08 sdvnksv

你检查文档，看看是否是即使实现视频？如果没有，你可能需要自己实现它。另外，切换到另一张幻灯片时，可能还需要暂停正在播放的视频。 – CBroe

@CBroe，是的，我确实希望我错过了一些东西。我不''看到任何理由为什么猫头鹰旋转木马不会'src'代替'source'标签'data-src'而不是'img'，但这是它的工作原理。 – sdvnksv

如果有人来到翻过了同样的问题，我想出了解决的办法是下面：

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

来源

2017-05-08 16:01:59 sdvnksv

猫头鹰转盘2：视频延迟加载

回答

相关问题