2

我正在尝试使用两个视频框构建类似 Skype 的界面：

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。

我的印象position: absolute是在确定容器的布局/大小时会忽略孩子。当后者缩小时，我该如何videoContainer适应？bigRemote（我相信这样做会间接导致smallLocal粘在.的右下角bigRemote。）

  • 我希望视频随其容器增大/缩小，因此您无法删除 max-width/height 或在videoContainer.
  • 我希望视频保持其纵横比，所以让它的大小匹配videoContainer也不行。
4

2 回答 2

2

jsFiddle演示 （编辑）

假设要求是：

  • 保持原始视频比例
  • 尽可能保持视频原始大小
  • 调整视频大小以适合窗口
  • 右下角的小视频
  • 小视频总是大视频宽度的 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间距问题。

于 2013-04-03T21:33:20.080 回答
0

我删除了最大和最小宽度/高度属性并将视频容器设置为阻止。不确定这是否正是您所需要的，但看起来很接近：

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;
}
于 2013-03-14T17:22:05.860 回答