Definindo a posição inicial e as dimensões de um vídeo

Ao publicar um vídeo, você pode especificar o elemento DOM (ou seu ID) que o publisher substituirá. Você também pode especificar a largura e a altura iniciais do publisher:


// Replace the first parameter with ID of the target DOM element:
var publisher = OT.initPublisher('myPublisherElementId',
                                 {width:400, height:300});
session.publish(publisher);

Você também pode definir o insertMode propriedade das opções que você passa para o OT.initPublisher() método “append” para que o publisher seja anexado como um elemento filho do elemento DOM (contêiner) que você especificar:

var publisherOptions = {
  insertMode: 'append',
  width: 400,
  height: 300
};
var publisher = OT.initPublisher('publisherContainerElementId', publisherOptions);
session.publish(publisher)

Da mesma forma, ao assinar um fluxo, você pode especificar o elemento DOM de destino (ou seu ID). Também é possível especificar a largura e a altura iniciais do assinante:

var options = {width: 400, height: 300, insertMode: 'append'}
var subscriber = session.subscribe(stream, 'containerElementId', options);

Você também pode especificar a largura e a altura iniciais como uma porcentagem do tamanho do elemento DOM pai:

var publisherOptions = {
  insertMode: 'append',
  width: '100%',
  height: '100%'
};
var publisher = OT.initPublisher(publisherContainerElement, publisherOptions);
session.publish(publisher);

Se você não especificar um ID para o elemento a ser substituído (ou defini-lo como nulo), o aplicativo acrescenta um novo elemento DOM ao corpo do HTML. A largura padrão é de 264 pixels, e a altura padrão é de 198 pixels.

Se você quiser aplicar várias regras CSS, aplique-as ao elemento DOM pai (contêiner):

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

Para aplicar um tamanho diferente a um vídeo em um dispositivo móvel, use consultas de mídia 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>

Se você quiser redimensionar o vídeo dinamicamente, defina o insertMode para 'append' e definir o height e width para '100%'.

Consulte a próxima seção para obter informações sobre como redimensionar ou reposicionar um vídeo de editor ou assinante.