Beispiel für Brightcove Spieler: Outstream (Nur Werbung) Spieler

Überblick

Dieses Beispiel für Outstream Ad Player zeigt Ihnen, wie Sie den Brightcove Player dynamisch in eine Webseite laden, die andere Nicht-Video-Elemente enthält. Die Videoanzeige ist der einzige Inhalt, der vom Player gespielt wird. Der Player erweitert sich normalerweise innerhalb des Seitenlayouts, wie in diesem Beispiel gezeigt, kann aber auch in einem speziellen Bereich der Seite oder als Overlay erscheinen. Der Spieler verschwindet, wenn er mit dem Abspielen der Anzeige fertig ist.

Beispiel eines Spielers

Dieses Beispiel enthält hilfe-JavaScript-Funktionen, die zeigen, wie Sie die Größe eines <div> Elements im Seiten-DOM dynamisch anpassen, den Brightcove Player dort injizieren, eine Anzeige laden und abspielen und dann den Player entfernen. Die Anzeige, die abgespielt wird, wird entweder über einen Anzeigentag konfiguriert. Der Player ist auf Autoplay eingestellt und standardmäßig stumm geschaltet, was die einzige Möglichkeit ist, in einigen Browsern zu funktionieren. Sie können diese Einstellungen ändern, wenn Sie dies wünschen.

Dieses Beispiel kann unverändert verwendet werden oder kann kopiert und geändert werden, um mit Ihrem benutzerdefinierten Seitendesign zu arbeiten.

Siehe das Pen 18065-adonly-plugin von Brightcove Learning Services (bcls1969) auf CodePen.

Quellcode

Sehen Sie sich die Komplettlösung auf GitHub an.

Ablauf der Anwendung

Die grundlegende Logik hinter dieser Anwendung lautet:

• Dieses Beispiel zeigt eine Webseite im Text-Artikel-Stil mit einem versteckten <div> Element, das im Artikel platziert ist. Nachdem ein Timer ausgeschaltet ist, wird dieses versteckte Div erweitert und der Player erscheint darin.

• Der Player verwendet eine VAST-Anzeigen-Tag-Antwort, um eine Anzeige abzuspielen.
• Wenn die Anzeigen abgeschlossen sind, wird der Player entladen und aus dem DOM entfernt.

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

In Ihre HTML-Datei fügen Sie Folgendes ein:

1. Ein <div> Element mit einem id Attribut, das einem Wert Ihrer Wahl zugewiesen ist. Der JavaScript-Code erstellt Ihren Brightcove Player in diesem <div> Element.

   <div id="adPlayerDiv"></div>

2. Die JavaScript-Datei, die Ihrem Brightcove Player zugeordnet ist. Es sollte ähnlich aussehen wie folgt:

   <script src="https://players.brightcove.net/your account id/default_default/index.min.js"></script>

3. Die JavaScript- und CSS-Dateien für das IMA3-Plugin. Dies dient der Anzeigenintegration mit dem IMA3 HTML5 SDK von Google.

   <link href="https://players.brightcove.net/videojs-ima3/4/videojs-ima3.css" rel="stylesheet"/>
   <script src="https://players.brightcove.net/videojs-ima3/4/videojs-ima3.min.js"></script>

4. Die Hilfsbibliothek mit dem Namen adonly.js. Sie können diese Datei unverändert verwenden, da sie von Brightcoves Player-Ursprung gehostet und über CDN bereitgestellt wird. Wenn Sie möchten, können Sie diesen JavaScript-Code als Leitfaden verwenden, um Ihr eigenes Loader-Skript zu erstellen und auf Ihrem eigenen Server zu hosten. Diese Datei kann auch in Ihre Player-Konfiguration aufgenommen werden.

   <script src="https://players.brightcove.net/3723496277001/files/adonly.js"></script>

   Eine minimierte, von CDN gehostete Version ist auch verfügbar, wenn Sie sie direkt in Ihre Seite aufnehmen möchten.

   <script src="https://players.brightcove.net/3723496277001/files/adonly.min.js"></script>

Öffentliche Funktionen

Der adonly.js Die Bibliothek hat zwei öffentliche Funktionen, die sie verfügbar macht:

• expandAndInjectAdOnlyPlayer(): Erweitert a <div> und injiziert einen Nur-Werbe-Player darin.
• injectAdOnlyPlayer(): Injiziert einen reinen Anzeigenspieler in eine bestimmte <div>(ohne Animation).

Optionen

Die expandAndInjectAdOnlyPlayer() Funktion nimmt die folgenden Parameter an:

• muted
  • Optional. Werte: true, false. Standardwert: true
• autoplay
  • Optional. Werte: true, false. Standardwert: true
• adTag
  • Das Anzeigen-Tag
• div
  • Das div, in das der Anzeigenspieler injiziert werden soll
• height
  • Die Höhe in Pixel, in der Sie das div erweitern möchten
• animationDuration
  • Wie lange dauert es in ms, um die Erweiterung der div-Höhe zu animieren

Die injectAdOnlyPlayer() Funktion nimmt die gleichen Parameter mit Ausnahme der Höhe und der Animationsdauer an.

Styling der Anwendung

In diesem Beispiel wird das vom IMA3-Plugin bereitgestellte CSS-Styling verwendet.

Plugin-Code

Dieses Beispiel verwendet JavaScript-Code, der bereits als Plugin erstellt wurde. Sie können diesen Code im entsprechenden GitHub-Repo dieses Dokuments sehen: adonly.js.

Lastzeit-Optimierung

Dieses Beispiel verwendet einen Brightcove Player und enthält das IMA-Plugin zur Laufzeit. Sie können dieses Beispiel unverändert verwenden, aber den Spielercode für Ihr Konto ändern.

Um die Ladezeit leicht zu optimieren, sollten Sie das IMA-Plugin in die Player-Konfiguration aufnehmen. Lesen Sie dazu die folgenden Dokumente:

• Brightcove Player-Plugins
• Player-Plugins konfigurieren