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

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

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

demo下载地址：https://download.csdn.net/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);}}})

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

结合video.js播放rtmp格式、flv格式、mp4等格式的视频
https://blog.csdn.net/weixin_39150852/article/details/109156698
Vue Video.js播放m3u8视频流格式（video+videojs-contrib-hl）
文章目录 1. Vue+Video.js播放效果图 2. npm安装和引入 3. vue 使用 4. 动态设置video视频的src地址 5. Uncaught (in promise) TypeEr ...
六十二、Js中的冒泡和捕获点击事件和Vue组件绑定原生事件
2020/10/18 . 周日.今天又是奋斗的一天. @Author:Runsen @Date:2020/10/18 写在前面:我是「Runsen」,热爱技术.热爱开源.热爱编程.技术是开源的.知识是 ...
jQuery学习（四）— jQuery的ready事件和原生JS的load事件的区别
jQuery学习(四)- jQuery的ready事件和原生JS的load事件的区别 jQuery的ready事件和原生JS的load事件的区别: 页面中可以有多个ready事件,而load事件会出现 ...
原生JS javascript解除绑定事件 JS删除绑定事件
原生JS javascript解除绑定事件 JS删除绑定事件一.直接删除法 1.适用于直接绑定的事件,如: <h1 id="h1" onclick="_click ...
vuejs 原生JS 拖拽事件案例
原生JS or Vue 事件案例合集(详细) 提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加 Section 1 单个或多个鼠标拖拽事件的理解提示:写完文章后,目录可以自动生成,如 ...
解决原生JS鼠标移入事件多次触发的问题
在原生JS的onmouseover事件中,一般使用的期望是在鼠标移入的时候触发一次,但是当绑定事件的元素有子元素时候,鼠标在元素和子元素中切换时候会多次触发鼠标移入事件,但是不会触发鼠标移出事件,基于 ...
[js点滴]JavaScript事件详解
Event对象目录事件是一种异步编程的实现方式,本质上是程序各个组成部分之间的通信.DOM支持大量的事件,本节介绍DOM的事件编程. EventTarget接口 DOM的事件操作(监听和触发),都 ...
react 八千字长文深入了解react合成事件底层原理，原生事件中阻止冒泡是否会阻塞合成事件？
壹 ❀ 引在前面两篇文章中,我们花了较大的篇幅介绍react的setState方法,在介绍setState同步异步时提到,在react合成事件中react对于this.state更新都是异步,但在原 ...

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

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

最新文章

热门文章