JavaScript多个h5播放器video，点击一个播放其他暂停

Posted 前端HL

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript多个h5播放器video，点击一个播放其他暂停相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多个H5播放器video 如何播放暂停</title>
</head>
<body>

    <video src="http://img.tianxiang.com/d/2018/06/5b1a45f89f96b.mp4" controls="controls"></video>
    <video src="http://vodfile12.news.cn/data/cdn_transfer/1F/FE/1f74d72eedda3dc922b3487f49619c4730b4fbfe.mp4" controls="controls"></video>

    <script type="text/javascript">
        var videos = document.getElementsByTagName(‘video‘);
            for (var i = videos.length - 1; i >= 0; i--) {
                (function(){
                    var p = i;
                    videos[p].addEventListener(‘play‘,function(){
                        pauseAll(p);
                    })
                })()
            }
            function pauseAll(index){
                for (var j = videos.length - 1; j >= 0; j--) {
                    if (j!=index) videos[j].pause();
                }
            };
    </script>
    
</body>
</html>

 

以上是关于JavaScript多个h5播放器video，点击一个播放其他暂停的主要内容，如果未能解决你的问题，请参考以下文章

uniapp微信小程序跳转H5后video自动播放

解决h5的video标签，androidipad客户端播放正常，iphone客户端无法播放

h5 video 点击自动全屏

微信中H5同层Video播放器接入教程

H5：设置video自动播放

H5：设置video自动播放