Overlay-Plugin anzeigen

Überblick

Sie können die Anzeige der Überlagerungsnachricht basierend auf folgenden Funktionen steuern:

• Spielerereignisse - wie play z. B. pause oder benutzerdefinierte Ereignisse
• Zeitintervall - zu einer bestimmten Zeit während der Videowiedergabe

Das folgende Beispielvideo zeigt die Verwendung des Overlay-Plugins. Beim Start wird eine Überlagerung sowie verschiedene Zeiträume angezeigt, einer beginnt bei fünf Sekunden. Starten Sie das Video und halten Sie es an, um zu sehen, wie das Overlay auf diese Ereignisse reagiert.

Dieses Thema enthält die folgenden Abschnitte:

• Implementierung mit dem Player-Modul
• Implementierung mit benutzerdefiniertem Code
• Überlagerungs-Plugin-Optionen

Mit dem Player-Modul implementieren

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

1. Öffnen Sie das PLAYERS-Modul und erstellen Sie entweder einen neuen Player oder suchen Sie den Player, dem Sie das Plugin hinzufügen möchten.
2. Klicken Sie auf den Link für den Spieler, um die Eigenschaften des Spielers zu öffnen.
3. Klicken Sie in der linken Navigation auf Plugins.
4. Erweitere die Plugin hinzufügen Dropdown-Menü und wählen Sie Benutzerdefiniertes Plugin.

   

5. Geben Sie für den Plugin-Namen ein overlay.
6. Geben Sie für die JavaScript-URL ein:

   https://players.brightcove.net/videojs-overlay/3/videojs-overlay.min.js

7. Geben Sie für die CSS-URL ein:

   https://players.brightcove.net/videojs-overlay/3/videojs-overlay.css

8. Geben Sie die Konfigurationsoptionen im Optionen (JSON) Textfeld. Das folgende Beispiel zeigt einen Anker am unteren Rand des Players, der bei der 2-Sekunden-Marke beginnt und bei der 6-Sekunden-Marke endet.

   {
     "overlays": [
       {
         "align": "bottom",
         "start": 2,
         "end": 6,
         "content": "<a href='http://www.brightcove.com'>Proceed to Home Page</a>"
       }
     ]
   }

9. Stellen Sie sicher, dass das Formular wie folgt angezeigt wird:

   

10. Klicken Sie auf Speichern.
11. Um den Player zu veröffentlichen, klicken Sie auf Veröffentlichen & Einbetten > Änderungen veröffentlichen.
12. Um das Dialogfeld „Öffnen“ zu schließen, klicken Sie auf Schließen.

Implementieren mit Code

Um das Plugin mit benutzerdefiniertem Code zu implementieren, konfigurieren Sie die folgenden Plugin-Eigenschaften:

• scripts - JavaScript supplied for the plugin and will not change for different plugin implementations
• stylesheets - CSS supplied to you for the plugin and will not change for different plugin implementations
• plugin name - Always overlay
• plugin options - Contains an array of properties and values

Gehen Sie folgendermaßen vor, um das Plugin zu Ihrem Code hinzuzufügen:

1. Fügen Sie das Standard-Stylesheet des Overlay-Plugins hinzu. Sie können das Standard-Stylesheet verwenden oder eigene Stile erstellen.

   <link href="https://players.brightcove.net/videojs-overlay/3/videojs-overlay.css" rel='stylesheet'>

2. Ergänzen Sie die videojs-overlay.js Skriptdatei mit dem Overlay-Plugin. Dieses Plugin registriert sich automatisch, wenn es auf Ihrer Seite enthalten ist.

   <video-js id="myPlayerID"
       data-account="1752604059001"
       data-player="972ee851-3d7e-43a0-8db1-2c6fb06bad34"
       data-embed="default"
       controls="">
   </video-js>
   
   <script src="https://players.brightcove.net/1752604059001/972ee851-3d7e-43a0-8db1-2c6fb06bad34_default/index.min.js"></script>
   
   <script src="https://players.brightcove.net/videojs-overlay/3/videojs-overlay.min.js"></script>

