Beispiel für Brightcove Spieler: Rückspulen mit einem benutzerdefinierten Ereignis auslösen

Überblick

Obwohl der Brightcove Player eine Reihe von sofort einsatzbereiten Ereignissen bereitstellt, möchten Sie möglicherweise Ihre eigenen benutzerdefinierten Ereignisse verwenden, um Abhängigkeiten zwischen DOM-Objekten und Ereignis-Listener zu entkoppeln und zu beseitigen. Dieses ereignisgesteuerte Modell ist eine architektonische Wahl, die Sie möglicherweise in Betracht ziehen möchten.

In diesem Beispiel wird der Steuerleiste eine Zurück-Schaltfläche hinzugefügt. Wenn der Benutzer auf die Zurück-Schaltfläche klickt, wird ein benutzerdefiniertes Ereignis zusammen mit der Zeit zum Zurückspulen ausgelöst. Der benutzerdefinierte Ereignis-Listener findet die aktuelle Videoposition und spult das Video zurück.

Beispiel eines Spielers

Starten Sie die Videowiedergabe. Klicken Sie dann auf den Zurück-Button:

Sie sollten sehen, dass die Videowiedergabe 5 Sekunden zurückgeht.

Siehe das Pen 18150-Trigger-rewind-custom-event von Brightcove Learning Services (@bcls1969) auf CodePen.

Quellcode

Sehen Sie sich die Komplettlösung auf GitHub an.

Verwendete API/Plugin-Ressourcen

Player-/HTML-Konfiguration

Dieser Abschnitt beschreibt jede spezielle Konfiguration, die während der Spielererstellung erforderlich ist. Darüber hinaus werden andere HTML-Elemente beschrieben, die der Seite über den In-Page-Einbettungsplayer-Implementierungscode hinaus hinzugefügt werden müssen.

Player-Konfiguration

Für den Brightcove Player, den Sie für dieses Beispiel erstellen, ist keine spezielle Konfiguration erforderlich.

Anderes HTML

Denken Sie daran, das id Attribut dem video-js Tag im Einbettungscode des Spielers hinzuzufügen.

<video-js id="myPlayerID"
...

Ablauf der Anwendung

Die grundlegende Logik hinter dieser Anwendung lautet:

• Erstellen Sie ein neues Element im DOM für die Schaltfläche „Zurückspulen“.
• Fügen Sie die Schaltfläche „Zurückspulen“ zur Spieler-Steuerleiste hinzu.
• Hören Sie darauf, wenn ein Benutzer auf die Schaltfläche „Zurückspulen“ klickt. Wenn Sie darauf klicken, lösen Sie Ihr benutzerdefiniertes Ereignis mit Daten aus.
• Hören Sie auf das benutzerdefinierte Ereignis mit Daten und spulen Sie die Videowiedergabe basierend auf den definierten Daten zurück.

Elemente zum DOM hinzufügen

Finden Sie den Code, der mit der Bezeichnung versehen ist:

// +++ Add elements to the DOM +++

Erstellen Sie ein neues <div> Element im DOM und weisen Sie ein id Attribut mit dem Wert backButton zu. Erstellen Sie ein neues <img> Element im DOM und weisen Sie das src Attribut mit der URL Ihrer Rückspulschaltfläche zu.

Schaltfläche „Zurückspulen“ zur Steuerleiste hinzufügen

Finden Sie den Code, der mit der Bezeichnung versehen ist:

// +++ Add rewind button to the control bar +++

Holen Sie sich das spacer Element in die Steuerleiste und fügen Sie die Elemente der Rücklaufschaltfläche hinzu.

Hören Sie auf die Rückspultaste

Finden Sie den Code, der mit der Bezeichnung versehen ist:

// +++ Listen for the rewind button +++

Fügen Sie dem backButton Element einen Listener für das onclick Ereignis hinzu. Wenn Sie darauf klicken, lösen Sie Ihr benutzerdefiniertes Ereignis mit Daten aus.

Hören Sie auf Rückspul-Event

Finden Sie den Code, der mit der Bezeichnung versehen ist:

// +++ Listen for rewind event +++

Hören Sie auf Ihre individuelle Veranstaltung mit Daten. Spulen Sie bei Auslösung die Videowiedergabe basierend auf dem im Code rewindAmt definierten zurück.

Styling der Anwendung

CSS wird verwendet, um die Größe des Players zu vergrößern und die Rückspultaste in der Steuerleiste zu positionieren und zu skalieren.

Plugin-Code

Normalerweise sind bei der Umwandlung des JavaScript in ein Brightcove Player-Plugin nominelle Änderungen erforderlich. Eine erforderliche Änderung besteht darin, die Standardverwendung der ready() Methode durch den Code zu ersetzen, der ein Plugin definiert.

Hier ist der sehr häufig verwendete Start zu JavaScript-Code, der mit dem Player funktioniert:

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

Sie ändern die erste Zeile, um die Standardsyntax zum Starten eines Brightcove Player-Plugins zu verwenden:

videojs.registerPlugin('pluginName', function(options) {
  var myPlayer = this;
  ...
});

Wie bereits erwähnt, können Sie den JavaScript-Code des Plugins im entsprechenden GitHub Repo dieses Dokuments sehen: custom-event.js.

Benutzerdefinierte Ereignisse verstehen

Benutzerdefinierte Ereignisse ermöglichen es Ihnen, Abhängigkeiten zwischen DOM-Objekten und Ereignis-Listener zu entkoppeln und zu beseitigen und ein ereignisgesteuertes Architekturmodell zu erstellen.

Versand

Verwenden Sie die trigger() Methode wie folgt, um ein benutzerdefiniertes Ereignis auszutrennen:

// trigger a custom event
myPlayer.trigger('eventName');
or
// trigger a custom event with data
myPlayer.trigger('eventName', {data: 'some data'});

Weitere Informationen zum Auslösen benutzerdefinierter Ereignisse finden Sie im Player-API-Index.

In diesem Beispiel führt der Code folgendes aus:

• Versendet ein benutzerdefiniertes Ereignis mit dem Namen rewind
• Sendet ein Datenobjekt mit einem Namen amount und einem Wert von 5- Sie sehen im JavaScript-Code, wo dieser Wert festgelegt ist

// trigger a custom event with data
myPlayer.trigger('rewind', {'amount': rewindAmount});

Hör zu

Um auf ein benutzerdefiniertes Ereignis zu hören, können Sie die on() Methode wie folgt verwenden:

// listen for a custom event
player.on('eventName', function(evt){});
or
// listen for a custom event with data
player.on('eventName', function(evt,data){});

Sie können die one() Methode auch verwenden, wenn der Ereignis-Listener nur einmal ausgelöst und dann entfernt werden soll. Weitere Informationen zum Abhören von Ereignissen finden Sie im Player-API-Index.

In diesem Beispiel führt der Code folgendes aus:

• Hört auf ein benutzerdefiniertes Ereignis mit dem Namen rewind
• Übergibt das Ereignis- und Datenobjekte in eine Funktion

// listen for a custom event with data
 myPlayer.on('rewind',function(evt,data){
});

Wenn Sie die Ereignis- und Datenobjekte in der Konsole anzeigen, sollte es wie folgt aussehen: