vue3，循环项获取有ref名称的dom + 实现页面中允许只有一个video视频播放

vue3，循环项，通过ref名称获取dom + 多个video视频，实现页面中允许只有一个video视频播放（原生video标签）的实现方式

（菜鸡笔记）

###实现方式1:通过ref获取dom实现(推荐) `

    <template>
  <div class="box">
    <div v-for="item in arrList" :key="item">
      <video
        :id="'video' + item.id"
        :ref="setBoxRef"
        @play="handleinPlay(index)"
        class="expecail-video"
        type="video/mp4"
        :src="item.content"
        initial-time="0.01"
        controls
        preload="auto"
      ></video>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, ref,reactive } from 'vue';
const arrList=reactive([])

//ref名称的数组
const boxRefs = ref<HTMLElement[]>([])

//定义ref名称的变量，获取集合boxRefs
const setBoxRef = (el: any) => {
  if (el) {
    boxRefs.value.push(el)
  }
}
onMounted(() => {
//挂载成功变了获取dom的集合
  console.log(boxRefs.value)
})
//视频播放时，循环数据的index 和dom元素的顺序一致   
const handleinPlay = (index) => {
  for (let i = 0; i < boxRefs.value.length; i++) {
    if (i === index) {
      //播放时，当前视频播放
      boxRefs.value[i].play();
    } else {
    //非当前点击的视频暂停
      boxRefs.value[i].pause();
    }
  }
};
</script>

###实现方式2：网上搜索的结果，如果将handleinPlay方法中循环合并，视频会卡顿，原因没有深究

<template>
  <div class="box">
    <div v-for="item in arrList" :key="item">
      <video
        :id="'video' + item.id"
        @play="handleinPlay(index)"
        class="expecail-video"
        type="video/mp4"
        :src="item.content"
        initial-time="0.01"
        controls
        preload="auto"
      ></video>
    </div>
  </div>
</template>
<script lang="ts" setup>

const arrList=reactive([])

const handlePlay = (index) => {
  let videoElement =    document.getElementsByClassName("inner-video");
  if (videoElement && videoElement.length > 0) {
    for (let i = 0; i < videoElement.length; i++) {
      if (i === index) {
        videoElement[i].play();
        pauseOtherVideo(videoElement[i]);
      }
    }
  }
  function 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();
        }
      }
    }
  }
};
</script>