页面滚动时，js控制多个视频的播放方法

很多应用里有个视频播放的控制效果，就是页面滚动时，只有全部显示在窗口里的最上面一个自动播放，其他都停止播放。

今天客户也要求在我们的项目里使用这个效果，于是写了一个脚本，现在贴出来给大家参考一下，对比网上其他的脚本，我这个应该算是效率比较高的，因为没有做多余的重复计算取值。

<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>