前端实时监听视频观看了多久

前瞻:本文只是谢了使用原声video标签播放视频的情况下,统计真实播放时长,但是举一反三,即使使用Dplayer播放器也只是需要将相应逻辑进行拆分整合即可,还是需要将第二点的逻辑彻底理解

1、html页面写上video标签

  
<video id="demo-video" class="video-js vjs-default-skin" src="https://dpv.videocc.net/44ca31d0c4/8/44ca31d0c4462901da540332bddde438_1.mp4" 
controls  preload="none" width="400px" height="400px"></video>
<input type="text" id="aa" value="0"> {{--观看时长--}}

2、监听播放、暂停、缓存中暂停播放计时等一些列事件

$(document).ready(function () {
    var options = {
    };
    var player = videojs('demo-video', options, function onPlayerReady() {
        var time1;
        var t1 = 0;
        function aa() {
            t1 += 0.25;
            document.getElementById('aa').value = t1;
            console.log('aa-' + t1);
        }
        //开始播放视频时
        this.on('play', function () {
            console.log('开始播放'); 
        });
        //结束和暂时时清除定时器,并向后台发送数据
        this.on('ended', function () {
            console.log('结束播放');
            window.clearInterval(time1);
            countTime();   //向后台发数据
        });
        this.on('pause', function () {
            console.log('暂停播放');
            window.clearInterval(time1);
            countTime();  //向后台发数据
        });
        //被主动暂停或网络暂停缓冲后重新播放会触发该事件
        //开始播放视频时,设置一个定时器,每250毫秒调用一次aa(),观看时长加2.5秒,
        //定时器需要放在playing事件中,否则无法实现网络缓冲后继续计时的功能
        this.on("playing",function(){
            console.log('开始播放');
            time1 = setInterval(function () {
                aa();
            }, 250)
        }),
        //当因网络原因导致暂停时会触发该事件
        this.on("waiting",function(){
            window.clearInterval(time1);
                 countTime();   //向后台发数据
             console.log('waiting');
        })
    });
    //直接关闭页面,并向后台发送数据
    if(window.addEventListener){
        window.addEventListener("beforeunload",countTime,false);
    }else{
        window.attachEvent("onbeforeunload",countTime);
    }
    
    function countTime(){
        console.log('countTime',document.getElementById('aa').value);
    }
})
 
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容