解决Video视频列表每次限制播放一个的问题，亲测有效

野性酷女 2022-11-26 12:00 80阅读 0赞

/** 1. @description 检查一次只能播放一个视频 2. @author lzx 3. @since 2020年7月16日10:47:08 */
    function checkPlay(){ 
        var videos = document.getElementsByTagName("video");
        for(var i = 0; i <videos.length; i++ ){ 
            videos[i].addEventListener("playing",function(){ 
                var this1 = this;
                this.play();
                for(var j=0; j<videos.length; j++){ 
                    var this2 = videos[j];
                    if(this1 !== this2){ 
                        this2.pause();
                   };
                };
            });
        };
    }

直接上代码，

1.  首先我们把video标签进行获取，得到一个video标签的数组；
2.  通过for循环处理每一个video标签的视频，通过EventTarget.addEventListener() 方法将指定的监听器注册到 EventTarget 上，当该对象触发指定的事件时，指定的回调函数就会被执行。
3.  其中this1代表的是你当前点击的video框的播放事件，然后通过play（（开始）当前播放的音频或视频。）；再循环video数组得到每一个video控件，this2指代当前循环的video控件，再判断this1代表的video控件和this2代表的video控件是否是同一个，如果不是同一个，就调用this2代表的video控件的parse方法（（暂停）当前播放的音频或视频）
4.  在视频列表页面初始化的时候出发这个方法就可以了，亲测有效。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwMTc1Mw_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwMTc1Mw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221124/963859fc291f4ddf99faac750f9549b6.png