動画の初期位置と寸法の設定

動画を公開する際に、パブリッシャーが置き換える 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%'.

パブリッシャーまたはサブスクライバーの動画のサイズ変更や位置変更については、次のセクションを参照してください。