0

https://apprtc.appspot.com/に基づいてビデオ チャット アプリケーションを作成しています(このアプリケーションを実行するには、同じ URL を 2 つの別々のタブで開く必要があります)。

このリファレンス アプリケーションに 2 つの変更を加えたいと思います。

  1. ビデオをブラウザ ウィンドウの中央に配置します。
  2. 小さなビデオを大きなビデオの右下隅に合わせます (Skype と同様)。

http://css-tricks.com/centering-in-the-unknown/を使用して＃1を解決できましたが、＃2を理解できません。問題は、大きなビデオ サイズが動的であることです (WebRTC は、CPU と帯域幅の条件に応じて時間の経過とともにサイズが変化します)。また、ブラウザー ウィンドウのサイズが変更されると (表示に合わせて) 拡大/縮小します。大きいビデオのサイズが変わると、小さいビデオの位置がずれます。

大きなビデオのサイズが時間の経過とともに変化する場合、小さなビデオを大きなビデオの右下隅に揃えるにはどうすればよいですか?

更新:ボックスだけでなく、ビデオが重なっているソリューションを提供してください。また、ブラウザ ウィンドウの拡大/縮小に合わせて、動画も拡大/縮小するようにしてください。

4

1 に答える 1

2

CSS ポジショニングを使用できます。

HTML

<div id="container">
    <div id="big_video">
        test
         <div id="small_video">test2</div>
    </div>

</div>

CSS

#big_video{
    border: 1px solid black;
    width: 500px;
    height: 500px;
    position: relative;
}

#small_video{
    border: 1px solid black;
    width: 200px;
    height: 200px;
    position: absolute;
    bottom: 0;
    right: 0;
}

フィドル: http://jsfiddle.net/FhtCP/12/

于 2013-03-07T18:33:16.587 に答える