vue控制一个页面只能播放一个音频或视频

问题常见页面：1个页面有多个视频或者音频，如考试答题系统，每个选项是音频。这就会涉及到同时播放问题。解决这个问题还是简单的，主要是通过添加播放事件，循环暂停非当前点击播放的video或者audio，以达到效果。

1.基本处理方法

//视频音频只能同时播放一个
const makeOnePlay = (videoList, audioList) => { 
 for (let i = 0; i < videoList.length; i++) {
    let video = videoList[i]
    video.addEventListener("play", function(e) {
      for (let j = 0; j < videoList.length; j++) {
        if (j !== i) {
          videoList[j].pause()
        }
      }
      for (let k = 0; k < audioList.length; k++) {
        audioList[k].pause()
      }
    })
  }
  for (let i = 0; i < audioList.length; i++) {
    let audio = audioList[i]
    audio.addEventListener("play", function(e) {
      for (let j = 0; j < audioList.length; j++) {
        if (j !== i) {
          audioList[j].pause()
        }
      }
      for (let k = 0; k < videoList.length; k++) {
        videoList[k].pause()
      }
    })
  }
}

2.使用方式

      this.$nextTick(() => {
        const videoList = document.querySelectorAll("video")
        const audioList = document.querySelectorAll("audio")
        this.makeOnePlay(videoList, audioList)
      })

推荐：
以AI人工智能问答AI助手