Beispiel für Brightcove Spieler: Wiedergabe-API-Paging

In diesem Thema erfahren Sie, wie Sie das Abrufen von Wiedergabelisten beim Abrufen von Daten von der Wiedergabe-API implementieren.

Einschränkungen

Beispiel eines Spielers

In diesem Beispiel wird ein Brightcove Player verwendet, um ein Video im Player zusammen mit den ersten 3 Videos in der Wiedergabeliste anzuzeigen. Wähle aus Nächste Videos Taste, um die nächsten 3 Videos in der Playlist anzuzeigen. Wenn Sie den letzten Satz von Videos in der Wiedergabeliste erreichen, werden die angezeigten Videos bis zum Anfang der Wiedergabeliste geführt.

Siehe Pen 18171-playback-api-Paging von Brightcove Learning Services (@bcls1969) auf CodePen.

Quellcode

Sehen Sie sich die Komplettlösung auf GitHub an.

Wiedergabe-API

In diesem Beispiel wird die Playback-API verwendet, um Videos aus einer bestimmten Wiedergabeliste zurückzugeben. Um die Videos in der Wiedergabeliste zu durchblättern, werden in diesem Beispiel die folgenden Anforderungs-URL-Parameter verwendet:

  • limit- definiert die Anzahl der Videos, die von der Playback-API zurückgegeben werden sollen
  • offset- legt die Anzahl der Videos fest, die in einer Wiedergabeliste von der Playback-API übersprungen werden sollen

CodePen verwenden

Hier sind einige Tipps zur effektiven Verwendung des obigen CodePen:

  • Schalten Sie die tatsächliche Anzeige des Players um, indem Sie auf klicken Result Taste.
  • Drücke den HTML/CSS/JS Schaltflächen zur Anzeige EINES der Codetypen.
  • Später in diesem Dokument werden die Logik, der Ablauf und das Styling der Anwendung in der Player/HTML-Konfiguration, im Anwendungsfluss und im Anwendungsstyling diskutiert Abschnitte. Der beste Weg, um den Informationen in diesen Abschnitten zu folgen, besteht darin:
    1. Drücke den EDIT ON CODEPEN Klicken Sie im CodePen auf die Schaltfläche und halten Sie den Code in einem Browser / einer Browser-Registerkarte bereit.
    2. Passen Sie in CodePen an, welcher Code angezeigt werden soll. Sie können die Breite verschiedener CodeAbschnitte in CodePen ändern.
    3. Sieh den Player-/HTML-Konfiguration , Bewerbungsablauf und/oder Bewerbungsstyling Abschnitte in einem anderen Browser/Browser-Tab. Sie können nun den Codeerklärungen folgen und gleichzeitig den Code anzeigen.

Entwicklungs-Sequenz

Hier ist die empfohlene Entwicklungssequenz:

  1. Verwenden Sie die In-Page-Embed-Player-Implementierung, um die Funktionalität Ihres Players, Plugins und CSS zu testen (falls CSS benötigt wird)
  2. Legen Sie JavaScript und CSS des Plugins in separate Dateien zum lokalen Testen
  3. Stellen Sie den Plugin-Code und das CSS auf Ihrem Server bereit, sobald Sie Fehler herausgefunden haben
  4. Benutze Studio, um das Plugin und das CSS deinem Player hinzuzufügen
  5. Ersetzen Sie die In-Page-Embed-Player-Implementierung, wenn Sie feststellen, dass die Iframe-Implementierung besser passt (im nächsten Abschnitt beschrieben)

Weitere Informationen zu diesen Schritten finden Sie in der Schritt-für-Schritt-Anleitung: Leitfaden zur Entwicklung von Plugins

iframe oder In-Page einbetten

Bei der Entwicklung von Verbesserungen für den Brightcove Player müssen Sie entscheiden, ob der Code am besten für die Iframe- oder In-Page-Einbettungsimplementierung geeignet ist. Die Best Practice-Empfehlung besteht darin, ein Plugin zur Verwendung mit einer Iframe-Implementierung zu erstellen. Die Vorteile der Verwendung des iFrame-Players sind:

  • Keine Kollisionen mit vorhandenem JavaScript und/oder CSS
  • Reaktionsschnell
  • Der iframe erleichtert die Verwendung in Social-Media-Apps (oder wann immer das Video in andere Apps „reisen“ muss)

