|
很多应用里有个视频播放的控制效果，就是页面滚动时，只有全部显示在窗口里的最上面一个自动播放，其他都停止播放。
今天客户也要求在我们的项目里使用这个效果，于是写了一个脚本，现在贴出来给大家参考一下，对比网上其他的脚本，我这个应该算是效率比较高的，因为没有做多余的重复计算取值。
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();
}
}
});
|