很多应用里有个视频播放的控制效果,就是页面滚动时,只有全部显示在窗口里的最上面一个自动播放,其他都停止播放。
今天客户也要求在我们的项目里使用这个效果,于是写了一个脚本,现在贴出来给大家参考一下,对比网上其他的脚本,我这个应该算是效率比较高的,因为没有做多余的重复计算取值。
var videoList = $('video');
var wHeigt = window.innerHeight;
for(var i = 0; i < videoList.length; i++){
var v = videoList[i];
v.height = $(v).height();
v.top = $(v).offset().top;
}
//sTop加50,是考虑页头的高度,遮档了内容的可视区,这点大家灵活处理
$(document).on('scroll.blogDetail', function(){
var sTop = $(document).scrollTop();
var hasPlay = false;
for(var i = 0; i < videoList.length; i++){
var v = videoList[i];
if(!hasPlay && v.top > (sTop + 50) && (wHeigt + sTop) > (v.top + v.height)){
v.play();
}else{
v.pause();
}
}
});
|