zoukankan      html  css  js  c++  java
  • 移动端控制视频点击播放点击下一个视频时自动停止播放&监听滑动溢出屏幕高度时停止播放

    直接上代码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>
  • 相关阅读:
    js18
    js17
    js16
    js15
    js14
    js13
    js12
    js11
    八月二十三的php
    八月二十二的php
  • 原文地址:https://www.cnblogs.com/Dark-fire-liehuo/p/10514802.html
Copyright © 2011-2022 走看看