多个音视频标签只播放一个音视频

最新推荐文章于 2022-08-11 13:11:14 发布

Smart_coding

最新推荐文章于 2022-08-11 13:11:14 发布

阅读量272

点赞数

分类专栏：前端 html

本文链接：https://blog.youkuaiyun.com/Smart_coding/article/details/109111918

版权

前端同时被 2 个专栏收录

12 篇文章

订阅专栏

html

5 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <audio class="aplay" controls src="http://message.qtonghua.com/sign_sound_verify.php?mid=5923546">"&gt;</audio>
    <audio class="aplay" controls src="http://message.qtonghua.com/sign_sound_verify.php?mid=5923546">"&gt;</audio>
    <audio class="aplay" controls src="http://message.qtonghua.com/sign_sound_verify.php?mid=5923546">"&gt;</audio>
    <audio class="aplay" controls src="http://message.qtonghua.com/sign_sound_verify.php?mid=5923546">"&gt;</audio>
    <audio class="aplay" controls src="http://message.qtonghua.com/sign_sound_verify.php?mid=5923546">"&gt;</audio>
    <audio class="aplay" controls src="http://message.qtonghua.com/sign_sound_verify.php?mid=5923546">"&gt;</audio>
    <audio class="aplay" controls src="http://message.qtonghua.com/sign_sound_verify.php?mid=5923546">"&gt;</audio>
    
</body>
<script>
    window.onload = function(){  
        var audios = document.getElementsByTagName("audio");  
        // 暂停函数  
        function pauseAll() {  
            var self = this;  
            [].forEach.call(audios, function (i) {  
                // 将audios中其他的audio全部暂停  
                i !== self && i.pause();  
            })  
        }  
        // 给play事件绑定暂停函数  
        [].forEach.call(audios, function (i) {  
            i.addEventListener("play", pauseAll.bind(i));  
        })  
    } 
</script>

</html>