我想为 HTML5 视频播放器创建自己的用户界面。但是我无法正确迈出第一步。我想在默认的 HTML5 视频播放器控件所在的位置放置一个 div。我不知道如何将 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>最佳答案
child 应该有 position: absolute 相对于 parent 。
Ps: 你应该使用类来做样式。
#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>关于javascript - 如何将一个 div 定位为 HTML5 视频播放器底部的一个 block ？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51206431/