心跳

src/views/Real-time-image/index.vue

@@ -126,22 +126,42 @@ export default {
                 sources: [
                     {
                         type: 'application/x-mpegURL',
-                        src: 'http://192.168.0.99:18080/live/215.m3u8', //你的m3u8地址（必填）
+                        src: 'http://192.168.0.99:18080/hls/101_201.m3u8', //你的m3u8地址（必填）
                     },
                 ],
                 poster: '', //你的封面地址
                 width: document.documentElement.clientWidth,
                 notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
             },
+            heartbeat: null,//记录心跳事件 销毁时删除心跳
         }
     },
-    mounted(){
-        // setTimeout(()=>{
-        //     this.playerOptions.muted = false
-        // },3000)
+    mounted() {
+        //监听浏览器关闭事件  防止用户直接关闭浏览器 销毁钩子不触发
+        window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
+        window.addEventListener('unload', e => this.unloadHandler(e))
+        //进页面时 开始播放视频建立心跳  隔30秒心跳一次  当用户切换视频时 当前心跳断开  带参数传给后端建立新得心跳
+        this.heartbeat = setInterval(() => {
+            //发请求给后端建立心跳
+
+        }, 30000)
+    },
+    beforeDestroy() {
+        //关闭心跳
+        clearInterval(this.heartbeat);
+        this.heartbeat = null;
+        //正常关闭组件  就销毁监听事件
+        window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e))
+        window.removeEventListener('unload', e => this.unloadHandler(e))
     },
     methods: {
 
+        beforeunloadHandler(e) {
+           console.log('触发了beforeunloadHandler')
+        },
+        unloadHandler() {
+            console.log('触发了unloadHandler')
+        },
 
         //添加摄像头
         addCamera() {
@@ -188,16 +208,20 @@ export default {
         .vjs-tech {
             object-fit: cover;
         }
-        .vjs-current-time{
+
+        .vjs-current-time {
             display: none;
         }
-        .vjs-live-control{
+
+        .vjs-live-control {
             display: none;
         }
-        .vjs-time-control{
+
+        .vjs-time-control {
             display: none;
         }
-        .vjs-playing{
+
+        .vjs-playing {
             display: none;
         }
     }