HTML 实现同时播放多个视频

作者: 果子火火 | 来源:发表于2020-06-17 18:51 被阅读0次

HTML 实现同时播放多个视频
HTML多个视频的排版问题
iOS视频播放：预览播放视频前面N秒的设计
微信小程序多个视频组件同时播放
示例：使用H5的video标签播放视频，拍照保存和上传
swiper 实现带video的banner
收录
iOS编译FFmpeg、kxmovie实现视频播放
FFmpeg编译-转载
分享一下视频过渡效果演示

将视频的文件路径更换，能够使用按钮控制三个视频的同时播放/停止。
代码如下：

<!DOCTYPE html>
<html>
<meta charset= "utf8">
<title>系统</title>
<body>
<div style="text-align:center;">
    <button onclick= "play_Pause();">播放/暂停</button>
    <br />
    <video id="video1" width="620" style= "margin-top:15px;">
        <source src="file:///C:/Users/Desktop/xinhuashudian.mp4" type="video/mp4" />
    </video>
    <video id="video2" width="320" style= "margin-top:15px;">
        <source src="file:///C:/Users/Desktop/men_mask_rcnn_out_py.mp4" type="video/mp4" />
    </video>
    <video id="video3" width="320" style= "margin-top:15px;">
        <source src="file:///C:/Users/Desktop/xinhuashudian.mp4" type="video/mp4" />
    </video>
</div>
<script type="text/javascript">
    var myVideo=document.getElementById ("video1");
    var myVideo2=document.getElementById ("video2");
    var myVideo3=document.getElementById ("video3");
    function play_Pause() {
        if (myVideo.paused){
            myVideo.play();
            myVideo2.play();
            myVideo3.play();
        }
        else{
            myVideo.pause();
            myVideo2.pause();
            myVideo3.pause();
        }
    }
</script>
</body>
</html>

网页效果如下图所示：

image.png