我正在尝试构建一个带有两个视频盒的类似 Skype 的界面:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
html, body
{
background-color: #000000;
height: 100%;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
body
{
margin: 0;
padding: 0;
}
#videoContainer
{
position: relative;
max-width: 800px;
}
#bigRemote
{
/* Shrink if necessary */
max-width: 100%;
max-height: 100%;
}
#smallLocal
{
position: absolute;
height: 30%;
width: 30%;
bottom: 0;
right: 0;
}
</style>
</head>
<body>
<div id="videoContainer">
<video id="bigRemote" controls preload="none" poster="http://media.w3.org/2010/05/sintel/poster.png">
<source id="mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4" />
<source id="webm" src="http://media.w3.org/2010/05/sintel/trailer.webm" type="video/webm" />
<source id="ogv" src="http://media.w3.org/2010/05/sintel/trailer.ogv" type="video/ogg" />
<p>Your user agent does not support the HTML5 Video element.</p>
</video>
<video id="smallLocal" controls preload="none" poster="http://media.w3.org/2010/05/sintel/poster.png">
<source id="mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4" />
<source id="webm" src="http://media.w3.org/2010/05/sintel/trailer.webm" type="video/webm" />
<source id="ogv" src="http://media.w3.org/2010/05/sintel/trailer.ogv" type="video/ogg" />
<p>Your user agent does not support the HTML5 Video element.</p>
</video>
</div>
</body>
</html>
大框(bigRemote)代表远程视频流。小方框(smallLocal)代表本地视频流。
我遇到了一个问题:当您垂直缩小结果窗口时，smallLocal 框将远离 bigRemote 的右下角。原因是 smallLocal 绑定(bind)到了 videoContainer 的右下角，而后者并没有像 bigRemote 那样收缩。
我的印象是，在确定容器的布局/大小时，position:absolute 子项会被忽略。 如何让 videoContainer 在 bigRemote 缩小时适应后者？(我相信这样做会间接导致 smallLocal粘在 bigRemote 的右下角。)
- 我希望视频随其容器一起增大/缩小，这样您就无法删除 max-width/height 或在
videoContainer上设置显式大小。 - 我希望视频保持其宽高比，因此使其与
videoContainer的大小匹配也行不通。
最佳答案
假设要求是:
- 保持原始视频比例
- 尽可能保持视频原始尺寸
- 调整视频大小以适合窗口
- 右下角的小视频
- 小视频的宽度始终是大视频的 30%
- 没有滚动条
我发现(至少)适用于 Chrome 26.0、Firefox 19、IE9、IE10 的解决方案:
HTML:
<div class="wrap"><video class="big" controls preload="none" poster="http://media.w3.org/2010/05/sintel/poster.png">
<source src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4" />
<source src="http://media.w3.org/2010/05/sintel/trailer.webm" type="video/webm" />
<source src="http://media.w3.org/2010/05/sintel/trailer.ogv" type="video/ogg" />
<p>Your user agent does not support the HTML5 Video element.</p>
</video><video class="small" controls preload="none" poster="http://media.w3.org/2010/05/sintel/poster.png">
<source src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4" />
<source src="http://media.w3.org/2010/05/sintel/trailer.webm" type="video/webm" />
<source src="http://media.w3.org/2010/05/sintel/trailer.ogv" type="video/ogg" />
</video></div>
CSS:
html, body{
height: 100%;
line-height: 0;
font-size: 0;
}
.wrap{
display: inline;
position: relative;
}
.big{
max-width: 100%;
max-height: 100%;
}
.small{
max-width: 30%;
position: absolute;
right: 0;
bottom: 0;
}
令人惊讶的是 display: inline 是唯一可以在包装器上按预期工作的显示类型。 inline-block 在 Firefox 中不起作用，并且在 Chrome 中存在一些问题。
font-size 和 line-height 设置是为了避免一些内联间距问题。
关于html - 为什么容器大小取决于绝对定位的子项？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15415488/