|
|
@@ -9,7 +9,7 @@
|
|
|
</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 +19,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 +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 {
|
y595705120