Beispiel für Brightcove Spieler: Navigieren Sie auf Video End

In diesem Thema erfahren Sie, wie Sie ein Overlay am Videoende anzeigen, das beim Klicken die Seite zu einer neuen URL navigiert.

Beispiel eines Spielers

Nach Abschluss des sehr kurzen Videos wird ein Overlay mit einem Link zur Brightcove Homepage angezeigt. Das von Brightcove gelieferte Overlay-Plugin wird verwendet, daher wird kein JavaScript benötigt. CSS wird verwendet, um das Overlay zu stylen.

Siehe den Stift Navigieren auf Video End von Brightcove Learning Services (@rcrooks1969) auf CodePen.

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.

Verwendete API/Plugin-Ressourcen

Brightcove Player-Plugins
Overlay-Plugin anzeigen

Styling der Anwendung

Das CSS wird verwendet, um das Aussehen des Overlays zu ändern. In diesem Beispiel ist das verwendete CSS:

/* override default styles for overlay */
.video-js .vjs-overlay {
    width: 100%;
    height: 20%;
    color: #000;
    background-color: rgba(255, 255, 255, 0.8);
    left: 0;
    top: 0;
    padding-top: 5%;
    padding-bottom: 5%;
    margin-top: 10%;
    padding-left: 0;
}

Sie müssen das CSS ändern, um Ihr gewünschtes Aussehen zu definieren, und speichern Sie das CSS dann an einem für das Internet zugänglichen Ort. Sie werden in der Plugin-Konfiguration auf dieses CSS verweisen.

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

In diesem Fall fügen Sie das Display-Overlay Plugin mit Studio hinzu.

  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 Plugins im linken Navigationsmenü.
  4. Klicken Sie als Nächstes auf Plugin hinzufügen.
  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/2/videojs-overlay.min.js
  7. Geben Sie für die CSS-URL ein: 
    https://players.brightcove.net/videojs-overlay/2/videojs-overlay.css
  8. Geben Sie die Konfigurationsoptionen im Optionen (JSON) Textfeld. 
    {
  "content": "<strong>Default overlay content</strong>",
  "overlays": [
    {
      "content": "<a href='http://www.brightcove.com'><span style='font-size:large'><strong>Brightcove Homepage</strong></span></a>",
      "start": "ended",
      "end": "play"
    }
  ]
}
  9. Klicken Sie auf Speichern.
  10. Um den Player zu veröffentlichen, klicken Sie auf Veröffentlichen & Einbetten > Änderungen veröffentlichen.
  11. Um das Dialogfeld „Öffnen“ zu schließen, klicken Sie auf Schließen.

Anderes HTML

Der Seite werden keine anderen HTML-Elemente hinzugefügt.