3. Holen Sie sich einen Verweis auf den Brightcove Player. In diesem Beispiel erstellen wir eine Variable mit dem Namen myPlayer und weisen ihr einen Verweis auf den Player zu.

   <script>
     videojs.getPlayer('myPlayerID').ready(function() {
       var myPlayer = this;
     });
   </script>

   Verwenden Sie die Taste, um eine Überlagerungsnachricht anzuzeigen options Eigenschaft zum Übergeben von Daten an das Plugin. Dieses Beispiel zeigt, wie 3 Overlay-Nachrichten eingefügt werden:

   • Erste Überlagerung:
     • Dies wird angezeigt, wenn die play Ereignis wird ausgelöst und wird ausgeblendet, wenn das pause Ereignis wird ausgelöst.
   • Zweite Überlagerung:
     • Dies wird angezeigt, wenn die Videowiedergabe 5 Sekunden dauert, und wird ausgeblendet, wenn die Videowiedergabe 10 Sekunden dauert.
     • Dies befindet sich in der unteren rechten Ecke des Players.
   • Dritte Überlagerung:
     • Dies wird angezeigt, wenn die Videowiedergabe 12 Sekunden dauert, und wird ausgeblendet, wenn die Videowiedergabe 17 Sekunden dauert.
     • Dies befindet sich in der unteren linken Ecke des Players.
     • Da diese Überlagerung keine hat content Option definiert, verwendet es den Standardwert von Standard-Overlay-Inhalt , definiert vor dem overlays Array.
    

   Wenn Sie das Overlay-Skript in Ihren Code aufnehmen, können Sie Nachrichten wie folgt definieren:

   <script id="pageScript" type="text/javascript">
     videojs.getPlayer('myPlayerID').ready(function() {
       var myPlayer = this;
       myPlayer.overlay({
       content: '<strong>Default overlay content</strong>',
       overlays: [{
         align: "top",
         content: 'This event-triggered overlay message appears when the video is playing',
         start: 'play',
         end: 'pause'
       }, {
         content: 'This timed overlay message appears between 5 and 10 seconds',
         start: 5,
         end: 10,
         align: 'bottom-right'
       }, {
         start: 12,
         end: 17,
         align: 'bottom-left'
       }]
     });
    });
   </script>

Optionen

Die folgenden Plugin-Optionen werden zur Steuerung des Overlay-Objekts verwendet:

• align:
  • Der Wert muss ein unterstützter Zeichenfolgenwert sein.
  • Dies definiert, wo die Überlagerung angezeigt werden soll. Wenn Sie das Standard-Stylesheet einschließen, werden die folgenden Werte unterstützt: top-left , top , top-right , right , bottom-right , bottom , bottom-left , left.
• attachToControlBar:
  • Der Wert kann eine Zeichenfolge oder ein Boolescher Wert sein. Wenn der Wert eine Zeichenfolge ist, muss der Wert der Name einer ControlBar-Komponente sein.

  • Wenn eingestellt auf true Bei einem Zeichenfolgenwert passen die unten ausgerichteten Überlagerungen die Position an, wenn die Steuerleiste minimiert wird. Dies hat keine Auswirkungen auf Überlagerungen, die nicht nach unten, unten links oder unten rechts ausgerichtet sind. Die Option ist für die Verwendung mit der Standardsteuerleiste vorgesehen und funktioniert möglicherweise nicht für benutzerdefinierte Steuerleisten. Unten ausgerichtete Überlagerungen werden vor der angegebenen Komponente eingefügt. Andernfalls werden unten ausgerichtete Überlagerungen vor der ersten untergeordneten Komponente der ControlBar eingefügt. Alle anderen Überlagerungen werden vor der ControlBar-Komponente eingefügt.

  • Die Option kann für alle berechtigten Achsen festgelegt werden, indem sie sie auf der obersten Ebene verwendet:

    myPlayer.overlay({
      content: 'Default overlay content',
      attachToControlBar : true,
      overlays: [{
        align: "top",
        content: 'This event-triggered overlay message appears when the video is playing',
        start: 'play',
        end: 'pause'
      }, {
        content: 'This timed overlay message appears between 5 and 10 seconds',
        start: 5,
        end: 10,
        align: 'bottom-right'
      }, {
        start: 12,
        end: 17,
        align: 'bottom-left'
      }]
    });

    Oder für einzelne Overlay-Objekte:

    myPlayer.overlay({
      content: 'Default overlay content',
      overlays: [{
        align: "top",
        content: 'This event-triggered overlay message appears when the video is playing',
        start: 'play',
        end: 'pause'
      }, {
        content: 'This timed overlay message appears between 5 and 10 seconds',
        start: 5,
        end: 10,
        align: 'bottom-right'
      }, {
        start: 12,
        end: 17,
        align: 'bottom-left',
        attachToControlBar : true
      }]
    });

    Eine Einstellung der obersten Ebene kann durch die Verwendung von Optionen für einzelne Überlagerungsobjekte überschrieben werden.

  • Die visuelle Wirkung ist in folgenden Screenshots zu sehen:

    

    

    

