我有一个由 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>
这不起作用。有什么想法如何为视频启用它吗?
最佳答案
如果有人遇到同样的问题,我提出的解决方案如下:
// 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();
}
});
关于javascript - 猫头鹰旋转木马2 : Lazy load for videos,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43848558/