解决延迟问题

public/index.html

@@ -7,9 +7,9 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 <!--    加快视频的响应速度-->
-    <link href="/static/video-js-cdn.min.css" rel="stylesheet">
+    <link href="/video_play_plugins/video-js-cdn.min.css" rel="stylesheet">
-    <script src="/static/video.js"></script>
+    <script src="/video_play_plugins/video.js"></script>
-    <script src="/static/videojs-contrib-hls.min.js"></script>
+    <script src="/video_play_plugins/videojs-contrib-hls.min.js"></script>
 
     <title>垛机视觉系统</title>
 </head>

src/views/realTimeMonitoring/VideoPlayer.vue

@@ -1,10 +1,12 @@
 <template>
     <video-player
+        v-if="showVideo"
         ref="video-player"
         class="vjs-custom-skin"
         :options="playerOptions"
         @pause="onPlayerPause"
         @playing="onPlayerPlaying"
+        @timeupdate="onPlayerTimeupdate"
         @ended="onPlayerEnded"
     />
 </template>
@@ -27,6 +29,7 @@ export default {
     },
     data() {
         return {
+            showVideo: true,
             isPlay: false, // 是否正在播放
             playerOptions: {
                 sources: [{
@@ -74,6 +77,20 @@ export default {
         onPlayerEnded($event) {
             this.isPlay = false;
         },
+        // 播放
+        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;
+                })
+            }
+        }
     }
 }
 </script>