Beispiel für Brightcove Spieler: Verwandte Videos über Tags (CMS API)

In diesem Thema erfahren Sie, wie Sie Videos mit den gleichen Tags wie das aktuelle Video abrufen und in einem Overlay anzeigen. Dieses Beispiel verwendet die CMS-API, um die Videos abzurufen.

Einleitung

In diesem Thema erfahren Sie, wie Sie Daten von der CMS-API abrufen und in einem Overlay für den Brightcove Player anzeigen. Dieses Overlay zeigt eine Reihe verwandter Videos (über Tags/Metadaten) in Ihrem Konto an, wenn die Wiedergabe angehalten oder beendet wird. Siehe auch die Überlagerung beliebter Videos Probe.

Einschränkungen

Beispiel eines Spielers

In diesem Beispiel wird eine interaktive Überlagerung verwandter Videominiaturansichten angezeigt, wenn die Wiedergabe angehalten oder beendet wurde. Starten Sie die Wiedergabe für das Video unten. Wenn Sie die Wiedergabe pausieren oder wenn das Video endet, wird eine Überlagerung verwandter Videos angezeigt. Wenn Sie eine Miniaturansicht im Overlay auswählen, lädt das zugehörige Video im Player und startet die Wiedergabe.

Sehen Sie sich das Pen Brightcove Player Sample an: Verwandte Videos über Tags (CMS-API) von Brightcove Learning Services (@bcls1969) auf CodePen.

Quellcode

Sehen Sie sich die Komplettlösung auf GitHub an.

Überblick

In diesem Beispiel wird a verwendet Proxy in PHP gebaut die anrufen CMS API und suchen Sie nach verwandten Videos in demselben Konto, die denselben Tag-Wert haben wie das im Player geladene Video.

Wenn Sie noch nicht mit der CMS-API arbeiten, überprüfen Sie zunächst die folgenden Dokumente:

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 API-Ereignisse Plugins
catalog.getVideo () spielen Videojs-Overlay
catalog.load () endete  
spielen ()    

Player-/HTML-Konfiguration

Das Overlay-Plugin ist im JavaScript-Code für dieses Beispiel definiert und initialisiert. Der Grund, warum dies hier gemacht wird, ist, dass wir die Metadaten der verwandten Videos abrufen müssen, bevor wir das Overlay initialisieren.

Wenn Sie das Overlay-Plugin in Ihre Player-Konfiguration aufnehmen möchten, können Sie die Overlay-JaVASCRIPT- und CSS-Dateien im Player-Modul von Video Cloud Studio hinzufügen. Lassen Sie im Abschnitt Plugins die Name-Eigenschaft leer, damit Sie das Plugin innerhalb des Codes initialisieren können.

Anderes HTML

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

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

Ablauf der Anwendung

Die grundlegende Logik hinter dieser Anwendung lautet:

  • Erstellen Sie Variablen, die Werte für die Basis definieren CMS API URL und die URL des Proxy-Codes.
  • Warten Sie, bis das Video geladen wird, um die Video-Metadaten abzurufen.
  • Richten Sie die Anfrage für die CMS-API ein.
  • Rufen Sie den Proxy-Code auf, um die Anfrage an die zu richten CMS API um die ersten 9 verwandten Videos zu bekommen.
  • Formatieren Sie den Overlay-Inhalt, um die Miniaturansichten für jedes der zugehörigen Videos anzuzeigen.
  • Wenn ein Benutzer eine der zugehörigen Video-Miniaturansichten auswählt, laden Sie sie in den Player und starten Sie die Wiedergabe.

Definieren Sie Werte

Erstellen Sie Variablen, die Werte für die Basis definieren CMS API URL und die URL des Proxy-Codes.

Warte auf loadedmetadaten

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

    // +++ Wait for loadedmetadata +++

Warten Sie, bis das Video geladen wird, indem Sie auf das loadedmetadata Ereignis hören. Dies stellt sicher, dass die Video-Metadaten wie Konto-ID, Name und Tag-Werte im mediainfo Objekt verfügbar sind.

Richten Sie die API-Anfrage

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

    // +++ Setup the API request +++

Erstellen Sie anhand der Informationen aus dem aktuell im Player geladenen Video eine CMS API Suchanfrage nach Videos im selben Konto. Bei der Suche wird nach Videos gesucht, die den gleichen Wert wie das erste Tag im aktuellen Video haben. Es schließt jedes Video mit dem gleichen Namen wie das aktuelle Video aus und begrenzt die Anzahl der zurückgegebenen Videos auf 9. So viele passen in unser Overlay-Layout.

Mach das CMS API Anfrage

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

    // +++ Make the CMS API request +++

Verwenden Sie den Proxy-Code, um eine HTTP-GET-Anforderung an die zu senden CMS API RESTful Web Service. Analysieren Sie die zurückgegebenen Daten in das JSON-Format. Wenn ein Fehler auftritt, zeigen Sie eine Fehlermeldung an.

Formatieren Sie den Overlay-Inhalt

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

    // +++ Format the overlay content +++

Um den Overlay-Inhalt zu formatieren, gehen Sie wie folgt vor:

  • Extrahieren Sie die ID, den Namen und die Miniaturansicht für jedes verwandte Video, das von der CMS-API zurückgegeben wird, und speichern Sie es in einem Array.
  • Erstellen Sie durch das zugehörige Video-Array einen <div> Videolisten-Wrapper, der ein <div> Element für jedes verwandte Video enthält. Dies wird zum Overlay-Inhalt.
  • Initialisieren Sie das Overlay-Plugin mit den neu erstellten Inhalten für verwandte Videos. Sie sehen ein Raster mit verwandten Video-Miniaturansichten, wenn das Overlay angezeigt wird. Zeigen Sie das Overlay an, wenn die Videowiedergabe angehalten oder beendet wurde. Blenden Sie das Overlay aus, wenn das Hauptvideo abgespielt wird.

Verwandtes Video laden und abspielen

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

    // +++ Load and play related video +++

Erstellen Sie eine Funktion, die die Wiedergabe für das zugehörige Video lädt und startet, das vom Benutzer ausgewählt wird.

Styling der Anwendung

Das CSS formatiert das Miniaturraster für verwandte Videos für das Overlay.

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: related-videos-cms.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.

Proxy-Code

Um Ihre eigene Version der Beispiel-App auf dieser Seite zu erstellen, müssen Sie Ihren eigenen Proxy erstellen und hosten. (Die von Brightcove Learning Services verwendeten Proxys akzeptieren nur Anfragen von Brightcove-Domains.) Ein Beispielproxy, der dem von uns verwendeten sehr ähnlich ist, aber ohne die Prüfungen, die Anfragen von Nicht-BrightCove-Domänen blockieren, kann in diesem GitHub-Repository gefunden werden. Dort finden Sie auch grundlegende Anweisungen zur Verwendung und eine ausführlichere Anleitung zum Erstellen von Apps rund um den Proxy unter Verwenden der REST-APIs.