Beispiel für Brightcove Spieler: Den Player dynamisch laden

In diesem Thema erfahren Sie, wie Sie den Brightcove Player dynamisch laden, dh auf ein Benutzerereignis und NICHT in den ursprünglich geschriebenen HTML-Code.

Beispiel eines Spielers

In diesem Beispiel klicken Sie auf die Spieler hinzufügen Schaltfläche, um den Player dynamisch zu erstellen und zu laden und dann das Video abzuspielen.

Siehe den Pen 18169-Lading-player-dynamisch von Brightcove Learning Services (@rcrooks1969) auf CodePen.

Quellcode

Sehen Sie sich die Komplettlösung auf GitHub an.

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
spielen ()
gedämpft ()

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. Natürlich wird der Code des Spielers für dieses Beispiel NICHT ursprünglich auf der HTML-Seite platziert, er wird dynamisch erstellt und injiziert.

Anderes HTML

Der HTML-Seite <button> wird A hinzugefügt, die den Aufbau und die Injektion des Players auslöst. Außerdem wird ein <div> Element als Injektionsort hinzugefügt.

Ablauf der Anwendung

Die grundlegende Logik hinter dieser Anwendung lautet:

  • Legen Sie variable Werte mit der Konto-ID, der Spieler-ID und der Video-ID fest, die Sie verwenden möchten.
  • Beim Klick auf die Schaltfläche wird ein gültiges <video> Tag mit einfacher String-Verkettung erstellt und diese Zeichenfolge, die in die HTML-Seite injiziert wird.
  • Das <script> Tag eines gültigen Spielers wird ebenfalls erstellt und in die HTML-Seite injiziert. Wenn dies geschehen ist, wird das JavaScript auf der Seite ausgeführt und löst ein onload Ereignis aus. Rufen Sie im onload Event-Handler die Funktion auf, die den Player initialisiert.
  • Verwenden Sie in der aufgerufenen Funktion die bc() Methode, um das generische Video-Tag in einen Brightcove Player zu initialisieren, und rufen Sie dann die play() Methode auf.

Geben Sie die gewünschte Konto-ID, die Spieler-ID und die Video-ID an

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

// ### Set the data for the player ###

Weisen Sie Variablen die gewünschten Werte für die Spielerkonfiguration zu.

Erstellen Sie den In-Page-Einbettungscode des Players und injizieren Sie sie in die Seite

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

// ### Build the player and place in HTML DOM ###

Das ist JavaScript-Arbeit. Verwenden Sie die String-Verkettung, um ein gültiges <video> Tag zu erstellen. Anschließend injizieren Sie das Tag in die HTML-Seite. Als Nächstes erstellen Sie ein gültiges Brightcove <script> Player-Tag. Wenn Sie dies an die HTML-Seite anhängen, wird das JavaScript automatisch ausgeführt. Dies erstellt ein onload Ereignis, für das Sie einen Handler schreiben können.

Initialisiere den Player als Brightcove Player und spiele das Video ab

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

// ### Initialize the player and start the video ###

Sie verwenden die bc() Standardmethode, um den generischen Player als Brightcove Player zu initialisieren und dann das Video mit der play() Methode abzuspielen.

Styling der Anwendung

Das einzige CSS steuert die Größe des Players.

iframe-Implementierung

Die iframe-Implementierung kann auf sehr ähnliche Weise wie oben gezeigt verwendet werden. Beispielcode ist verfügbar. Wenn Sie möchten, dass das Video geladen wird, ist es am besten, in Studio die Autostart-Eigenschaft des Players auf Ja zu setzen.

Plugin-Code

Der Code dieses Beispiels wird nicht als Brightcove Player-Plugin ausgeführt, da der Player vorhanden sein muss, bevor ein Plugin bei ihm registriert werden kann. Natürlich können Sie das JavaScript in einer separaten Datei speichern und bei Bedarf importieren.

Einen Spieler entfernen

Möglicherweise möchten Sie einen Spieler dynamisch entfernen. Um dies zu tun, sollten Sie die myPlayer.dispose() Methode verwenden. Sie möchten den Player NICHT über JavaScript aus dem DOM entfernen, da dies zu Speicherlecks führen kann. Wenn Sie die dispose() Methode verwenden, entfernt sich der Player selbst aus dem DOM.