Obwohl die Integration des In-Page-Einbettungsplayers komplexer sein kann, planen Sie Ihren Code in dieser Implementierung manchmal. Um zu verallgemeinern, ist dieser Ansatz am besten, wenn die enthaltende Seite mit dem Spieler kommunizieren muss. Im Einzelnen sind hier einige Beispiele:

  • Der Code auf der enthaltenden Seite muss Spielerereignisse abhören und darauf reagieren
  • Der Player verwendet Stile von der enthaltenden Seite
  • Der Iframe führt dazu, dass die App-Logik fehlschlägt, wie eine Weiterleitung von der enthaltenen Seite

Selbst wenn Ihre endgültige Implementierung den Iframe-Code nicht verwendet, können Sie den In-Page-Einbettungscode trotzdem mit einem Plugin für Ihr JavaScript und einer separaten Datei für Ihr CSS verwenden. Dies kapselt Ihre Logik, sodass Sie sie problemlos in mehreren Spielern verwenden können.

Verwendete API/Plugin-Ressourcen

API-Methoden Beschreibung
catalog.getVideo () Methode, um eine Kataloganforderung für das Video mit der angegebenen ID zu stellen und einen Rückruf aufzurufen, wenn die Anforderung abgeschlossen ist.
catalog.load () Methode zum Laden eines Videos in den Player.
Playlist () Methode, um der Wiedergabeliste eines Spielers ein Array von Videoobjekten zuzuweisen. Beachten Sie, dass diese Methode auch zum Abrufen der Wiedergabeliste verwendet werden kann, die derzeit im Player gespielt wird, aber auf diese Weise in diesem Dokument nicht verwendet wird.

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

  • Navigieren Sie in Video Cloud Studio zu der Spieler Modul und dann Einstellungen Abschnitt. Wähle aus Bearbeiten Taste und gehen Sie wie folgt vor:
    • Stellen Sie die ein Wiedergabeliste anzeigen Option zu Ermöglicht.
    • Stellen Sie die Größenoption auf Responsive ein.
    • Stellen Sie die Spielerabmessungen so ein, dass sie zu Ihrer Webseite passen.

Anderes HTML

Füge hinzu ein Nächste Videos Schaltfläche, um den nächsten Satz von 3 Videos in der Wiedergabeliste zu erhalten.

Optional: Fügen Sie einen Container hinzu, um die aktuelle Wiedergabe-API-Anforderungs-URL anzuzeigen.

Ablauf der Anwendung

Die grundlegende Logik hinter dieser Anwendung lautet:

  • Lade die erste Reihe von Videos.
  • Schaltfläche „Nächste Videos anhören“
  • Erstellen Sie Anfrage-URL.
  • Holen Sie sich den nächsten Satz von Videodaten.
  • Lade die aktuelle Wiedergabeliste in den Player.

Laden Sie den ersten Satz von Videos

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

    // +++ Load first set of videos +++

Verwenden Sie die catalog Bibliothek, um das Playlist-Objekt für die angegebene Wiedergabelisten-ID abzurufen. Lade diese erste Reihe von Videos im Player.

Schaltfläche „Nächste Videos anhören“

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

    // +++ Listen for Next Videos button +++

Fügen Sie einen Ereignis-Listener hinzu, um den nächsten Satz von Videos in die Wiedergabeliste zu laden.

Anforderungs-URL erstellen

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

    // +++ Create request URL +++

Erstellen Sie die Playback-API-Anforderungs-URL mit der limit Und offset Parameter.

Videodaten abrufen

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

    // +++ Get video data +++

Rufen Sie die Playback-API auf, um den nächsten Satz von Videos in der Wiedergabeliste zu erhalten.

Videodaten laden

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

    // +++ Load video data +++

Rufen Sie die Playback-API auf, um den nächsten Satz von Videos in der Wiedergabeliste zu erhalten. Lade das erste Video in den Player. Lade die Videos im Array in die Playlist des Players.

Styling der Anwendung

Das CSS stylt den Player und die horizontale Playlist unterhalb des Players.

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: playback-paging.js.

Verwenden des Plugins mit einem Player

Sobald Sie die CSS- und JavaScript-Dateien des Plugins an einem für das Internet zugänglichen Ort gespeichert haben, können Sie das Plugin mit einem Player verwenden. Im Studio SPIELER Modul können Sie einen Spieler wählen, dann in der PLUGINS fügen Sie die URLs zu den CSS- und JavaScript-Dateien hinzu und fügen Sie auch die Name und Optionen , wenn Optionen benötigt werden.