video标签 视频暂停播放的问题，vue中同一个video标签中多个视频的播放问题

获取后来返回来的视频地址放在了elment的走马灯里面 进行自动切换

要求:
实现双击在弹窗中播放，弹窗大小【1000*550】(第一点)
原视频和弹窗内视频互斥，不可同时播放（第二点）
上传多个视频，左右切换时，不可同时播放（第三点）
鼠标移入走马灯不自动轮播，点击播放时不自动轮播，鼠标移出，走马灯开始自动轮播（第四点）

<el-carousel
       v-else-if="samplingSceneVideofileList.length"
       height="300px"
       :autoplay="carout"
       class="videoCarousel"
       >
       <el-carousel-item
           v-for="(item, index) in samplingSceneVideofileList"
           :key="item.url"
           >
           <video
           :src="item.url"
           ref="videoView"
           style="width: 100%; height: 100%"
           :controls="isShowcontrols"
           controlsList="nofullscreen nodownload noplaybackrate noremote footbar"
           :disablePictureInPicture="true"
           @dblclick="playVideo"
           @play="handlePlay(index)"
           @pause="handlePause"
           @mouseenter="mouseenterPause"
           @mouseleave="mouseenterPlay"
           >
           您的浏览器不支持 video 标签。
           </video>
        </el-carousel-item>
    </el-carousel>
    <!-- video视频弹出框播放 -->
    <el-dialog
      :visible.sync="videoState"
      width="1000px"
      heigth="610px"
      :close-on-click-modal="false"
      class="videoDialog"
      :before-close="dialogClose"
      :append-to-body="true"
    >
      <video :src="videoSrc" controls="controls" autoplay>
        您的浏览器不支持 video 标签。
      </video>
    </el-dialog>
data() {
    return {
      videoSrc: "",
      videoState: false, //弹出框
      isShowcontrols: false, 
      carout: true,//走马灯是否自动轮播
      isPlay: false, //全局变量 判断是否有视频再播放
    };
  },
  methods：{
  //视频播放
  handlePlay(index) {
      const videoElement = this.$refs.videoView.length; 
      if (videoElement > 0) {
        for (let i = 0; i < videoElement; i++) {
          if (i == index) { //第三点 一个播放 其余的暂停  只允许一个播放 
            this.$refs.videoView[i].play();
          } else {
            this.$refs.videoView[i].pause();
          }
          this.isPlay = true;
        }
      }
    },
    //视频暂停
    handlePause() {
      this.isPlay = false;
    },
    //双击视频 第一点
    playVideo(index) {
      // 打开弹出框
      this.videoState = true;
      // 视频地址
      this.videoSrc = index.target.currentSrc;
      const videoData = this.$refs.videoView.length;
      if (videoData > 0) { //第二点  弹出框打开后 播放视频 原视频必须暂停
        for (let i = 0; i < videoData; i++) {
          if (!this.$refs.videoView[i].paused) {
            this.$refs.videoView[i].pause();
          } else {
            this.$refs.videoView[i].pause();
          }
        }
      }
    },
    // 鼠标移入
    mouseenterPause() {
      this.carout = false; //走马灯自动轮播暂停
      this.isShowcontrols = true; //播放器的工具
    },
    // 鼠标移出
    mouseenterPlay() {
      this.isShowcontrols = false; //播放器的工具
      if (this.videoState || this.isPlay) { //判断弹出框 和 视频是否在播放
        return; //返回false
      } else {
        this.carout = true;//走马灯自动轮播开启
      }
    },
    //弹出框关闭按钮
    dialogClose() {
      this.videoState = false;
      this.carout = true;//走马灯自动轮播开启
    },
  }

图片示意图