监听页面异常 + 监听页面跳转 +监听页面销毁：监听并记录当前页面停留的时间-优快云博客

本文链接：https://blog.youkuaiyun.com/masterphp/article/details/132488491

本文讲述了如何在移动端应用中通过JavaScript实现实时视频播放时长监控，包括使用WebSocket的心跳检测、原生的`timeupdate`事件和`unload`事件，以及使用`addEventListener`监听`visibilitychange`来处理页面隐藏和跳转。作者还分享了在阿里云视频点播中的应用实例和数据记录策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先描述一下应用场景：播放视频，记录观看时长（移动端左划动，右滑动，页面跳转，页面销毁[页面销毁主要是指使用中控台直接销毁]）

说一下我的思路：

1.长链接 :

使用websocket来实现（实际上是用心跳来检测链接是否已经断开（销毁），这个理论上来说可以，奈何这个项目使用的是Websocket+Mongo来实现观看时间的记录，原始数据放在Sql，Mongo与Sql的数据同步又是使用的定时任务，要去重新做有些麻烦，但是项目又是非常紧急的，所以我把思路放到了第二种方法上，使用js

2.JS：

使用JS最开始的时候是想使用定时器，但是开销太大了，如果设置间隔过大，数据记录又会出现偏差，所以去掉了使用定时器的方法，那不是没有办法了吗? 其实还有其他办法的，使用监听事件，那么我们结合实际情况来分别讲一下使用js原生和js的封装方法来分别实现

2.1 使用js原生来实现：video 标签播放i视频

        //HTML部分
               <video id="video-active" class="video-active" width="640"                         height="390"controls="controls">
                   <source src="视频播放地址" type="video/mp4">
               </video>

        //JS部分
        <script>
        //定义容器
        var times='';
        //页面初始化方法
        $(document).ready(function(){
                //监听时长
                $("#video-active").on(
                        "timeupdate",
                function(event){
                 times = this.currentTime
                  },
              );
         //监听跳转事件
         window.onunload = function() {
                        //发送ajax请求（duty，修改数据）
                           var url = "请求地址";
                $.post(url,{times :times }function (res) {

}, 'json');

                         //必须要有返回值(返回值为空也可以)
                return "";
         }
});
</script>

原生JS的监听就发生在onunload事件中

2.2 使用addEventListener 侦听事件来实现：阿里视频点播

为什么需要这个事件来监听？有同学一定会问！那是因为我视频播放的是阿里云的视频点播，所以前面的onunload事件失效，那么我们先介绍下addEventListener参数：

　　1、type:String（事件的类型）
　　2、listener:Function
　　侦听到事件后处理事件的函数。此函数必须接受 Event 对象作为其唯一的参数，并且不能返回任何结果，如以下示例所示：访问修饰符function函数名(evt:Event):void
　　3、useCapture:Boolean (default = false)
　　这里牵扯到“事件流”的概念。侦听器在侦听时有三个阶段：捕获阶段、目标阶段和冒泡阶段。顺序为：捕获阶段(根节点到子节点检查是否调用了监听函数)→目标阶段(目标本身)→冒泡阶段(目标本身到根节点)。此处的参数确定侦听器是运行于捕获阶段、目标阶段还是冒泡阶段。如果将 useCapture 设置为 true，则侦听器只在捕获阶段处理事件，而不在目标或冒泡阶段处理事件。如果useCapture 为false，则侦听器只在目标或冒泡阶段处理事件。要在所有三个阶段都侦听事件，请调用两次 addEventListener，一次将 useCapture 设置为true，第二次再将useCapture 设置为 false。
　　4、priority:int (default = 0)
　　事件侦听器的优先级。优先级由一个带符号的 32 位整数指定。数字越大，优先级越高。优先级为 n 的所有侦听器会在优先级为 n -1的侦听器之前得到处理。如果两个或更多个侦听器共享相同的优先级，则按照它们的添加顺序进行处理。默认优先级为 0。
　　5、useWeakReference:Boolean (default = false)
　　确定对侦听器的引用是强引用，还是弱引用。强引用(默认值)可防止您的侦听器被当作垃圾回收。弱引用则没有此作用。

前面说完了概念那么我们直接上代码，代码分为两个部分，一部分是阿里云视频点播，第二部分是监听部分：

HTML部分

JS部分

//区分播放载体(Window,Mac,Linux)
function validataOS(){
if(navigator.userAgent.indexOf("Window")>0){
return "Windows";
}else if(navigator.userAgent.indexOf("Mac OS X")>0) {
return "Mac" ;
}else if(navigator.userAgent.indexOf("Linux")>0) {
return "Linux";
}else{
return NUll;
}
}
var computer_type = validataOS();
//视频id
var vid= 视频凭证ID
//播放器配置
var player_config={
id: 'J_prismPlayer',
width: '100%',
height:'50%',
skinLayout: skinLayout,
autoplay:true, //禁止自动播放
isLive:true,//禁止进度条
rePlay:true,//禁止自动循环播放
preload:true,
components: [
{name: 'MemoryPlayComponent', type: AliPlayerComponent.MemoryPlayComponent},
{name: 'RateComponent',type: AliPlayerComponent.RateComponent},//倍数播放组件
],
cover:视频播放页面（就是上面图片示例里面的蓝色的部分）,
};
//分配
if(player_config.isLive){
player_config.source = 播放地址;
player_config.components=[ {name: 'MemoryPlayComponent', type: AliPlayerComponent.MemoryPlayComponent},]
}else if(computer_type != 'Windows' || !vid){
player_config.source = 播放地址;
}else{
player_config.encryptType = 1;
player_config.vid = vid;
player_config.playauth ='播放模式';
}
//初始化
var player = new Aliplayer(player_config, function (player) {
player.on('timeupdate',function() {
//获取时间
look_time = Math.round(player.getCurrentTime());
});
});

$(document).ready(function(){
document.addEventListener('visibilitychange', function logData() {
if (document.visibilityState === 'hidden') {
navigator.sendBeacon('请求地址');
}
});
})

</script>

post请求记录方法：提供示例为php：

public function ajaxvedio(){

//创建文件夹
   if(!is_dir(FCPATH."/vediotest")){
           mkdir(FCPATH."/vediotest",0777);
   }
   file_put_contents ( FCPATH."/vediotest/".date('Y-m-d').".txt", "【".date ( "Y-m-d H:i:s" ) . "】\r\n \t" . "记录" . "\r\n", FILE_APPEND );
}

监听结果：