動画の初期位置と寸法の設定
動画を公開する際に、パブリッシャーが置き換える DOM 要素 (またはその ID) を指定できます。また、パブリッシャーの最初の幅と高さを指定することもできます:
// Replace the first parameter with ID of the target DOM element:
var publisher = OT.initPublisher('myPublisherElementId',
{width:400, height:300});
session.publish(publisher);
を設定することもできます。 insertMode に渡すオプションの OT.initPublisher() メソッドを 'append' に変更すると、パブリッシャーが指定した DOM 要素 (コンテナ) の子要素として追加されます:
var publisherOptions = {
insertMode: 'append',
width: 400,
height: 300
};
var publisher = OT.initPublisher('publisherContainerElementId', publisherOptions);
session.publish(publisher)
同様に、ストリームを購読するとき、ターゲット DOM 要素(またはその ID)を指定できます。また、サブスクライバの最初の幅と高さを指定することもできます:
var options = {width: 400, height: 300, insertMode: 'append'}
var subscriber = session.subscribe(stream, 'containerElementId', options);
また、親DOM要素のサイズに対するパーセンテージで幅と高さの初期値を指定することもできます:
var publisherOptions = {
insertMode: 'append',
width: '100%',
height: '100%'
};
var publisher = OT.initPublisher(publisherContainerElement, publisherOptions);
session.publish(publisher);
置換要素IDを指定しない(またはNULLに設定する)と、アプリケーションはHTML本文に新しいDOM要素を追加します。デフォルトの幅は264ピクセル、デフォルトの高さは198ピクセルです。
複数のCSSルールを適用したい場合は、親(コンテナ)DOM要素に適用する:
<style>
#publisherContainer.large
{ width: 640px; height: 480px; }
#publisherContainer.small
{ width:100px; height: 100px; }
</style>
<div id="publisherContainer"></div>
<script>
var publisher = OT.initPublisher('publisherContainer',
{width: '100%', height: '100%', insertMode: 'append'}
</script>
モバイル機器で動画に異なるサイズを適用するには、CSS メディアクエリを使用します:
<style>
#publisherContainer
{ width: 100px; height: 100px; }
@media screen and (max-width: 650px) {
#publisherContainer
{ width: 89px; height: 50px; }
}
</style>
<div id="publisherContainer"></div>
<script>
var publisher = OT.initPublisher('publisherContainer',
{width: '100%', height: '100%', insertMode: 'append'}
</script>
動画のサイズを動的に変更したい場合は、以下のように設定します。 insertMode への 'append' を設定する。 height そして width への '100%'.
パブリッシャーまたはサブスクライバーの動画のサイズ変更や位置変更については、次のセクションを参照してください。