播放器

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

@@ -9,17 +9,24 @@
     </video-player>
     <div class="dialog-footer pt30">
       <el-row class="media-footer">
-        <el-col :span="10" class="media-time">
+        <el-col :span="6" class="media-time">
           <span>{{curTimes|useTime}}</span>
           <strong>/</strong>
           <span>{{media.duration|useTime}}</span>
         </el-col>
-        <el-col :span="4" class="media-center">
+        <el-col :span="6" 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>
         </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 +64,9 @@
         prevTime: 0,
         isReady: false,
         curTimes: 0,
-        onPlay: false
+        onPlay: false,
+        volume: 0.5,
+        isMuted: false
       }
     },
     components: {
@@ -99,13 +108,6 @@
         }
       }
     },
-    mounted() {
-      setTimeout(() => {
-        this.$emit("updateOption", {
-          muted: false
-        })
-      }, 3000)
-    },
     filters: {
       useTime(val) {
         let timestr = ""
@@ -125,7 +127,7 @@
     computed: {
       player() {
         return this.$refs.videoPlayer.player
-      }
+      },
     },
     created() {
       this.startTick()
@@ -173,6 +175,13 @@
         }
         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;
@@ -224,6 +233,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');
@@ -403,6 +426,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 {

src/containers/center/play/index.vue

@@ -168,15 +168,8 @@
             timeDivider: true,
             durationDisplay: true,
             remainingTimeDisplay: false,
-            fullscreenToggle: true  //全屏按钮
-            // currentTimeDisplay: true, // 当前时间
-            // timeDivider: true, // 时间分割线
-            // durationDisplay: true, // 总时间
-            // progressControl: true, // 进度条
-            // remainingTimeDisplay: true, //
-            // customControlSpacer: true, //
-            // fullscreenToggle: true, // 全屏按钮
-            // volumePanel: true
+            fullscreenToggle: true,
+            volumePanel: true
           }
         },
         list: [],