解决多video同时播放问题 使其多video一个一个播放 getElementsByTagName选取对象集合问题

问题

今天有个处理页面要解决多video同时播放问题 使其多video一个一个播放 这个问题

解决办法：

这没有什么说的 逻辑就是监听当前播放视频的video然后让其他的video暂停 就ok!

主要说下在监听多个video的时候出现的各种坑

1. 首先我们使用 getElementsByTagName 选取我们这个页面所有的video
2. 出现了获取到了元素 但是却拿不到 （length） console.log(videoobjs); console.log(videoobjs.length); 如下图
   
3. 这个呢是因为生命周周期问题 （以vue为例） 我们把调用的方法写到 updated() 中即可
4. 然后在处理暂停和监听的时候出现循环有问题（这里我就不举例了）
5. 解决办法： 暂停使用video对象的时候 要从最后一个下标往前使用

代码

     var videoobjs = document.getElementsByTagName('video');
        for (var i = videoobjs.length - 1; i >= 0; i--) {
          let p = i;
          videoobjs[i].addEventListener('play', function() {
            pauseAll(p);
          })
        }
        function pauseAll(i){
          for (var j = videoobjs.length - 1; j >= 0; j--) {
            if (j != i) videoobjs[j].pause();
          }
        }