多个video标签，控制最多只能一个同时播放

1. 添加一个事件： @play="handlePlay(index)"

    <div
        v-for="(item, index) in videoUrlList"
        :key="index"
        :class="[
          item.productSuffix.toLowerCase() === 'mp4' ? 'videoClass' : 'adeoClass',
          'spaceClass',
        ]"
      >
        <p class="ggName">
          作品名称：{{ item.productName }}
          <span style="margin-left: 10px">
            作品类型：{{ item.productSuffix.toLowerCase() === 'mp4' ? '视频' : '音频' }}
          </span>
        </p>
        <video
          x5-playsinline="true"
          x-webkit-airplay="allow"
          webkit-playsinline="true"
          playsinline="true"
          controls="controls"
          class="videorece"
          object-fit="cover"
          controlslist="nodownload  noremoteplayback"
          :disablePictureInPicture="true"
          oncontextmenu="return false;"
          :src="item.productUrl"
          @play="handlePlay(index)"   // 这里是需要的事件
        ></video>
      </div>

2.在data中定义一个属性

videoElement: []

3. 在mounted中获取所有的 video标签

this.videoElement = document.getElementsByTagName('video');

4. 最后一步，在methods 中 设置事件

  handlePlay(index) {
      const videoElement = this.videoElement;
      if (videoElement && videoElement.length) {
        videoElement.forEach((v, i) =>
          i === index ? this.videoElement[i].play() : this.videoElement[i].pause(),
        );
      }
    },