H5标签video如何在手机浏览器上同时播放多个视频？

发布于
2018-04-14

更新于
2018-04-14

新手上路，请多包涵

h5标签video，如果在手机上想同时播放多个，上一个视频都会暂停。这个是浏览器的限制吗？有没有可以解决的办法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    button{height:50px;width:200px;}
    video{height:300px;margin:50px;display: block;}
</style>
<body>
<video src="http://www.product.cnsino.net/Public/images/movie1.mp4" controls ></video>
<video src="http://www.product.cnsino.net/Public/images/movie2.mp4" controls ></video>
<video src="http://www.product.cnsino.net/Public/images/movie3.mp4" controls ></video>
<button id="play" type="button">开始播放</button>
</body>
<script>
    var aVideo=document.getElementsByTagName('video');
    var play_btn=document.getElementById('play');
    play_btn.onclick=function () {
        for(var n=0;n<aVideo.length;n++){
            aVideo[n].play();
        }
    }

</script>
</html>

视频

html5