vue中video标签，仅允许一个播放，其余暂停播放；vue获取不到video.length

1. template结构（video动态生成）

   <div v-for="(item, index) in List" :key="index">
       <video controls :src="item.url"></video>
    </div>
   

2. methods 函数
   vue中获取video标签集合videos，输出videos.length为0，必须使用this.$nexTick

   for循环注意使用闭包或者自定义属性解决循环之后只给最后一个元素绑定了点击事件的问题

   setVideo() {
       let that = this
       var videos = document.getElementsByTagName('video')             
       this.$nextTick(function () {
           for (var i = 0; i <videos.length; i++) {
               (function(n){
                   videos[n].addEventListener('play',function(){
                       that.pauseAll(n);
                   })
               })(i)
           }
       })
   },
   
   pauseAll(index) {
     var videos = document.getElementsByTagName('video')
     this.$nextTick(function () {
         for (var j = 0; j< videos.length; j++) {
             if (j !== index){
                 videos[j].pause()
                 // videos[j].load();
             }
         }
     })                
   }
   

改成vue3版本：

const pauseAll = (index: any) => {  
    const videos = document.getElementsByTagName('video');  
    nextTick(() => {  
      for (let j = 0; j < videos.length; j++) {  
        if (j !== index) {  
          videos[j].pause();   
        }  
      }  
    });  
};  
  
const setVideo = () => {  
  const videos = document.getElementsByTagName('video');  
  nextTick(() => {  
    for (let i = 0; i < videos.length; i++) {  
      videos[i].addEventListener('play', () => {  
        pauseAll(i);  
      });  
    }  
  });  
};  
  
  // 在组件挂载后执行 setVideo 函数  
onMounted(setVideo);