Beispiel für Brightcove Spieler: Vertikale Lautstärke-

In diesem Thema erfahren Sie, wie Sie die Lautstärkeregelungsschaltfläche so ändern, dass anstelle des horizontalen Standardlayouts ein vertikaler Lautstärkeregler angezeigt wird.

Beispiel eines Spielers

Starten Sie die Videowiedergabe und bewegen Sie die Maus über die Lautstärketaste in der Steuerleiste. Anstelle des standardmäßigen horizontalen Schiebereglers sollte ein vertikaler Lautstärkeregler angezeigt werden.

Siehe das vertikale Volumen des Pen von Brightcove Learning Services (@bcls1969) 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
bc () -Methode

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

Da wir die Steuerleiste ändern möchten, bevor der Spieler erstellt wird, verzögern wir die Instanziierung des Brightcove Players, indem wir einige der Attribute aus dem <video> Tag entfernen. Weitere Informationen hierzu finden Sie unter Verzögerung der Player-Instanziierung dokumentieren.

Ändern Sie Ihren Einbettungscode für Spieler wie folgt:

  1. Fügen Sie das id Attribut dem video Tag im Einbettungscode des Players hinzu
  2. Entferne die folgenden Attribute aus dem video Tag:
    • data-account
    • data-player
    • data-video-id

Ihr Einbettungscode für Spieler sollte jetzt ähnlich aussehen:

<video-js id="myPlayerID"
  data-embed="default"
  data-application-id
  width="640" height="360"
  controls></video-js>
<script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script>

Ablauf der Anwendung

Die grundlegende Logik hinter dieser Anwendung lautet:

  • Definiere die Spieleroptionen
  • Füge die Spielerattribute hinzu
  • Erstelle den Spieler

Definiere die Spieleroptionen

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

// +++ Define the player options +++

Definiere das volumePanel so, dass es vertikal und nicht inline mit der Steuerleiste ist.

Füge die Spielerattribute hinzu

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

// +++ Add the player attributes +++

Füge dem <video> Tag die folgenden Spielerattribute mit deinen Werten hinzu.

  • data-account
  • data-player
  • data-video-id

Erstelle den Spieler

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

// +++ Create the player +++

Instanziieren Sie den Spieler, indem Sie die Controlbar-Optionen in die bc () -Methode übergeben.

Styling der Anwendung

Es gibt keine zusätzlichen Stile für dieses Beispiel.

Mehrere Spieler aktualisieren

Um alle Spieler auf Ihrer HTML-Seite zu aktualisieren, können Sie eine videojs.hook() Funktion verwenden.

Hook-Funktionen

Mit Hooks können Sie in bestimmten Lebenszyklusmomenten von Video.js Funktionen hinzufügen oder das Erscheinungsbild des Spielers ändern. Mit einer Hook-Funktion werden alle Spieler auf Ihrer HTML-Seite aktualisiert, indem Sie die Player-Optionen in die videojs.hook() Funktion übergeben.

Weitere Informationen finden Sie in der Dokumentation zu Video.js Hooks.

Beispiel eines Spielers

In diesem Beispiel wird die Lautstärkeregler geändert, um einen vertikalen Lautstärkeregler für alle Spieler auf der Seite anzuzeigen.

Starten Sie die Videowiedergabe und bewegen Sie die Maus über die Lautstärketaste in der Steuerleiste. Anstelle des standardmäßigen horizontalen Schiebereglers sollte für beide Spieler ein vertikales Lautstärkeregler angezeigt werden.

Sehen Sie den vertikalen Stift mit Hook by Brightcove Learning Services (@bcls1969) auf CodePen.

Player-Konfiguration

Sie verzögern die Erstellung der Spieler auf Ihrer HTML-Seite, genau wie im ersten Beispiel in diesem Dokument.

Ablauf der Anwendung

Die grundlegende Logik hinter dieser Anwendung lautet:

  • Definiere die Hook-Funktion mit Player-Optionen
  • Füge die Spielerattribute hinzu
  • Führen Sie die Hook-Funktion aus
  • Erstelle die Spieler

Definiere die Hook-Funktion mit Player-Optionen

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

// +++ Define the hook function with player options +++

Definieren Sie die Hook-Funktion für den beforeSetup Lebenszyklusmoment, der die Player-Optionen enthält. Stellen Sie für die Spieleroptionen den so ein, volumePanel dass er vertikal und nicht inline mit der Steuerleiste angezeigt wird.

Füge die Spielerattribute hinzu

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

// +++ Add the player attributes +++

Füge die folgenden Spielerattribute mit deinen Werten zum <video> Tag für jeden Spieler hinzu.

  • data-account
  • data-player
  • data-video-id

Führen Sie die Hook-Funktion aus

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

// +++ Execute the hook function +++

Ändern Sie die an die Spieler weitergegebenen Optionen mithilfe von beforeSetup Lebenszyklusmoment mit dem Video.js-Hook Funktion.

Erstelle die Spieler

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

// +++ Create the players +++

Instanziiere jeden Spieler mit der bc () -Methode.