Spielerereignisse

In diesem Thema lernen Sie die verschiedenen Arten von Ereignissen kennen, die mit Brightcove Player verbunden sind.

Überblick

Der Brightcove Player verfügt über viele Ereignisse, mit denen Sie die Videowiedergabe steuern können. Dieses Thema bietet einen Überblick über die verschiedenen Arten von Ereignissen.

Eine vollständige Liste der Brightcove Player-Ereignisse finden Sie in der Player Methoden / Ereignisse API Referenzdokument. Dieses Dokument spiegelt die Ereignisse wider, die Teil des tatsächlichen Codes sind, aus dem der Player besteht.

Medienereignisse

Das HTML Lebensstandard Das Dokument ist eine hervorragende Informationsquelle zur Entwicklung von HTML und den für Webanwendungen erforderlichen APIs. Dies ist ein "lebendiges" Dokument, das von der Arbeitsgruppe für Web-Hypertext-Anwendungstechnologie (WHATWG), einer wachsenden Gemeinschaft von Menschen, die an der Weiterentwicklung des Webs interessiert sind, auf dem neuesten Stand gehalten wird.

Der Brightcove Player wird über dem HTML-Framework ausgeführt, wodurch Folgendes ausgelöst wird Medienereignisse.

Im Folgenden sind einige Begriffe aufgeführt, die mit Ereignissen in diesem Dokument verknüpft sind:

verstopft

Ein MediaController gilt als blockiert, wenn die Wiedergabe erfolgt ist hielt inne. Ein Medienelement ist blockiert, wenn sein Controller a ist blockierter Mediencontroller.

MediaController

EIN MediaController ist ein Objekt, das die Wiedergabe mehrerer Medienelemente koordiniert.

Medienelement

EIN Medienelement präsentiert dem Benutzer Audiodaten oder Video- und Audiodaten.

sklavisch

Standardmäßig hat jedes Medienelement keine MediaController. Wenn Medienelemente mit a verknüpft sind MediaController sollen sie sein sklavisch an die Steuerung. Der Controller ändert die Wiedergaberate und die Lautstärke jedes der ihm zugeordneten Medienelemente. Wenn eines der Slave-Elemente unerwartet blockiert, stoppt der Controller die anderen Slave-Elemente.

Puffer- und QoS-Ereignisse

Hier ist eine Untergruppe von Ereignissen im Zusammenhang mit Pufferung und Dienstgüte (QoS):

Veranstaltungsname Beschreibung
progress Videodaten puffern (laden)
waiting Momentan auf angeforderte Videodaten warten
stalled Die Pufferung kam zum Stillstand
error Beim Laden des Videos ist ein Fehler aufgetreten
playing Die Wiedergabe wird nach einer Pause oder einer Downloadverzögerung fortgesetzt
ratechange Die Wiedergaberate hat sich geändert (kann manuell oder automatisch sein).

Startereignisse

Es gibt eine Reihe von Ereignissen, die auftreten, wenn der Player initialisiert wird und sich auf die Wiedergabe eines Videos vorbereitet. Sie sind hier in der Reihenfolge aufgeführt, in der sie versendet werden:

  • loadstart: Wird ausgelöst, wenn der Player initialisiert wird und wenn er neu initialisiert wird, wenn ihm eine neue Quelle zum Spielen zugewiesen wird

  • loadedmetadata: Wird gesendet, wenn der Player über Informationen zu anfänglicher Dauer und Dimension verfügt, dh wenn das erste Segment heruntergeladen wird. Für Live-Videos die loadedmetadata Das Ereignis wird erst ausgelöst, wenn der Benutzer auf Wiedergabe klickt. Dies liegt daran, dass Live-Videos erst mit dem Herunterladen von Segmenten beginnen, wenn der Benutzer auf Wiedergabe klickt.
  • loadeddata: Wird gesendet, wenn der Player Daten an der aktuellen Wiedergabeposition heruntergeladen hat

Der folgende CodePen zeigt die Startereignisse, die abgehört und ausgelöst werden. Beachten Sie, dass Sie mit der Maus über den CodePen auf klicken können WIEDERHOLUNG Klicken Sie unten rechts auf die Schaltfläche, um den Ereignisversand erneut anzuzeigen. Wenn Sie mit dem Code experimentieren möchten, klicken Sie auf Auf CODEPEN bearbeiten Link in der Kopfzeile, um zur Bearbeitungsumgebung zu gelangen. Sie können auf die klicken JS Klicken Sie auf die Schaltfläche, um das JavaScript anzuzeigen, mit dem die Ereignis-Listener hinzugefügt werden.

