单页面中多个video标签
前几天做了一个项目,一个页面中有六个video标签,视频自动播放,需要联播。一开始使用点击事件click,点击非控件可行,能够实现上述功能,但是当点击控件比如播放按钮的时候,视频就重叠了,后来才得知可以使用onplay事件
vue项目
<div class="img" @click="videoPlay(index)">
<video :src="sport.url" controls="controls" ref="video" @ended="audioEnd" @play="playVideo(index)" ></video>
</div>
playVideo(index) { // 点击的是播放按钮
this.play(index);
},
videoPlay(index) { // 点击的是控件以外的地方
const video = this.$refs.video;
// 如果播放 就暂停 否则 播放
if (!video[index].paused) {
video[index].pause();
return;
} else {
video[index].play();
}
this.play(index);
},
audioEnd() {
// 播放结束 index+1 播放下一条
const video = this.$refs.video;
this.index++;
if (this.index === this.sportsArticleList.length) {
this.index = 0;
return;
}
video[this.index].play();
},
play(index) {
// 播放当前 其它都暂停
const video = this.$refs.video;
this.index = index;
video[index].play();
video.forEach((item, ind) => {
if (ind !== index) {
item.pause();
}
});
}