HTML多个视频的排版问题

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

HTML多个视频的排版问题
移动排版巨好用的：better-scroll
HTML 实现同时播放多个视频
MarkDown是兼容Html的
HTML视频
HTML 视频
移动动画的封装之终极封装：解决多个元素会互相影响的问题
HTML 学习笔记
griffith - 多个视频画中画问题
swiper 实现带video的banner

使用HTML同时播放多个视频，需要将视频进行排版，使得界面美观。
代码如下：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>路口行人车辆监测系统</title>
    </head>
    <style>
    body{
        background: #000;
        margin:0;
    }
    .box{
        width:1300px;
        margin:0 auto;
        position:relative;
    }
    .box .left{
        width:340px;
        height:620px;
        background-color:#000;
        position:absolute;
       
    }
    .box .center{
        height:620px;
        background-color:#000;
        margin:0 320px 0 320px;
    }
    .box .right{
        width:340px;
        height:620px;
        background-color:#000;
        position:absolute;
        right:0;
        top:0;

    }
    </style>
    <body>
    <div>
        <h3 align="center"><font color="white">路口行人车辆监测系统</h3>
    </div>        
        <div class="box">
            <div class="left">
                <video id="video2" width="320" style= "margin-top:140px; margin-right:20px;">
                    <source src="file:///C:/Users/Desktop/men_mask_rcnn_out_py.mp4" type="video/mp4" />
                </video>                
            </div>
            <div class="center">
                <video id="video1" width="620" style= "margin-top:15px;">
                    <source src="file:///C:/Users/Desktop/xinhuashudian.mp4" type="video/mp4" />
                </video>
            </div>
            <div class="right">
                <video id="video3" width="320" style= "margin-top:140px; margin-right:20px;">
                    <source src="file:///C:/Users/Desktop/xinhuashudian.mp4" type="video/mp4" />
                </video>
            </div>
        </div> 
        <center><button onclick= "play_Pause();" style= "margin-top:10px;">播放/暂停</button></center>

    </body>
<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>
</html>

运行效果如下所示：

image.png