优化 DiskCam.vue 中的 flv player, 保证总是获取最新的直播流

src/views/disk/DiskCam.vue

@@ -268,27 +268,57 @@ export default {
     },
     initVideoPlayer(videoUrl, live) {
       var videoElement = document.getElementById('videoElement')
-      if (live) {
-        if (!flvjs.isSupported()) {
-          this.$message.error('not support flv')
+      if (!live) {
+        videoElement.src = videoUrl
+        return
+      }
+
+      if (!flvjs.isSupported()) {
+        this.$message.error('not support flv')
+        return
+      }
+
+      this.flvPlayer = flvjs.createPlayer({
+        type: 'flv',
+        isLive: true,
+        url: videoUrl,
+        duration: 0,
+        filesize: 0,
+        enableStashBuffer: false,
+        hasAudio: true,
+        hasVideo: true
+      })
+      this.flvPlayer.attachMediaElement(videoElement)
+      this.flvPlayer.load()
+      this.flvPlayer.play()
+
+      videoElement.addEventListener('progress', () => {
+        const end = this.flvPlayer.buffered.end(0) // 获取当前buffered值(缓冲区末尾)
+        const delta = end - this.flvPlayer.currentTime // 获取buffered与当前播放位置的差值
+        // 延迟过大，通过跳帧的方式更新视频
+        if (delta > 10 || delta < 0) {
+          this.flvPlayer.currentTime = this.flvPlayer.buffered.end(0) - 1
           return
         }
 
-        this.flvPlayer = flvjs.createPlayer({
-          type: 'flv',
-          isLive: true,
-          url: videoUrl,
-          duration: 0,
-          filesize: 0,
-          enableStashBuffer: false,
-          hasAudio: true,
-          hasVideo: true
-        })
-        this.flvPlayer.attachMediaElement(videoElement)
-        this.flvPlayer.load()
-        this.flvPlayer.play()
-      } else {
-        videoElement.src = videoUrl
+        // 追帧
+        if (delta > 1) {
+          videoElement.playbackRate = 1.1
+        } else {
+          videoElement.playbackRate = 1
+        }
+      })
+      // 点击播放按钮后，更新视频
+      videoElement.addEventListener('play', () => {
+        if (this.flvPlayer.buffered.length > 0) {
+          const end = this.flvPlayer.buffered.end(0) - 1
+          this.flvPlayer.currentTime = end
+        }
+      })
+      // 网页重新激活后，更新视频
+      window.onfocus = () => {
+        const end = this.flvPlayer.buffered.end(0) - 1
+        this.flvPlayer.currentTime = end
       }
     },
     onSelectDate() {