Question

我正在尝试使用两个视频框构建类似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绑定到videoContainer的右下角，而后者不会缩小为bigRemote。

我认为在确定容器的布局/大小时会忽略position: absolute个孩子。 如果后者缩小，我如何让videoContainer适应bigRemote？（我相信这样做会间接导致smallLocal坚持到{}}的右下角bigRemote。）

我希望视频能够使用其容器增长/缩小，因此您无法移除最大宽度/高度或在videoContainer上设置显式大小。
我希望视频能够保持其宽高比，因此让它与videoContainer的大小相匹配也不会。

Answer 1

jsFiddle demo (edit)

假设要求是：

保留原始视频比例
尽可能将视频保持原始大小
调整视频大小以适应窗口
右下角的小视频
小视频总是宽大的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设置为避免一些inline间距问题。

Answer 2

我删除了max和min width / height属性，并将视频容器设置为阻止。不确定这是否正是您所需要的，但它看起来很接近：

http://jsfiddle.net/q9ER2/5/

html, body
{
    background-color:lime;
    height: 100%;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

body
{
    margin: 0;
    padding: 0;
}

#container
{
    background-color: red;
    position: relative;
    height: 100%;
    width: 100%;
    margin: 0 auto;
}

#bigRemote
{
}

#videoContainer
{
    position: relative;
}

#bigRemoteVideo
{
    /* Shrink if necessary */
    display:block;
    width: 100%;
}
#smallLocalVideo
{
    display:block;
    position: absolute;
    height: 30%;
    width: 30%;
    bottom: 0;
    right: 0;
}

为什么容器大小取决于绝对定位的孩子？

2 个答案: