监听页面异常 + 监听页面跳转 +监听页面销毁 ：监听并记录当前页面停留的时间

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

        说一下我的思路：

     1.长链接 :

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

        2.JS：

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

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

        //HTML部分
                

        //JS部分
        

原生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部分

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

监听结果：

        至此监听页面异常 + 监听页面跳转 +监听页面销毁 ：监听并记录当前页面停留的时间功能讲解完成，至于还有没有其他方法，欢迎大家指教