我想为HTML5视频播放器创建自己的UI。但是我不能正确地迈出第一步。我想将div放置在默认HTML5 Video Player控件所在的位置。我不知道如何将controls
div放置在此处。请帮助我。
我的代码:
#video_player {
width: 100%;
height: 50%;
}
#controls {
width: 100%;
height: 35px;
position: relative;
z-index: 100px;
background-color: #55b2ff;
}
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="video_player_box">
<video video-player id="video_player" src="http://dash.akamaized.net/akamai/bbb/bbb_1280x720_60fps_6000k.mp4" controls></video>
<div id="controls"></div>
</div>
</body>
</html>
答案 0 :(得分:1)
孩子应该相对于父母有position: absolute
。
#video_player {
width: 100%;
height: 50%;
}
#controls {
width: 100%;
height: 10px;
position:absolute;
bottom: 0;
z-index: 100px;
background-color:#55b2ff;
}
.video_player_container {
position: relative;
}
<html>
<head>
<meta charset="utf-8"/>
<title></title>
</head>
<body>
<div class="video_player_container">
<video video-player id="video_player" src="http://dash.akamaized.net/akamai/bbb/bbb_1280x720_60fps_6000k.mp4" controls></video>
<div id="controls"></div>
</div>
</body>
</html>