Establecer la posición inicial y las dimensiones de un vídeo

Al publicar un vídeo, puede especificar el elemento DOM (o su ID) que sustituirá el editor. También puede especificar la anchura y la altura iniciales del editor:


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

También puede ajustar el insertMode de las opciones que introduzca en el campo OT.initPublisher() a 'append' para que el editor se añada como hijo del elemento DOM (contenedor) que especifique:

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

Del mismo modo, cuando se suscribe a un flujo, puede especificar el elemento DOM de destino (o su ID). También puede especificar la anchura y la altura iniciales del suscriptor:

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

También puede especificar la anchura y la altura iniciales como porcentaje del tamaño del elemento DOM padre:

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

Si no especifica un ID de elemento de reemplazo (o lo establece como nulo), la aplicación añade un nuevo elemento DOM al cuerpo HTML. La anchura predeterminada es de 264 píxeles y la altura predeterminada es de 198 píxeles.

Si desea aplicar varias reglas CSS, aplíquelas al elemento DOM padre (contenedor):

<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 un tamaño diferente a un vídeo en un dispositivo móvil, utilice CSS media queries:

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

Si desea redimensionar dinámicamente el vídeo, defina la opción insertMode a 'append' y establecer el height y width a '100%'.

Consulte la siguiente sección para obtener información sobre cómo cambiar el tamaño o la posición de un vídeo de editor o de abonado.