心跳改10秒

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

@@ -5,11 +5,12 @@
     <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="10" class="media-time">
+        <el-col :span="8" class="media-time">
           <span>{{curTimes|useTime}}</span>
           <strong>/</strong>
           <span>{{media.duration|useTime}}</span>
@@ -19,7 +20,14 @@
             circle></el-button>
           <el-button class="bicon" v-else type="warning" @click="doPause" icon="el-icon-video-pause" circle></el-button>
         </el-col>
-        <el-col :span="10" class="media-select">
+        <el-col :span="6" class="media-center">
+          <span class="volume-control">
+            <span class="vol-icon" @click="toggleMute">音量</span>
+            <el-slider class="volume-slider" :value="volume" :min="0" :max="1" :step="0.05"
+              @input="setVolume"></el-slider>
+          </span>
+        </el-col>
+        <el-col :span="6" class="media-select">
           <el-button class="bicon" type="danger" icon="el-icon-close" @click="onClose" style="float: right;">
           </el-button>
           <div style="margin-top:0px;float: right;">
@@ -57,7 +65,9 @@
         prevTime: 0,
         isReady: false,
         curTimes: 0,
-        onPlay: false
+        onPlay: false,
+        volume: 0.5,
+        isMuted: false
       }
     },
     components: {
@@ -99,13 +109,6 @@
         }
       }
     },
-    mounted() {
-      setTimeout(() => {
-        this.$emit("updateOption", {
-          muted: false
-        })
-      }, 3000)
-    },
     filters: {
       useTime(val) {
         let timestr = ""
@@ -125,7 +128,7 @@
     computed: {
       player() {
         return this.$refs.videoPlayer.player
-      }
+      },
     },
     created() {
       this.startTick()
@@ -151,7 +154,7 @@
       startTick() {
         let tick = this.tryTick;
         if (this.timer) clearInterval(this.timer);
-        this.timer = setInterval(tick, 5 * 1000);
+        this.timer = setInterval(tick, 10 * 1000);
       },
       stopTick() {
         if (this.timer) clearInterval(this.timer);
@@ -169,10 +172,17 @@
         let that = this;
 
         if (this.media.position > 5 && this.media.position < this.media.duration) {
-          this.setposition(this.media.position+3)
+          this.setposition(this.media.position)
         }
         this.isReady = true
         setTimeout(() => this.setMarks(), 600);
+
+        setTimeout(() => {
+          if (that.player && that.player.volume) {
+            that.player.volume(that.volume)
+            that.player.muted(that.isMuted)
+          }
+        }, 1000)
       },
       onPlayerTimeupdate(player) {
         let myPlayer = this.$refs.videoPlayer.player;
@@ -198,6 +208,16 @@
         this.stopTick()
         this.onPlay = false
       },
+      onPlayerError(event) {
+        this.reportErr("play", 'error');
+        let player = this.$refs.videoPlayer && this.$refs.videoPlayer.player;
+        if (player) {
+          player.pause();
+          setTimeout(() => {
+            player.play();
+          }, 1000);
+        }
+      },
       onPlayerEnded(event) {
         this.reportErr("play", 'end');
         this.tick(true)
@@ -224,6 +244,20 @@
         myPlayer && myPlayer.play()
         this.tickNum = 0
       },
+      setVolume(val) {
+        this.volume = val
+        this.isMuted = val === 0
+        if (this.player && this.player.volume) {
+          this.player.volume(val)
+          this.player.muted(this.isMuted)
+        }
+      },
+      toggleMute() {
+        this.isMuted = !this.isMuted
+        if (this.player && this.player.volume) {
+          this.player.muted(this.isMuted)
+        }
+      },
       onPlayerStart() {
         // console.log("onPlayerStart")
         this.reportErr("play", 'start');
@@ -360,7 +394,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)
           }
@@ -403,6 +442,46 @@
   .media-center {
     text-align: center;
     padding: 0px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+  }
+
+  .volume-control {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  .vol-icon {
+    font-size: 12px;
+    font-weight: bold;
+    cursor: pointer;
+    color: #606266;
+    user-select: none;
+    line-height: 1;
+  }
+
+  .vol-icon:hover {
+    color: #409eff;
+  }
+
+  .volume-slider {
+    width: 80px !important;
+  }
+
+  .volume-slider .el-slider__runway {
+    height: 4px;
+  }
+
+  .volume-slider .el-slider__bar {
+    height: 4px;
+  }
+
+  .volume-slider .el-slider__button {
+    width: 12px;
+    height: 12px;
   }
 
   .media-time {