Beispiel für Brightcove Spieler: Logo-Overlay-Plugin

In diesem Thema erfahren Sie, wie Sie ein Logo-Overlay-Plugin erstellen, das das Standard-Overlay-Plugin verwendet, um ein Logo-Overlay für Videos mit einer optionalen Klick-URL anzuzeigen. Wenn Sie vorhaben, das Plugin mit einer Iframe-Implementierung des Players zu verwenden, können Sie die Click-Through-URL nicht verwenden, da die neue Seite nur im Iframe geöffnet wird.

Beispiel eines Spielers

Das Plugin kann verwendet werden, um ein beliebiges webbereites Bild-Overlay über dem Player anzuzeigen. Sie können die Anzeige der Nachricht steuern basierend auf:

  • Standort - das Bild kann an verschiedenen Orten über dem Player angezeigt werden
  • Spielerereignisse - wie play z. B. pause oder benutzerdefinierte Ereignisse
  • Zeitintervall - zu einer bestimmten Zeit während der Videowiedergabe

Im folgenden Beispiel sehen Sie unten links im Player ein Logo. Mit fünf Sekunden nach dem Video wird das Logo langsam ausgeblendet.

Siehe das Stift-Logo-Overlay-Plugin von Brightcove Learning Services (@bcls) 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 API-Ereignisse Brightcove Player-Plugins
aus () timeupdate Overlay anzeigen
am ()    
currentTime ()    

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

Der Anzeige-Overlay-Plugin Die JavaScript-Datei wird mit der Seite über eine verknüpft <script> Schild. Beachten Sie, dass das CSS für das Display-Overlay-Plugin NICHT mit der Seite verknüpft ist. Benutzerdefiniertes CSS wird auf der Seite verwendet, um Änderungen zu erleichtern.

Ablauf der Anwendung

Die grundlegende Logik hinter dieser Anwendung lautet:

  • Es ist eine Funktion definiert, die das Overlay-Bild zum richtigen Zeitpunkt entfernt.
  • Es ist eine Funktion definiert, die das Overlay-Bild zum richtigen Zeitpunkt anzeigt.
  • Die benutzerdefinierten Konfigurationsoptionen werden mit den Standardoptionen zusammengeführt. Standardoptionen werden nur verwendet, wenn keine benutzerdefinierte Option angegeben wird.
  • Die Funktion wird aufgerufen, die das Overlay-Bild anzeigt.

Overlay entfernen

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

// ### Remove overlay ###

Diese Funktion wird aufgerufen, wenn das Overlay-Bild anfänglich angezeigt wird. Die Logik in der Funktion prüft, wann das Overlay-Bild entfernt werden soll, auch wenn eine Ablaufzeit festgelegt wurde. Außerdem wird der timeupdate Ereignis-Listener entfernt.

Overlay hinzufügen

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

// ### Add overlay function ###

Das Overlay-Plugin wird hier unter Verwendung der Benutzerkonfigurationseinstellungen aufgerufen. Die Einstellungen bestimmen, was angezeigt werden soll, wo es angezeigt wird und wie lange. Der timeupdate Ereignis-Listener wird hinzugefügt, um nach einer Ablaufzeit zu suchen.

Baue ein overlayOptions Objekt

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

// ### Call function to merge default options with passed in options ###

Sowohl die benutzerdefinierten Konfigurationsoptionen als auch die Standardoptionen werden an eine Funktion übergeben. Die Funktion verwendet die Standardoptionen nur, wenn eine entsprechende benutzerdefinierte Option nicht übergeben wird.

Rufen Sie die showoverlay Methode auf

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

// ### Show overlay ###

Die Funktion, die das Overlay-Bild anzeigt, wird aufgerufen. Abhängig von den Optionen kann das Bild sofort oder zu einem späteren Zeitpunkt angezeigt werden.

Styling der Anwendung

Das langwierige CSS definiert, wie das Overlay-Bild aussehen soll und wo das Bild angezeigt wird. Das Standard-CSS für das Display-Overlay-Plugin wird NICHT verwendet, um die CSS-Anpassung zu erleichtern.

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: logo-overlay.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. Im Fall dieses Plugins werden höchstwahrscheinlich Optionen an das Plugin weitergegeben, in folgendem Formular:

videojs.getPlayer('myPlayerID').ready(function() {
  var myPlayer = this;
  myPlayer.logoOverlay(
    {
      'align': 'bottom-left',
      'imageURL' : 'https://solutions.brightcove.com/bcls/brightcove-player/logo-overlay/bc-logo.png',
      'clickThruURL': 'https://support.brightcove.com/',
      'start': 'loadstart',
      'end': 5
    }
  )
});