默认

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

@@ -5,16 +5,17 @@
     <div class="v-wrap-marks"></div>
     <video-player id="myVideo" class="video-player-box" ref="videoPlayer" :playsinline="true"
       @pause="onPlayerPause($event)" @timeupdate="onPlayerTimeupdate($event)" @play="onPlayerStart($event)"
-      @ready="playerReadied" @ended="onPlayerEnded($event)" :globalOptions="{controls:true}" :options="options">
+      @ready="playerReadied" @ended="onPlayerEnded($event)" @error="onPlayerError($event)"
+      :globalOptions="{controls:true}" :options="options">
     </video-player>
     <div class="dialog-footer pt30">
       <el-row class="media-footer">
-        <el-col :span="6" class="media-time">
+        <el-col :span="8" class="media-time">
           <span>{{curTimes|useTime}}</span>
           <strong>/</strong>
           <span>{{media.duration|useTime}}</span>
         </el-col>
-        <el-col :span="6" class="media-center">
+        <el-col :span="4" class="media-center">
           <el-button class="bicon" v-if="!onPlay" type="primary" @click="doPlay" icon="el-icon-video-play"
             circle></el-button>
           <el-button class="bicon" v-else type="warning" @click="doPause" icon="el-icon-video-pause" circle></el-button>
@@ -130,7 +131,6 @@
       },
     },
     created() {
-      this.startTick()
       this.startMonitor()
     },
     methods: {
@@ -166,15 +166,16 @@
           that.reportErr("play", '' + err.message)
         }
       },
-      playerReadied(audio) {
-        console.log("playerReadied", audio)
+      playerReadied(player) {
         let that = this;
+        this.isReady = true
+        setTimeout(() => this.setMarks(), 600);
 
         if (this.media.position > 5 && this.media.position < this.media.duration) {
-          this.setposition(this.media.position+3)
+          setTimeout(function() {
+            that.setposition(that.media.position)
+          }, 300)
         }
-        this.isReady = true
-        setTimeout(() => this.setMarks(), 600);
 
         setTimeout(() => {
           if (that.player && that.player.volume) {
@@ -207,6 +208,9 @@
         this.stopTick()
         this.onPlay = false
       },
+      onPlayerError(event) {
+        this.reportErr("play", 'error');
+      },
       onPlayerEnded(event) {
         this.reportErr("play", 'end');
         this.tick(true)
@@ -224,13 +228,13 @@
         myPlayer && myPlayer.pause()
       },
       doPlay() {
-        // console.log("doPlay")
         this.onPlay = true
         this.startTick();
         if (!this.$refs.videoPlayer || !this.$refs.videoPlayer.player) return;
         if (!this.dialog) return this.doPause();
         let myPlayer = this.$refs.videoPlayer.player;
-        myPlayer && myPlayer.play()
+        let p = myPlayer && myPlayer.play()
+        if (p && p.catch) p.catch(function() {})
         this.tickNum = 0
       },
       setVolume(val) {
@@ -269,7 +273,7 @@
         document.addEventListener("keydown", function(e) {
           if (e.key == "F12") {
             that.reportErr("play", 'keydownF12');
-            e.preventDefault();
+            try { e.preventDefault() } catch (err) {}
           }
         });
 
@@ -337,12 +341,8 @@
         }
         // 主动暂停
         let myPlayer = this.$refs.videoPlayer.player;
-        let curTimes = parseInt(myPlayer.currentTime());
-        // 后退无心跳
-        if (!force && this.media.position > (curTimes+8)){
-          return;
-        }
 
+        let curTimes = parseInt(myPlayer.currentTime());
         if (curTimes < 4) {
           console.log("curTimes")
           return;
@@ -353,6 +353,7 @@
         //  拉到后面
         if (!isFinish) {
           if (!this.onPlay) return;
+          if(curTimes <= media.position) return;
         }
         if(window.navigator.webdriver){
           this.reportErr("play", 'webdriver');
@@ -383,7 +384,12 @@
               }
               return
             }
-            if (!skip) this.setposition(position);
+            if (!skip) {
+              let diff = Math.abs(position - curTimes);
+              if (diff > 3) {
+                this.setposition(position);
+              }
+            }
             Object.assign(param, res.data)
             this.$emit("update", param)
           }
@@ -395,6 +401,7 @@
 
 <style>
   .video-js {
+    touch-action: none;
     .vjs-control-bar {
       .vjs-icon-custombutton {
         font-family: VideoJS;