分享好友 教程首页 教程搜索 频道列表

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

2020-05-22 19:1811460
+关注2
核心提示:script type="text/javascript"var go;//记录video播放器位置var video=document.q...
<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>
本文标签: #播放 #暂停 #视频
整理员:网络
免责声明:凡注明来源本网的所有作品,均为本网合法拥有版权或有权使用的作品,欢迎转载,注明出处。非本网作品均来自互联网,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。
生成海报
您可能在找更多

html5 video微信浏览器视频不能自动播放

    用代码自行测试

网络转载 JavaScript教程2023-02-27

h5版视频播放和暂停

    用代码测试

小黑 H5教程2022-04-26

在iOS微信浏览器中自动播放HTML5 audio(音乐)的2种解决方案

    直接上代码,已测试测试可用

小黑 JS相关2021-07-04

swiper3使用display:none切换后不自动播放等bug的解决方法

    swiper3多个进行display:none切换时,会造成切换后无法自动播放和位移的情况用一下方法就可解决1、初始化添加observer: true,observerParents: true参数,解决位移或错位的问题var Swiper = new Swiper(".index", {loop: true,observer:true,observeParents:true,autoplay: 1000, //可选选项,自动滑动spaceBetween: 20,autoplayDis

小黑 JS相关2020-07-20

下一篇
我来说两句
抢沙发