Support kontaktieren | Systemstatus
Seiteninhalt

    Konfigurieren eines Player-Overlays mithilfe der Overlay-Plug-ins

    In diesem Thema erfahren Sie, wie Sie das Overlay-Plugin mithilfe des Players-Moduls zu einem Player hinzufügen.

    Die Überlagerung Plugin ermöglicht die Verwendung von Text und Bildern als Overlays. Die überlagern 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 überlagern Plugin. Bei der Konfiguration des Plugins müssen eine JavaScript-URL, eine CSS-Datei, ein Plugin-Name und Plugin-Optionen angegeben werden.

    Überlagerung 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 src='http://solutions.brightcove.com/bcls/assets/images/brightcove-logo.png'></a>",
          "align": "bottom-right"
        }
      ]
    }
      

    Konfigurieren eines Player-Overlays

    Um die . umzusetzen Überlagerung Plugin mit dem Players-Modul, gehen Sie wie folgt vor:

    1. Öffnen Sie das Players-Modul und suchen Sie den Player.
    2. Klicken Sie auf den Link für den Player, um die Player-Eigenschaften zu öffnen.
    3. Klicken Plugins in der linken Navigation.
    4. Klicken Fügen Sie ein Plugin> Benutzerdefiniertes Plugin hinzu.
    5. Für die Plugin-Name , Eintreten überlagern.
    6. Geben Sie für die JavaScript-URL ein:
      //players.brightcove.net/videojs-overlay/2/videojs-overlay.min.js
    7. Geben Sie für die CSS-URL ein:
      //players.brightcove.net/videojs-overlay/2/videojs-overlay.css
      	
    8. 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"
      	    }
      	  ]
      	}
    9. 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 Stylen eines Player-Overlays finden Sie unter Logo Überlagerung Plugin Entwicklerdokument.


    Seite zuletzt aktualisiert am 19 Apr 2021