移动端控制视频点击播放点击下一个视频时自动停止播放&监听滑动溢出屏幕高度时停止播放

直接上代码js部分:

<script type="text/javascript">
            var go;//记录video播放器位置
            var video=document.querySelectorAll('video')//获取页面中所有video
            for(var i=0;i<video.length;i++) {
                (function (v) {
                    video[v].addEventListener('play',function(e){
                        if(go){
                            if(go!=this){
                                go.pause();//暂停播放
                                go.currentTime = 0;//跳转0秒
                            }
                        }
                        go = this;
                    });
                })(i);
            }
            $(window).scroll(function () {//监听滚动条
                if(go){
                    var top = go.getBoundingClientRect().top;//实时获取当前video距离窗口顶部
                    var bottom = go.getBoundingClientRect().bottom;//实时获取当前video距离窗口底部
                    if(bottom<0 || top>$(window).height()){//判断video是否在有效区域
                        go.pause();//暂停播放
                        go.currentTime = 0;//跳转0秒
                    }
                }
            });
        </script>
原文地址:https://www.cnblogs.com/Dark-fire-liehuo/p/10514802.html