视频损坏，跳过

src/containers/center/play/components/media.vue

@@ -124,7 +124,10 @@
     },
     beforeDestroy() {
       this.stopTick()
+      if (this._seekTimer) clearTimeout(this._seekTimer)
       this.reportErr("play", 'destroy');
+      document.removeEventListener("visibilitychange", this._onVisibilityChange)
+      document.removeEventListener("keydown", this._onKeyDown)
     },
     computed: {
       player() {
@@ -136,20 +139,20 @@
     },
     methods: {
       setMarks() {
-        console.log("setMarks")
-        if (!this.options.marks) return;
-        var div = document.getElementById('myVideo')
-        var div1 = div.firstChild
-        var div3 = document.createElement("div");
-        div3.setAttribute("class", "resize-drag");
-        if (this.mediaType == 'ld') {
-          div3.style.cssText =
-            "position:absolute;top:52px;left:10px; background-color: #f4f4f4;width:50px; height:50px;border-radius: 50%;";
-        } else {
-          div3.style.cssText =
-            "position:absolute;top:80px;left:18px; background-color: #f4f4f4;width:50px; height:50px;border-radius: 50%;";
-        }
-        div1.appendChild(div3)
+        // console.log("setMarks")
+        // if (!this.options.marks) return;
+        // var div = document.getElementById('myVideo')
+        // var div1 = div.firstChild
+        // var div3 = document.createElement("div");
+        // div3.setAttribute("class", "resize-drag");
+        // if (this.mediaType == 'ld') {
+        //   div3.style.cssText =
+        //     "position:absolute;top:52px;left:10px; background-color: #f4f4f4;width:50px; height:50px;border-radius: 50%;";
+        // } else {
+        //   div3.style.cssText =
+        //     "position:absolute;top:80px;left:18px; background-color: #f4f4f4;width:50px; height:50px;border-radius: 50%;";
+        // }
+        // div1.appendChild(div3)
       },
       startTick() {
         let tick = this.tryTick;
@@ -170,12 +173,26 @@
       playerReadied(player) {
         let that = this;
         this.isReady = true
+
+        setTimeout(() => this.fixTouchEvents(player), 0);
         setTimeout(() => this.setMarks(), 600);
 
-        if (this.media.position > 5 && this.media.position < this.media.duration) {
-          setTimeout(function() {
-            that.setposition(that.media.position)
-          }, 300)
+        if (this.media.position > 5) {
+          player.one('loadedmetadata', function () {
+            let pos = that.media.position
+            if (pos < player.duration()) {
+              that.setposition(pos)
+              that._seekTimer = setTimeout(function () {
+                if (!player.el_) return
+                player.currentTime(0)
+                player.play()
+              }, 15000)
+              player.one('seeked', function () {
+                clearTimeout(that._seekTimer)
+                that._seekTimer = null
+              })
+            }
+          })
         }
 
         setTimeout(() => {
@@ -185,8 +202,23 @@
           }
         }, 1000)
       },
+      fixTouchEvents(player) {
+        let slider = player.controlBar &&
+                     player.controlBar.progressControl &&
+                     player.controlBar.progressControl.seekBar
+        if (!slider) return
+        if (slider.handleTouchStart_) {
+          document.removeEventListener('touchstart', slider.handleTouchStart_)
+          document.addEventListener('touchstart', slider.handleTouchStart_, { passive: false })
+        }
+        if (slider.handleTouchMove_) {
+          document.removeEventListener('touchmove', slider.handleTouchMove_)
+          document.addEventListener('touchmove', slider.handleTouchMove_, { passive: false })
+        }
+      },
       onPlayerTimeupdate(player) {
-        let myPlayer = this.$refs.videoPlayer.player;
+        let myPlayer = this.$refs.videoPlayer && this.$refs.videoPlayer.player;
+        if (!myPlayer) return;
         let curTimes = player.cache_.currentTime;
         this.curTimes = curTimes || 0
         if (this.media.isFinish) {
@@ -195,11 +227,14 @@
       },
       setposition(position) {
         console.log("setposition", position)
-        if (position > this.media.duration) position = this.media.duration;
-        let player = this.$refs.videoPlayer.player;
+        let player = this.$refs.videoPlayer && this.$refs.videoPlayer.player;
+        if (!player || !player.el_) return;
+        let dur = player.duration()
+        if (position > dur) position = dur;
+        console.log("currentTime", position)
         player.currentTime(position);
         if (this.media.isFinish) return;
-        if (this.media.position >= this.media.duration - 10 && !this.media.isFinish) {
+        if (position >= dur - 10 && !this.media.isFinish) {
           this.tick(true)
         }
         // this.onPlay = true
@@ -225,7 +260,7 @@
         // console.log("doPause")
         this.stopTick()
         this.onPlay = false
-        let myPlayer = this.$refs.videoPlayer.player;
+        let myPlayer = this.$refs.videoPlayer && this.$refs.videoPlayer.player;
         myPlayer && myPlayer.pause()
       },
       doPlay() {
@@ -259,24 +294,22 @@
         this.onPlay = true
       },
       startMonitor() {
-        let that = this
-        document.addEventListener("visibilitychange", function() {
-          // || document.hidden
+        this._onVisibilityChange = () => {
           if (document.visibilityState == "hidden") {
-            // that.doPause( )
-            that.reportErr("play", 'hidden');
+            this.reportErr("play", 'hidden');
           } else {
-            that.reportErr("play", 'show');
-            // that.doPlay()
+            this.reportErr("play", 'show');
           }
-        });
-        // 监听F12
-        document.addEventListener("keydown", function(e) {
+        }
+        document.addEventListener("visibilitychange", this._onVisibilityChange);
+
+        this._onKeyDown = (e) => {
           if (e.key == "F12") {
-            that.reportErr("play", 'keydownF12');
+            this.reportErr("play", 'keydownF12');
             try { e.preventDefault() } catch (err) {}
           }
-        });
+        }
+        document.addEventListener("keydown", this._onKeyDown);
 
         // setInterval(function() { check() }, 1000);
 
@@ -335,15 +368,32 @@
       tick(force = false) {
         let media = this.media;
         this.tickNum++
+        // 检测卡死：两次 tick 无进度则跳过 5 秒
+        let myPlayer = this.$refs.videoPlayer && this.$refs.videoPlayer.player;
+        if (myPlayer) {
+          let now = parseInt(myPlayer.currentTime())
+          if (this._lastCurTime !== undefined && now === this._lastCurTime && this.onPlay) {
+            this._stuckCount = (this._stuckCount || 0) + 1
+            if (this._stuckCount >= 2) {
+              this._stuckCount = 0
+              let skip = now + 5
+              console.log("stuck skip to", skip)
+              myPlayer.currentTime(skip)
+            }
+          } else {
+            this._stuckCount = 0
+          }
+          this._lastCurTime = now
+        }
         // 已经完成
         if (this.media.isFinish) {
           console.log("finish")
           return;
         }
         // 主动暂停
-        let myPlayer = this.$refs.videoPlayer.player;
+        if (!myPlayer) return;
 
-        let curTimes = parseInt(myPlayer.currentTime());
+        let curTimes = this._lastCurTime
         if (curTimes < 4) {
           console.log("curTimes")
           return;

src/containers/center/play/index.vue

@@ -92,6 +92,7 @@
      :width="mediaType=='hls'?'720px':'540px'"
      >
         <Media
+          v-if="mediaDialog"
           :options="options"
           :dialog="mediaDialog"
           :media="media"