Siehe den Stift Demo zu Startereignissen von Brightcove Learning Services (@bcls ) auf CodePen.

ready () -Methode

Das ready() Methode hat eine doppelte Persönlichkeit, da sie wie ein Ereignis erscheint, aber Sie verwenden sie wie eine Methode. Diese Methode / dieses Ereignis bedeutet, dass der Spieler bereit ist, Befehle zu empfangen.

Das ready() Methode unterscheidet sich von Ereignis-Listenern darin, dass die ready Ereignis ist bereits passiert, es wird das auslösen ready() Methode sofort. Sie werden häufig die folgende Methode sehen, um den Ausgangspunkt für die Entwicklung mit Brightcove Player bereitzustellen:

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

ready () vs. on ('geladene Metadaten', ...)

Beachten Sie, dass mit ready() funktioniert korrekt, wenn Sie mit dem Player interagieren möchten, z. B. programmgesteuert ein Plugin hinzufügen. Wenn Sie sofort mit dem Video interagieren möchten, verwenden Sie es beispielsweise play() Das obige Code-Snippet funktioniert nicht immer richtig. Ein besserer Ansatz wäre es, auf das zu hören loadedmetadata um mit dem Video zu interagieren, zum Beispiel:

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

Zusammenfassend können Sie Folgendes verwenden, um mit dem Player zu interagieren:

videojs.getPlayer('myPlayerID').ready()

Wenn Sie sofort mit dem Video im Player interagieren möchten, verwenden Sie Folgendes:

videojs.getPlayer('myPlayerID').on('loadedmetadata',function(){})

Vollbildereignisse

EIN fullscreenchange Das Ereignis wird vom Player ausgegeben, wenn es in den Vollbildmodus oder aus dem Vollbildmodus umgeschaltet wird. Das gleiche Ereignis wird gesendet, unabhängig davon, ob der Player in den Vollbildmodus wechselt oder in den normalen Modus zurückkehrt. Wenn es wichtig ist, dass Sie wissen, was passiert ist, verwenden Sie die player.isFullscreen() Methode, um festzustellen, ob sich der Player derzeit im Vollbildmodus befindet.

Der folgende Codepen zeigt, wie das geht.

Siehe den Stift Brightcove Player-Vollbildereignisse von Brightcove Learning Services (@bcls ) auf CodePen.

Werbe-Events

Um Ihrem Player Werbebibliotheken und Funktionen hinzuzufügen, können Sie die verwenden IMA3 Plugin oder der FreeWheel Plugin. Dies ist auf dem aufgebaut VideoJs Anzeigen Framework (Videojs-Contrib-Anzeigen). Beide Werbe-Plugins können die in der folgenden Tabelle gezeigten Anzeigenereignisse auslösen. Jedes hat auch spezifische Ereignisse, die für die Implementierung spezifisch sind.

Ereignis Wird versandt wenn:
ads-anfrage Auf Anfrage Anzeigendaten.
ads-load Wenn Anzeigendaten nach einer Anzeigenanforderung verfügbar sind.
ads-ad-startete Eine Anzeige hat angefangen zu spielen.
werbeendeten Eine Anzeige ist beendet.
ads-pausieren Eine Anzeige wird angehalten.
ads-play Eine Anzeige wird aus einer Pause wieder aufgenommen.
ads-erstes Quartil Die Anzeige hat 25% ihrer Gesamtdauer gespielt.
ads-mittelpunkt Die Anzeige hat 50% ihrer Gesamtdauer gespielt.
ads-dritt-Quartil Die Anzeige hat 75% ihrer Gesamtdauer gespielt.
ads-click Ein Zuschauer klickte auf die abspielende Anzeige.
ads-volumechange Die Lautstärke der wiedergespielten Anzeige wurde geändert.
ads-pod-startete Die erste Anzeige in einem linearen Ad-Pod (einer sequenzierten Gruppe von Anzeigen) wurde gestartet.
ads-pod-endend Die letzte Anzeige in einem linearen Ad-Pod (einer sequenzierten Gruppe von Anzeigen) ist abgeschlossen.
ads-allpods-abgeschlossen Alle linearen Anzeigen sind beendet.

