2

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。)

  • ビデオをコンテナに合わせて拡大/縮小したいので、最大幅/高さを削除したり、明示的なサイズを設定したりできませんvideoContainer。
  • ビデオの縦横比を維持したいので、サイズを一致さvideoContainerせてもうまくいきません。
4

2 に答える 2

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 に答える