Einstellen der Anfangsposition und der Abmessungen eines Videos

Wenn Sie ein Video veröffentlichen, können Sie das DOM-Element (oder seine ID) angeben, das durch den Publisher ersetzt wird. Sie können auch die anfängliche Breite und Höhe des Publishers angeben:

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

Sie können auch die insertMode Eigenschaft der Optionen, die Sie in der OT.initPublisher() Methode auf "append", damit der Verlag als Kind des von Ihnen angegebenen DOM-Elements (Container) angehängt wird:

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

Wenn Sie einen Stream abonnieren, können Sie das Ziel-DOM-Element (oder seine ID) angeben. Sie können auch die anfängliche Breite und Höhe des Abonnenten angeben:

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

Sie können auch die anfängliche Breite und Höhe als Prozentsatz der Größe des übergeordneten DOM-Elements angeben:

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

Wenn Sie keine ID für das zu ersetzende Element angeben (oder sie auf null setzen), fügt die Anwendung ein neues DOM-Element an den HTML-Body an. Die Standardbreite ist 264 Pixel und die Standardhöhe ist 198 Pixel.

Wenn Sie mehrere CSS-Regeln anwenden möchten, wenden Sie sie auf das übergeordnete DOM-Element (Container) an:

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

Um einem Video auf einem mobilen Gerät eine andere Größe zuzuweisen, verwenden Sie CSS-Medienabfragen:

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

Wenn Sie die Größe des Videos dynamisch ändern möchten, setzen Sie den insertMode zu 'append' und setzen Sie die height und width zu '100%'.

Im nächsten Abschnitt finden Sie Informationen zur Größenänderung oder Neupositionierung eines Herausgeber- oder Abonnentenvideos.