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