JS监听video视频播放时间

Posted 尼古拉斯-富贵

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS监听video视频播放时间相关的知识,希望对你有一定的参考价值。

采用原生时间监听element.addEventListener(eventfunctionuseCapture)

           //监听播放时间
            var video = document.getElementById(videoName);
            //使用事件监听方式捕捉事件
            video.addEventListener("timeupdate",function(){
                var timeDisplay;
                //用秒数来显示当前播放进度
                timeDisplay = Math.floor(video.currentTime);
                var popCut=popTime //视频弹出时间
                //当视频播放到 maxpopCut的时候做处理
                if(timeDisplay == popCut||timeDisplay>popCut){
                    video.pause() //视频暂停  play();视频播放
                    video.setAttribute(\'src\',\'\'); //去除src内容
                     video.style.display="none";
                    $(\'.navBar\').css(\'z-index\',\'\')
                    $(\'.layer-box\').show()
                    var scroTop=$(document).scrollTop() //滚动条距离顶部的位置
                     $(\'.layer-box\').css(\'top\',scroTop+\'px\') //弹出框顶部位置
                      // 当弹出层出现的时候,禁止弹出层背景层滑动,阻止事件传递冒泡
                    function move(e){
                        e.preventDefault();//禁止事件冒泡
                    }
                    $(\'.layer-box\').on(\'touchmove\',move, false)//弹出层出现,弹出层的背景层阻止默认滑动事件      
                    $(\'.share-btn\').click(function(){
                        console.log(\'跳转 \')
                        window.location.href="${path}/share/toShare?id="+webPageId
                        //window.open("${path}/share/toShare?id="+webPageId)
                        //$(\'.navBar\').css(\'z-index\',\'99\')
                    })
                }
            },false)
        

 

以上是关于JS监听video视频播放时间的主要内容,如果未能解决你的问题,请参考以下文章

JS判断视频Video的播放暂停结束完成及获取长度事件监听处理

uniapp微信小程序video视频监听播放时间

在 HTML5 Video 中,如何播放长视频中的小片段?

如何在片段中播放视频

使用 video.js 在 ios 上播放视频内联?

HTML5 Video.js 播放视频太快