gpt4 book ai didi

javascript - 如何将一个 div 定位为 HTML5 视频播放器底部的一个 block ?

转载 作者:太空宇宙 更新时间:2023-11-04 07:10:49 24 4
gpt4 key购买 nike

我想为 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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com