HTML部分
<div class="fl">
<div class="video-box">
<div v-for="(video, index) in videoList" :key="index">
<video
style="width: 100%; height: 300px"
:id="'video' + index"
ref="videoElement"
controls
autoplay
muted
></video>
</div>
</div>
<div style="display: flex; width: 1000px" class="mt">
<el-button @click="playOrPauseBtn">
<i class="el-icon-video-play" v-if="playOrPause">播放</i>
<i class="el-icon-video-pause" v-else>暂停</i>
</el-button>
<el-button @click="backTwentySeconds">后退20秒</el-button>
<el-button @click="backTenSeconds">后退10秒</el-button>
<el-button @click="backFiveSeconds">后退5秒</el-button>
<el-button @click="slowPlayback">减速播放</el-button>
<el-button @click="oneXSpeed">1X</el-button>
<el-button @click="twoXSpeed">2X</el-button>
<el-button @click="threeXSpeed">3X</el-button>
<el-button @click="fourXSpeed">4X</el-button>
<el-button @click="fiveXSpeed">5X</el-button>
<el-button @click="sixXSpeed">6X</el-button>
<el-button @click="sevenXSpeed">7X</el-button>
<el-button @click="eightXSpeed">8X</el-button>
</div>
</div>
script部分
data(){
return {
playOrPause: false,
}
}
mounted(){
setInterval(() => {
this.playcomplete();
}, 5000);
}
methods:{
//播放或暂停
playOrPauseBtn() {
const videoElement = this.$refs.videoElement;
console.log(this.playOrPause);
if (this.playOrPause) {
videoElement.forEach((v) => {
v.play();
});
this.playOrPause = !this.playOrPause;
} else {
videoElement.forEach((v) => {
v.pause();
});
this.playOrPause = !this.playOrPause;
}
},
// 后退20秒
backTwentySeconds() {
const videoElement = this.$refs.videoElement;
videoElement.forEach((v) => {
v.currentTime -= 20;
});
},
// 后退10秒
backTenSeconds() {
const videoElement = this.$refs.videoElement;
videoElement.forEach((v) => {
v.currentTime -= 10;
});
},
// 后退5秒
backFiveSeconds() {
const videoElement = this.$refs.videoElement;
videoElement.forEach((v) => {
v.currentTime -= 5;
});
},
//同步播放
simulcast() {
const videoElement = this.$refs.videoElement;
videoElement[0].currentTime = videoElement[1].currentTime;
},
//判断是否播放完毕
playcomplete() {
// debugger;
const videoElement = this.$refs.videoElement;
videoElement.forEach((v) => {
if (v.currentTime >= v.duration) {
// this.videoEnd = true;
this.playOrPause = true;
console.log("播放完毕");
} else if (v.currentTime >= v.duration && this.playOrPause) {
this.playOrPause = false;
// this.videoEnd = false;
console.log("播放中");
}
});
},
//减速播放
slowPlayback() {
const videoElement = this.$refs.videoElement;
videoElement.forEach((v) => {
if (v.playbackRate * 10 > 2) {
v.playbackRate = (v.playbackRate * 10 - 2) / 10;
}
});
},
//1X
oneXSpeed() {
const videoElement = this.$refs.videoElement;
videoElement.forEach((v) => {
v.playbackRate = 1;
});
},
//2X
twoXSpeed() {
const videoElement = this.$refs.videoElement;
videoElement.forEach((v) => {
v.playbackRate = 2;
});
},
//3X
threeXSpeed() {
const videoElement = this.$refs.videoElement;
videoElement.forEach((v) => {
v.playbackRate = 3;
});
},
//4X
fourXSpeed() {
const videoElement = this.$refs.videoElement;
videoElement.forEach((v) => {
v.playbackRate = 4;
});
},
//5X
fiveXSpeed() {
const videoElement = this.$refs.videoElement;
videoElement.forEach((v) => {
v.playbackRate = 5;
});
},
// 6X
sixXSpeed() {
const videoElement = this.$refs.videoElement;
videoElement.forEach((v) => {
v.playbackRate = 6;
});
},
// 7X
sevenXSpeed() {
const videoElement = this.$refs.videoElement;
videoElement.forEach((v) => {
v.playbackRate = 7;
});
},
// 8X
eightXSpeed() {
const videoElement = this.$refs.videoElement;
videoElement.forEach((v) => {
v.playbackRate = 8;
});
},
}