Überblick: Spieler-API

Mit der Brightcove Player-API können Sie über JavaScript mit dem Video interagieren, unabhängig davon, ob der Browser das Video über HTML5-Video, Flash oder andere unterstützte Wiedergabetechnologien wiedergibt.

Referenzieren des Players

Um die API-Funktionen nutzen zu können, benötigen Sie Zugriff auf das Player-Objekt. Das ist einfach zu machen. Sie müssen nur sicherstellen, dass Ihr Video-Tag eine ID hat. Der Beispiel-Einbettungscode hat die ID myPlayerID , und das Spielerobjekt wird in der gehalten myPlayer Variable. Wenn Sie mehrere Videos auf einer Seite haben, stellen Sie sicher, dass jedes Video-Tag eine eindeutige ID hat.

var myPlayer = videojs.getPlayer('myPlayerID');

Spielerbereite Methode

Die Zeit, die Video.js zum Einrichten des Videos und der API benötigt, hängt von mehreren Faktoren ab, z. B. der Verbindungsgeschwindigkeit. Aus diesem Grund möchten wir die des Spielers verwenden ready() Methode zum Auslösen von Code, für den die API des Players erforderlich ist.

videojs.getPlayer('myPlayerID').ready(function() {
  var myPlayer = this;

  // EXAMPLE: Handle an event
  myPlayer.on('loadstart',doLoadstart);

});

Player bereit vs. Video im Player bereit

Nach dem, was in diesem Dokument beschrieben wurde, könnte dies eine sichere Verwendung der API sein:

videojs.getPlayer('myPlayerID').ready(function() {
  var myPlayer = this;
  // Play the video in the player
  myPlayer.play()
});

Das Problem, dass nur weil der Player für die Interaktion bereit ist, NICHT garantiert, dass das Video im Player geladen und bereit ist, in diesem Beispiel abgespielt zu werden. Aus diesem Grund müssen Sie die verwenden loadedmetadata Ereignis, das garantiert, dass das Video abspielbereit ist. Der Code würde wie folgt aussehen:

videojs.getPlayer('myPlayerID').ready(function() {
  var myPlayer = this;
  // Play the video in the player
  myPlayer.on('loadedmetadata',function(){
    myPlayer.play();
  })
});

Wenn Sie die anrufen play() Die Methode ist die einzige Aufgabe, die in der Funktion ausgeführt werden muss, und Sie werden nicht auf andere Weise mit dem Player interagieren. Dieser Code könnte zu diesem Zweck vereinfacht werden (es ist nicht erforderlich, die zu verwenden ready() Methode):

videojs.getPlayer('myPlayerID').on('loadedmetadata',function(){
  var myPlayer = this;
  myPlayer.play();
});

API-Methoden

Jetzt, da Sie Zugriff auf einen bereitgestellten Player haben, können Sie das Video steuern, Werte abrufen oder auf Videoereignisse reagieren. Die API.js-Funktionsnamen von Video.js folgen den HTML5-Medien-API. Der Hauptunterschied besteht darin, dass Getter / Setter-Funktionen für Videoeigenschaften verwendet werden.

// setting a property on a bare HTML5 video element
myVideoElement.currentTime = "120";

// setting a property on a Video.js player
myPlayer.currentTime(120);

Die vollständige Liste der Player-API-Methoden und -Ereignisse finden Sie in der Player-API-Dokumente.