HTML多个视频的排版问题
2020-06-17 本文已影响0人
果子火火
使用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
