视频一直加载中 重新渲染

public/index.html

@@ -10,7 +10,6 @@
     <link href="/video_play_plugins/video-js-cdn.min.css" rel="stylesheet">
     <script src="/video_play_plugins/video.js"></script>
     <script src="/video_play_plugins/videojs-contrib-hls.min.js"></script>
-
     <title>垛机视觉系统</title>
 </head>
 

src/views/realTimeMonitoring/VideoPlayer.vue

@@ -8,6 +8,10 @@
         @playing="onPlayerPlaying"
         @timeupdate="onPlayerTimeupdate"
         @ended="onPlayerEnded"
+        @error="onError"
+        @emptied="onEmptied"
+        @statechanged="playerStateChanged"
+        @loadeddata="onPlayerLoadeddata"
     />
 </template>
 
@@ -29,6 +33,8 @@ export default {
     },
     data() {
         return {
+            timer: null, // 识别是否正常播放
+            currentTime: 0, // 当前播放时间
             showVideo: true,
             isPlay: false, // 是否正在播放
             playerOptions: {
@@ -68,28 +74,64 @@ export default {
         onPlayerPause() {
             this.isPlay && this.$emit('showModel');
             // this.isPlay = false;
+            console.log('onPlayerPause');
         },
         // 已开始播放回调
         onPlayerPlaying(...args) {
             this.isPlay = true;
+            console.log('onPlayerPlaying');
         },
         // 视频播完回调
         onPlayerEnded($event) {
             this.isPlay = false;
+            console.log('onPlayerEnded');
         },
+        onTimer() {
+            this.timer && clearTimeout(this.timer);
+            this.timer = setTimeout(() => {
+                this.onloadVideo();
+            }, 8 * 1000)
+        },
+        onloadVideo() {
+            console.log('重新加载了');
+            const videoRef = this.$refs['video-player'];
+            console.log(videoRef);
+            this.showVideo = false;
+            this.$nextTick(() => {
+                this.showVideo = true;
+            })
+        },
+        onError(data) {
+            console.log('onError');
+            console.log(data);
+        },
+        onEmptied(data) {
+            console.log('onEmptied');
+            console.log(data);
+        },
+        onPlayerLoadeddata($event) {
+            console.log('onPlayerLoadeddata')
+        },
+        playerStateChanged(playerCurrentState) {
+            // 视频正在等待中
+            if(playerCurrentState.waiting) {
+                // this.onTimer();
+            }else {
+                this.timer && clearTimeout(this.timer);
+            }
+            // console.log('player current update state', playerCurrentState)
+        },
+
         // 播放
         onPlayerTimeupdate($event) {
+            // 已经加载了多长时间的视频
             const bufferedEnd = $event.bufferedEnd();
+            // 已经播放了多久
             const currentTime = $event.currentTime();
-            // 延迟时间
-            const differTime = bufferedEnd - currentTime
-            // 超过延迟重新加载
-            if(differTime > 60) {
-                this.showVideo = false;
-                this.$nextTick(() => {
-                    this.showVideo = true;
-                })
-            }
+            this.currentTime = currentTime;
+            // this.onTimer();
+            // 还剩多少时间可以播放
+            const differTime = bufferedEnd - currentTime;
         }
     }
 }
@@ -107,5 +149,9 @@ export default {
     .vjs-control-bar {
         display: none !important;
     }
+    // 加载中转圈
+    .vjs-loading-spinner {
+        // display: none;
+    }
 }
 </style>