通过video.js或原生事件统计实际观看视频时长，支持多视频时长统计

king2wang

已于 2023-02-15 14:21:07 修改

阅读量1.7w

点赞数 4

分类专栏： js PHP 文章标签： php js

于 2018-10-10 18:37:38 首次发布

本文链接：https://blog.youkuaiyun.com/king2wang/article/details/83001087

版权

PHP 同时被 2 个专栏收录

32 篇文章

订阅专栏

18 篇文章

订阅专栏

前言：1.根据评论提问，优化了视频统计逻辑，增加了网络卡顿时暂停计时，重新播放后重新计时的功能。根据以下下载地址可以下载完整代码示例，更新于：2022年8月26号，2.新增通过原生事件的写法统计观看时长，更新于：2022年9月13号，3.新增多视频时长统计，更新于：2023年2月15号。

注：不管使用哪种方式监听，canplay和playing事件监听一个即可（定时器放到其中一个事件监听中即可），建议是监听playing事件，因为playing事件不仅手动点击播放的时候可以触发，网络卡顿导致的缓冲后自动播放也可以触发，统计时长会更精准。

demo下载地址：https://download.youkuaiyun.com/download/king2wang/10715735

一、单视频统计（分别使用video.js和原生事件监听进行说明）

1.引入video.js和video.css

2.html页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>videojs test</title>
    <link type="text/css" rel="stylesheet" href="./video.css"/>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="./video.js"></script>  <!-- 通过video.js进行统计，需引入 -->
    <script type="text/javascript" src="./view_time.js"></script> <!-- 通过video.js进行统计，需引入 -->
    <!-- <script type="text/javascript" src="./vt.js"></script> --> <!-- 通过原生事件统计，需引入 -->
</head>
<body>
<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"> {{--观看时长--}}
</body>

3.video.js的写法

$(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);
	}
})

4.原生事件监听的写法

window.onload=function(){
    var time1;
    var t1 = 0;
    function aa() {
        t1 += 0.25;
        document.getElementById('aa').value = t1;
        console.log('aa-' + t1);
    }
    var video = document.getElementById("demo-video");
    video.addEventListener("canplay",function(){
        console.log("canplay");
    },false)
    //播放结束
    video.addEventListener("ended",function(){
        console.log("ended");
        window.clearInterval(time1);
        countTime();   //向后台发数据
    },false)
    //暂停
    video.addEventListener("pause",function(){
        console.log("pause");
        window.clearInterval(time1);
        countTime(); 
    },false)
    //被主动暂停或网络暂停缓冲后重新播放会触发该事件
	//开始播放视频时，设置一个定时器，每250毫秒调用一次aa(),观看时长加2.5秒，
	//定时器需要放在playing事件中，否则无法实现网络缓冲后继续计时的功能
    video.addEventListener("playing",function(){
        console.log("playing");
        time1 = setInterval(function () {
            aa();
        }, 250)
    },false)
    //当因网络原因导致暂停时会触发该事件
    video.addEventListener("waiting",function(){
        console.log('waiting');
        window.clearInterval(time1);
        countTime();   //向后台发数据
    },false)

     //向后台发数据
     function countTime(){
		console.log('countTime',document.getElementById('aa').value);
	}
     //直接关闭页面，并向后台发送数据
     if(window.addEventListener){
        window.addEventListener("beforeunload",countTime,false);
    }else{
        window.attachEvent("onbeforeunload",countTime);
    }
}

二、多视频时长统计（仅以原生事件监听说明，video.js实现方式跟单视频同理，可自行尝试）

1.html页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>video multiple test</title>
    <link type="text/css" rel="stylesheet" href="./video.css"/>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="./multi.js"></script>
</head>
<body>
<video id="demo_video_1" class="video-js vjs-default-skin" src="" 
controls  preload="none" width="400px" height="400px"></video>
<input type="text" id="aa_1" value="0"> {{--观看时长--}}

<video id="demo_video_2" class="video-js vjs-default-skin" src="" 
controls  preload="none" width="400px" height="400px"></video>
<input type="text" id="aa_2" value="0"> {{--观看时长--}}

<video id="demo_video_3" class="video-js vjs-default-skin" src="" 
controls  preload="none" width="400px" height="400px"></video>
<input type="text" id="aa_3" value="0"> {{--观看时长--}}
</body>

2.原生事件实现的js代码

$(function(){

    //一进页面是知道视频数量的（示例假设有3个视频），
    //我们约定每个video的id规则为demo_video_x，x为1，2，3等视频数或其他唯一标识
    var video_num = 3;
    for(i=1;i<=video_num;i++){
         video_demo(i)  
    }

    function video_demo(vid){
        var time1;
        var t1 = 0;
        
        function aa() {
            t1 += 0.25;
            document.getElementById('aa_'+vid).value = t1;
            console.log('aa_'+vid+'-' + t1);
        }
        console.log('video'+vid)
        var video = document.getElementById("demo_video_"+vid);
        console.log(video)
        video.addEventListener("canplay",function(){
            console.log("canplay"+vid);
        },false)
        //播放结束
        video.addEventListener("ended",function(){
            console.log("ended"+vid);
            window.clearInterval(time1);
            countTime();   //向后台发数据
        },false)
        //暂停
        video.addEventListener("pause",function(){
            console.log("pause"+vid);
            window.clearInterval(time1);
            countTime(); 
        },false)
        //被主动暂停或网络暂停缓冲后重新播放会触发该事件
        //开始播放视频时，设置一个定时器，每250毫秒调用一次aa(),观看时长加0.25秒，
        //定时器需要放在playing事件中，否则无法实现网络缓冲后继续计时的功能
        video.addEventListener("playing",function(){
            console.log("playing"+vid);
            time1 = setInterval(function () {
                aa();
            }, 250)
        },false)
        //当因网络原因导致暂停时会触发该事件
        video.addEventListener("waiting",function(){
            console.log('waiting'+vid);
            window.clearInterval(time1);
            countTime();   //向后台发数据
        },false)
    
         //向后台发数据
         function countTime(){
            console.log('countTime'+vid,document.getElementById('aa_'+vid).value);
        }
         //直接关闭页面，并向后台发送数据
         if(window.addEventListener){
            window.addEventListener("beforeunload",countTime,false);
        }else{
            window.attachEvent("onbeforeunload",countTime);
        }
    }
    

})