Stoßstangen-Videos

In diesem Thema erfahren Sie, wie Sie Bumper-Videos implementieren, d. h. Videos, die vor dem Hauptvideo abgespielt werden.

Einleitung

Ein Bumper ist in der Regel ein sehr kurzes Video (10 Sekunden oder weniger), das automatisch vor Pre-Roll-Anzeigen und Ihrem Inhalt eingefügt wird. Ein Bumper dient nicht der Monetarisierung, sondern vermittelt Informationen wie Ihr Firmenlogo oder Branding. Das Poster wird für das Inhaltsvideo angezeigt, aber wenn der Player mit der Wiedergabe beginnt, wird zuerst der Bumper und dann das Inhaltsvideo angezeigt. Im folgenden Beispiel wird ein Intro-Bumper des Unternehmens gezeigt, gefolgt von einem Video über den Inhalt.


Das Poster, der Titel und die Kurzbeschreibung des Inhaltsvideos werden angezeigt, aber wenn die Wiedergabe beginnt, wird zuerst der Bumper und dann das Inhaltsvideo abgespielt.

Funktionalität

Hier sind einige Details über Bumper-Videos:

  • Bumper sind sowohl mit Client-Side Advertising (CSAI) als auch mit Server-Side Advertising (SSAI) kompatibel
  • Bumper werden vor Pre-Roll-Anzeigen und Ihrem Inhalt abgespielt
  • Der Player ist während der Stoßstangen-Videowiedergabe konfigurierbar:
    • Ein-/Ausblenden der Player-Steuerung
    • Verhindern von Suchvorgängen während der Wiedergabe
    • Ändern Sie die Farbe der Suchleiste, um einen Stoßfänger anzuzeigen
  • Die Analysedaten werden wie bei jedem anderen Videoinhalt verfolgt

Implementierung

Es gibt drei Möglichkeiten, einen Videopuffer zu implementieren:

  • Verwendung eines Attributs im erweiterten (eingebetteten) Code
  • Verwendung einer Abfragezeichenfolge im Standardcode (iframe)
  • Hinzufügen zur JSON-Konfiguration des Players

Einzelheiten folgen.

Erweiterter (eingebetteter) Code

Um den Player mit dem erweiterten Playercode zu aktivieren, fügen Sie das data-bumper-id="your_bumper_id" -Attribut zu Ihrem Playercode hinzu, wie im folgenden HTML hervorgehoben.

<div style="width: 960px; height: 540px;">
  <video-js data-account="1752604059001"
    data-player="Wj0445Avw"
    data-embed="default"
    controls=""
    data-video-id="5755775186001"
    data-playlist-id=""
    data-application-id=""
    width="960" height="540"
    class="vjs-fill"
    data-bumper-id="4446983094001"></video-js>
  <script src="https://players.brightcove.net/1752604059001/Wj0445Avw_default/index.min.js"></script>
</div>

Natürlich spielt die Reihenfolge der Attribute in HTML keine Rolle, so dass der data-bumper-id="your_bumper_id" an beliebiger Stelle im Tag <video> platziert werden kann.

Standard (iframe) Code

Um den Player mithilfe des Standardcodes (iframe) zu aktivieren, fügen Sie Ihrer Abfragezeichenfolge den Abfrageparameter &bumperID= your_bumper_id hinzu, wie im folgenden HTML-Code hervorgehoben.

<iframe src="https://players.brightcove.net/1752604059001/
  Wj0445Avw_default/index.html?videoId=5715315990001
  &bumperId=4446983094001" allowfullscreen="" 
  allow="encrypted-media" width="960" height="540">

JSON-Konfiguration

Sie können das Bumper-Video für alle Instanzen eines bestimmten Players aktivieren, indem Sie die Konfiguration dieses Players ändern. Das bedeutet, dass Sie dem Playercode auf der Seite nichts hinzufügen müssen, wie in den beiden obigen Beispielen gezeigt.

Um die Konfiguration des Players in Studio zu ändern, gehen Sie zum Modul Player und klicken Sie auf den zu ändernden Player. Klicken Sie in den Eigenschaften des Players auf JSON-Editor. Fügen Sie dem Abschnitt video_cloud Stoßfänger-Videoinformationen hinzu, wie hervorgehoben.

{
  "compatibility": true,
  "video_cloud": {
    "policy_key": "BCpkADawqM0iKt-2XVs6ZMVqw2zuJ7m2yqfET7SgonzI3dAhYFcmJDRgD3EjLhEC6hMLQBa08qAdYf0G55vTI9bcz3NuP1DojBtiGNnGHG0XRBCww9FjZAJNYoFIuO4tkaNW8-Oz9GPqE65R",
    "bumper": {
      "id": "4446983094001"
    }
   },
   "player": {
    "template": {
    "name": "single-video-template",
    "version": "6.66.2"
   }
  },
  ...

Optionen

Wenn Sie die JSON-Konfiguration verwenden, können Sie auch die folgenden Optionen nutzen:

  • show_controls - Entfernt Steuerelemente während der Bumper-Wiedergabe, wenn false (true standardmäßig)
  • progress_bar_color - Ändert die Farbe des Fortschrittsbalkens, wenn angegeben (standardmäßig undefiniert - erbt die normale Farbe des Player-Fortschrittsbalkens)
  • prevent_seeking - Verhindert das Suchen, wenn angegeben (standardmäßig false)

Die Optionen können der JSON-Konfiguration des Players hinzugefügt werden:

{
  "compatibility": true,
  "video_cloud": {
    "policy_key": "BCpkADawqM0iKt-2XVs6ZMVqw2zuJ7m2yqfET7SgonzI3dAhYFcmJDRgD3EjLhEC6hMLQBa08qAdYf0G55vTI9bcz3NuP1DojBtiGNnGHG0XRBCww9FjZAJNYoFIuO4tkaNW8-Oz9GPqE65R",
    "bumper": {
      "id": "4446983094001",
      "show_controls": true,
      "progress_bar_color": "#654321",
      "prevent_seeking": true
    }
  },
  ...