m0_60945429 2022-03-07 19:42 采纳率: 87%
浏览 62
已结题

html视频排版123

HTML的video视频如何排版，老是两个视频重叠一块。
最好代码段一些
谢谢

  • 写回答

1条回答 默认 最新

  • 爱音斯坦牛 全栈领域优质创作者 2022-03-07 19:48
    关注
    
<!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>

    img

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

问题事件

  • 系统已结题 3月15日
  • 已采纳回答 3月7日
  • 创建了问题 3月7日