我正在尝试构建一个带有两个视频盒的类似 Skype 的界面：
http://jsfiddle.net/q9ER2/20/ http://jsfiddle.net/q9ER2/20/
<!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绑定到右下角videoContainer后者并没有缩小bigRemote does.
我的印象是position: absolute在确定容器的布局/大小时，子项将被忽略。我该如何制作videoContainer适合周围bigRemote当后者缩小时？（我相信这样做会间接导致smallLocal粘在右下角bigRemote.)
- 我希望视频随其容器一起增大/缩小，这样您就无法删除最大宽度/高度或设置显式尺寸
videoContainer.
- 我希望视频保持其宽高比，因此使其与
videoContainer也不会做。
jsFiddledemo http://jsfiddle.net/J2qYe/show (edit) http://jsfiddle.net/J2qYe
假设要求 are:
- 保持原始视频比例
- 尽可能保持视频原始大小
- 调整视频大小以适合窗口
- 右下角小视频
- 小视频的宽度始终是大视频的 30%
- 无滚动条
The solution我发现（至少）适用于 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 and line-height设置为避免一些inline间距问题。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
