Konfigurieren eines Player-Overlays mithilfe des Overlay-Plugins

In diesem Thema erfahren Sie, wie Sie das Overlay-Plugin mithilfe des Playermoduls zu einem Player hinzufügen können.

Das Overlay Mit dem Plugin können sowohl Text als auch Bilder als Überlagerungen verwendet werden. Das overlay Das Plugin kann auch konfiguriert werden, wann und wie lange das Overlay angezeigt wird. Verwenden Sie die Styling-Optionen des Players, um einem Player eine einfache Bildüberlagerung hinzuzufügen. Sehen Styling-Spieler zur Information.

Überlagerungen können einfache Nachrichten oder Bilder sein, die über dem Player angezeigt werden. In diesem Player wird unten rechts im Player am 2-Sekunden-Punkt bis zum 6-Sekunden-Punkt des Videos ein Brightcove-Logo angezeigt.

Sie können die Anzeige des Overlays basierend auf folgenden Funktionen steuern:

Spielerereignisse - Die Overlay-Anzeige basiert auf Spielerereignissen wie Wiedergabe, Pause oder benutzerdefinierten Ereignissen
Zeitintervalle - Lassen Sie das Overlay während der Videowiedergabe zu einem bestimmten Zeitpunkt anzeigen

Overlays werden mit dem konfiguriert overlay Plugin. Bei der Konfiguration des Plugins müssen eine JavaScript-URL, eine CSS-Datei, ein Plugin-Name und Plugin-Optionen angegeben werden.

Overlay Plugin-Optionen

Die Plugin-Optionen werden verwendet, um zu konfigurieren, wann das Overlay angezeigt wird, wann es verschwindet, was angezeigt wird und wo es angezeigt wird. Die folgenden Plugin-Optionen (als JSON formatiert) werden unterstützt:

start- Legt fest, wann eine Überlagerung angezeigt werden soll. Der Wert kann eine Zeichenfolge oder eine Zahl sein. Wenn es sich um eine Zahl handelt, wird die Überlagerung angezeigt, wenn diese Zeit (in Sekunden) in der Videowiedergabe verstrichen ist. Wenn der Wert eine Zeichenfolge ist, wird er als Brightcove Player-Ereignisname interpretiert play, wie pause oder ended. Eine Liste aller Spielerereignisse befindet sich in der Player-API.
end- Legt fest, wann eine Überlagerung ausgeblendet werden soll. Der Wert kann eine Zeichenfolge oder eine Zahl sein. Wenn es sich um eine Zahl handelt, wird die Überlagerung ausgeblendet, wenn diese Zeit (in Sekunden) in der Videowiedergabe verstrichen ist. Wenn der Wert eine Zeichenfolge ist, wird er als Brightcove Player-Ereignisname interpretiert play, wie pause oder ended. Eine Liste aller Spielerereignisse befindet sich in der Player-API.
content- Definiert, was als Overlay angezeigt wird. Der Wert kann eine Zeichenfolge oder ein DOM-Objekt sein. Sie können eine Zeichenfolge, ein HTML-Element (Bild) oder ein DOM DocumentFragment übergeben.
align- Definiert, wo die Überlagerung angezeigt werden soll. Folgende Werte werden unterstützt: top-left, top, top-right, right, bottom-right, bottom, bottom-left, left

Die folgenden Beispieloptionen zeigen ein Brightcove-Logo an, das am 2-Sekunden-Punkt im Video beginnt und endet, wenn das Video den 6-Sekunden-Punkt überschreitet:


{
  "overlays": [
    {
      "start": 2,
      "end": 6,
      "content": "<a href='https://www.brightcove.com' target='_blank'>
      <img alt='Brightcove Logo' src='http://solutions.brightcove.com/bcls/assets/images/brightcove-logo.png'></a>",
      "align": "bottom-right"
    }
  ]
}

Beachten Sie, dass Sie in den Inhalt alle geeigneten HTML-Tags und ihre Attribute einfügen können (beachten Sie zum Beispiel die alt Text, der für das Bild im obigen Beispiel bereitgestellt wird).

Konfigurieren eines Player-Overlays

Um die zu implementieren Overlay Führen Sie die folgenden Schritte aus, wenn Sie das Plugin mit dem Players-Modul verwenden:

Öffnen Sie das Playermodul und suchen Sie den Player.
Klicken Sie auf den Link für den Spieler, um die Spielereigenschaften zu öffnen.
Klicken Plugins in der linken Navigation.
Klicken Sie auf Plugin hinzufügen > Benutzerdefiniertes Plugin.
Für die Plugin Name , eingeben overlay.

Geben Sie für die JavaScript-URL ein:

//players.brightcove.net/videojs-overlay/2/videojs-overlay.min.js

Geben Sie für die CSS-URL ein:

//players.brightcove.net/videojs-overlay/2/videojs-overlay.css

Geben Sie die Optionen (JSON). Im folgenden Beispiel wird ein anklickbares Bild am unteren Rand des Players angezeigt, das bei der 2-Sekunden-Marke beginnt und bei der 6-Sekunden-Marke endet.

{
    "overlays": [
      {
        "start": 2,
        "end": 6,
        "content": "<a href='https://www.brightcove.com' target='_blank'><img src='http://solutions.brightcove.com/bcls/assets/images/brightcove-logo.png'></a>",
        "align": "bottom-right"
      }
    ]
  }

Klicken speichern und Veröffentlichen der Spieler. Beachten Sie, dass es bis zu 5 Minuten dauern kann, bis die Änderungen in veröffentlichten Playern angezeigt werden.

Beachten Sie, dass für einen Player mehrere Overlays konfiguriert werden können. Siehe die Entwicklerdokumentation für mehr Informationen.

Ein Beispiel für die Verwendung von CSS zum Gestalten eines Player-Overlays finden Sie in der Logo Overlay Plugin Entwicklerdokument.