bc-catalog-error event

Es ist möglich, dass die Handhabung von Fehlern im normalen ready() Abschnitt im Skriptblock Probleme verursachen kann. Zum Beispiel kann es vorkommen, dass das bc-catalog-error Ereignis ausgelöst werden könnte, bevor der Spieler bereit ist, und wenn Sie auf den Fehler im ready() Abschnitt hören, Sie können den Fehler nicht behandeln. Dieses Problem kann auftreten, wenn die Geo-Filterung verwendet wird, ein Video nicht veröffentlicht wird, ein Video außerhalb des Zeitplanungsbereichs liegt oder in einem anderen Konto. Für eine vollständige Diskussion und Beispiele zur Handhabung der bc-catalog-error Veranstaltung, siehe die Spielerkatalog Dokument.

Fortschritt und Zeitaktualisierung

Es kann zu Verwirrung über die Unterschiede zwischen den beiden kommen progress und timeupdate Veranstaltungen. Der Brightcove Player baut auf HTML5-Videos auf, und in diesem Standard ist der progress Ereignis wird ausgelöst, wenn der Browser Daten herunterlädt. Das timeupdate Ereignis wird ausgelöst, wenn sich die aktuelle Wiedergabeposition geändert hat.

Dies kann für Benutzer von Brightcoves Smart Player verwirrend sein, wie in dieser API progress Veranstaltung macht was timeupdate funktioniert in der Brightcove Player-API.

Vorsicht beim Entfernen von Timeupdate-Listenern

In einigen Fällen möchten Sie möglicherweise einen Ereignis-Listener entfernen, den Sie dem hinzugefügt haben timeupdate Veranstaltung. Ein Anwendungsfall ist in der Beispiel für einen Brightcove-Player: Registrieren, um nach der Vorschau zu spielen Dokument. In dieser Situation möchten Sie, dass der Player in einem bestimmten Zeitraum pausiert und Sie verwenden timeupdate Verwenden Sie zur Zeitprüfung eine anonyme Definition der Ereignishandlerfunktion. Sie möchten nur einmal pausieren, daher müssen Sie den Ereignis-Listener entfernen. Sie möchten NICHT einfach tun:

myPlayer.off('timeupdate');

Dies entfernt natürlich ALLE Ereignis-Listener timeupdate Dies verhindert unter anderem, dass der Zeitwäscher voranschreitet. Was getan werden muss, ist, eine Funktion unter Verwendung der normalen Funktionsdefinitionssyntax (einer Funktionsdeklaration) zu erstellen und dann NUR den einen Ereignis-Listener zu entfernen. Der abgekürzte Code wird hier angezeigt:

 // Add the event handler
myPlayer.on('timeupdate', timeupdateHandler);

// Handle the event then remove JUST this event listener on timeupdate
function timeupdateHandler(evt) {
  ...
  myPlayer.off('timeupdate', timeupdateHandler);
}

Analytics-Ereignisse

Jedes Mal, wenn ein Beacon an den Analytics-Datenkollektor gesendet wird, wird ein Ereignis ausgelöst. Sie können auf jedes oder bestimmte Leuchtfeuer achten.

Hören Sie auf alle Leuchtfeuer

Sie können alle gesendeten Analyse-Beacons verfolgen, indem Sie auf das warten analytics-beacon Veranstaltung:

player.on('analytics-beacon', function(e) {
  videojs.log('sent a(n) ' + e.params.event + ' beacon!', e.params);
});

Achten Sie auf bestimmte Leuchtfeuer

Sie können bestimmte Analyse-Beacons verfolgen, die gesendet werden, indem Sie auf das warten analytics-beacon-{beacon_name} Veranstaltung.

{beacon_name} is the name of any of the player events that are sent to the data collector. Eine vollständige Liste dieser Ereignisse finden Sie in der Datenerfassungs-API-Referenz.

Beispiel

player.on('analytics-beacon-video-impression', function(e) {
  videojs.log('sent an impression beacon!', e.params);
});

Keine Unterstützung für Methodenverkettung

Ab Version 6 der Brightcove Player-Methode wird die Verkettung mit Ereignissen nicht mehr unterstützt. Dies bedeutet, dass Sie dies NICHT tun können:

player.on(event, function () {})
.on(event, function () {})
.on(event, function () {})
.on(event, function () {});