博客

项目中，一个页面有两个视频组件，即有多个视频，若视频同时播放，会造成声音混乱。因此，在播放一个视频时，应该将其他视频暂停掉。

<video controls class="myVideo"  id="myVideo"  @ended="ended"  @play="play"            :src="videoUrl" autoplay muted > </video>

<div
   v-for="(child,index) in list" :key="index">
    <video controls class="myVideoContent" id="myVideo" @ended="ended" @play="handlePlay(index)" :src="child.videoUrl" autoplay muted>
    </video>
 </div>

页面中有两个视频组件，第一个组件有一个视频，第二个组件显示数组里的多个视频。

play(){
   let videoElement = document.getElementsByClassName('myVideo')
   if (videoElement &&videoElement.length > 0) {
     for (let i = 0; i < videoElement.length; i++) {
        videoElement[i].play()
        this.pauseOtherVideo(videoElement[i])
        }
      }
    },
    pauseOtherVideo(element){  //暂停播放除element外的其他视频
      let allVideoElement = document.getElementsByTagName('video') // 获取页面上所有的video对象
      if (allVideoElement && allVideoElement.length > 0) {
        for (let i = 0; i < allVideoElement.length; i++) {
            if(allVideoElement[i]!=element){
               allVideoElement[i].pause()
            }
        }
      }
    },
    handlePlay(index){
      let videoElement = document.getElementsByClassName('myVideoContent')
      if (videoElement && videoElement.length > 0) {
        for (let i = 0; i < videoElement.length; i++) {
          if (i === index) {
            videoElement[i].play()
            this.pauseOtherVideo(videoElement[i])
          } 
        }
      }
    },

这里需要注意的一点是，因为页面中里有两个视频组件，需要给不同组件不同命名，不然在使用getElementsByClassName获取元素，控制视频播放暂停时，会造成混乱。