一个页面中有多个视频播放

单页面中多个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();
    }
  });
}