页面中视频，音频资源同时存在甚至多个时，禁止同时播放的处理

卡卡西不卡

于 2023-09-18 14:46:29 发布

阅读量371

点赞数

文章标签：音视频 javascript 前端

本文链接：https://blog.youkuaiyun.com/hahaha113461/article/details/132978057

版权

该篇文章介绍了如何使用JavaScript实现页面中视频和音频资源的控制，确保同一时刻只有一个资源可以播放，其他资源会被暂停。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

页面中视频，音频资源同时存在甚至多个时，禁止同时播放的处理

ensureOnlyMedia(){
        /*控制同一页面只有一个音频或视频在播放*/
        var videoList = document.getElementsByTagName("video");
        var audioList = document.getElementsByTagName("audio");
        for (let i = 0; i < videoList.length; i++) {
            let video = videoList[i];
            video.addEventListener('play', function (e) {
                for (let j = 0; j < videoList.length; j++) {
                    if (j !== i) videoList[j].pause();
                }
                for (let j = 0; j < audioList.length; j++) {
                    audioList[j].pause();
                }
            })
        }
        for (let i = 0; i < audioList.length; i++) {
            let audio = audioList[i];
            audio.addEventListener('play', function (e) {
                for (let j = 0; j < audioList.length; j++) {
                    if (j !== i) audioList[j].pause();
                }
                for (let j = 0; j < videoList.length; j++) {
                    videoList[j].pause();
                }
            })
        }
      },