• class:
  • Eine benutzerdefinierte HTML-Klasse zum Hinzufügen zu Überlagerungselementen. Sie definieren den Stil wie jeden Klassen-Selektor, mit der Ausnahme, dass Sie den verwenden müssen .video-js Selektor zusammen mit dem von Ihnen ausgewählten Selektor (die Spezifität muss erhöht werden, damit der Stil nicht überschrieben wird):

    .video-js .customOverlay {
      color: yellow;
      background-color: red;
    }

  • Die Option kann für alle berechtigten Achsen festgelegt werden, indem sie sie auf der obersten Ebene verwendet:

    myPlayer.overlay({
      content: 'Default overlay content',
      class: 'customOverlay',
      overlays: [{
        align: "top",
        content: 'This event-triggered overlay message appears when the video is playing',
        start: 'play',
        end: 'pause'
      }, {
        content: 'This timed overlay message appears between 5 and 10 seconds',
        start: 5,
        end: 10,
        align: 'bottom-right'
      }]
    });

    Oder für einzelne Overlay-Objekte:

    myPlayer.overlay({
      content: 'Default overlay content',
      overlays: [{
        class: 'customOverlay',
        align: "top",
        content: 'This event-triggered overlay message appears when the video is playing',
        start: 'play',
        end: 'pause'
      }, {
        class: 'customOverlay2',
        content: 'This timed overlay message appears between 5 and 10 seconds',
        start: 5,
        end: 10,
        align: 'bottom-right'
      }]
    });

    Eine Einstellung der obersten Ebene kann durch die Verwendung von Optionen für einzelne Überlagerungsobjekte überschrieben werden.

• content:
  • Der Wert kann eine Zeichenfolge oder ein DOM-Objekt sein.
  • Dies ist der HTML-Code, der in der Überlagerung enthalten sein wird. Sie können eine Zeichenfolge, ein HTML-Element oder eine übergeben DOM DocumentFragment.
  • Der Standardwert ist die Zeichenfolge This overlay will show up while the video is playing.
  • Diese Option kann auf der obersten Ebene oder für einzelne Überlagerungsobjekte festgelegt werden.
• end:
  • Der Wert kann eine Zeichenfolge oder eine Zahl sein.
  • Dies definiert, wann eine Überlagerung ausgeblendet werden soll. Wenn der Wert eine Zeichenfolge ist, wird er als Ereignisname interpretiert. 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.
• overlays:
  • Ein Array von Überlagerungsobjekten.
  • Ein Overlay-Objekt sollte aus mindestens einem bestehen start und end Möglichkeit. Andere Optionen werden nach Wunsch verwendet.
• showBackground:
  • Der Wert ist boolesch.
  • Legt fest, ob Hintergrund-Styling und -Polsterung um das Overlay herum eingefügt werden sollen. Diese Einstellung kann überschrieben werden, indem sie für einzelne Überlagerungsobjekte festgelegt wird.
• start:
  • Der Wert kann eine Zeichenfolge oder eine Zahl sein. Dies definiert, wann eine Überlagerung angezeigt werden soll.
  • 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. Hier einige hilfreiche Links:
    • Spielerereignisse
    • Player-API-Referenz
  • Hier ist ein Beispiel, in dem Overlay-Text angezeigt wird, bevor das Video abgespielt wird:

    videojs.getPlayer('myPlayerID').ready(function() {
      var myPlayer = this;
      myPlayer.overlay({
        content: '<strong>Default overlay content</strong>',
        overlays: [{
          align: "top",
          content: 'This event-triggered overlay message appears before the video starts playing',
          start: 'loadstart',
          end: 'play'
        }]
      });
    });

Sie können jedes vom Player gesendete Ereignis verwenden, das in der Liste definiert ist Player Methoden / Ereignisse API Dokument, oder Sie können Ihre eigenen benutzerdefinierten Ereignisse verwenden.

Alle diese Eigenschaften sind optional, aber Sie können seltsame Ergebnisse erhalten, wenn Sie nicht mindestens die einschließen start und end Eigenschaften.

Styling des Overlays

Zwei Stile können für Sie hilfreich sein, wenn Sie mit dem Overlay arbeiten. Sie werden hier detailliert beschrieben.

Verstecke den Hintergrund

Das folgende CSS verbirgt den Hintergrund:

.vjs-overlay.vjs-overlay-top.vjs-overlay-background {
  width: 100 % ;
  margin: auto;
  left: 0;
  background: none;
}

Verstecken Sie das Overlay

Das folgende CSS verbirgt den Hintergrund:

.hide-overlay.vjs-overlay {
  display: none;
}

Beide Stile sind hilfreich in der Beispiel für einen Brightcove-Player: Überlagerung umschalten Dokument.

Änderungsliste

Sieh dir das Changelog hier an.