Leitfaden: Integration von Werbepartnern

Überblick

Wenn Ihr Werbesystem beispielsweise mit Google IMA3 kompatibel ist, benötigen Sie diese Informationen nicht, sondern können einfach das vorhandene Plugin für IMA3 verwenden, das im Dokument dokumentiert ist Werbung mit dem IMA3 Plugin Guide.

Wenn Sie festgestellt haben, dass Sie diese Funktionalität benötigen, wird in diesem Inhalt das Werbe-API-Framework erläutert, das für die Integration von Werbung in den Brightcove Player erforderlich ist. Sie können zwei Implementierungen dieses Frameworks sehen, die Brightcove erstellt hat, nämlich die für IMA3 und FreeWheel von Google (Referenzdokumente im nächsten Absatz).

Auch dieses Dokument ist NICHT für Kunden gedacht, die ein vorhandenes Anzeigenframework für ihre Videos verwenden möchten. Dokumente, die für diese Kunden besser geeignet sind, sind:

• Werbung mit IMA3 Plugin
• Werbung mit dem FreeWheel Plugin
• Implementieren von serverseitigen Anzeigen mit dem Brightcove Player

Funktionen des Anzeigenframeworks

Brightcove bietet ein Werbe-API-Framework als Grundlage für benutzerdefinierte Anzeigen-Plugins. Das Framework bietet allgemeine Funktionen, die von Video-Werbebibliotheken benötigt werden, die mit dem Brightcove Player arbeiten, und reduziert den Code, den Sie für Ihre Anzeigenintegration schreiben müssen. Das Framework wird als Open Source-Projekt bereitgestellt, auf dem Sie aufbauen können. Der Projektcode ist im GitHub-Repository verfügbar Videojs-Contrib-Anzeigen.

Das Anzeigenframework ermöglicht Anzeigenpartnern Folgendes:

• Sie haben die vollständige Kontrolle über das Werbeerlebnis (dh das Aussehen und Verhalten des Players während der Wiedergabe von Anzeigen).
• Arbeiten Sie mit benutzerdefinierten oder proprietären Ad-Servern.
• Verwalten Sie Details zur Anzeigenimplementierung auf niedriger Ebene, z. B. um festzustellen, wann Anzeigenanforderungen gestellt werden und wie Motive gepuffert werden.
• Einfache Zusammenarbeit mit Videoanalyse-Anbietern und dem Brightcove Player-Ökosystem.

Grundkenntnisse

Um das Werbe-API-Framework verwenden und darauf aufbauen zu können, benötigen Sie ein gründliches Verständnis der Brightcove Player-Plugin-Architektur. Die folgenden Dokumente vermitteln dieses Wissen:

• Überblick: Spieler-Plugins
• Übergeben Sie Daten an das Plugin
• Plugins lokalisieren

Bei Bedarf finden Sie hier einen schnellen Überblick über Videowerbung aus Sicht von Brightcove:

• Leitfaden zum Lernen: Videowerbung

Verwendung des Frameworks

Die folgenden Abschnitte enthalten Details zur Verwendung des Frameworks.

Schließen Sie die Framework-Ressourcen ein

Um das Plugin verwenden zu können, müssen Sie zuerst das CSS und JavaScript für das Plugin angeben.

<link rel="stylesheet" href="//mypath/videojs.ads.css">
<script src="//mypath/videojs.ads.js"></script>

Sobald das JavaScript enthalten ist, können Sie die Funktion zum Initialisieren des Anzeigenframeworks aufrufen.

<script type="text/javascript">
  videojs.getPlayer('myPlayerID').one('loadedmetadata', function(){
    var myPlayer = this;
    // Initialize the ad framework
    myPlayer.ads();
  });
</script>

Optionen für die Konfiguration

Für das Framework stehen eine Reihe von Konfigurationsoptionen zur Verfügung. Zum Beispiel gibt es eine timeout Möglichkeit. Um diese Option festzulegen, verwenden Sie den folgenden Code:

<script type="text/javascript">
  videojs.getPlayer('myPlayerID').one('loadedmetadata', function(){
    var myPlayer = this;
    // Initialize the ad framework
    myPlayer.ads({
      "timeout": 3000
    });
  });
</script>

Diese Tabelle enthält eine Liste der Optionen:

Veranstaltungen

Die folgenden Ereignisse sind in zwei verschiedene Typen unterteilt. Die Gruppierungen und ihre Beschreibungen folgen.

Das adstart und adend Ereignisse werden vom Framework als Reaktion auf Methodenaufrufe des Anzeigenintegrators ausgelöst. Diese Ereignisse sollten nicht direkt vom Anzeigenintegrator ausgelöst werden.

Das adskip und adtimeout Ereignisse sind optionale Ereignisse, bei denen der Anzeigenintegrator einen Auslöser auswählen kann, um anzugeben, dass der Spieler eine Preroll- oder Postroll-Gelegenheit überspringen soll.

Laufzeiteinstellungen

Sobald das Plugin initialisiert ist, gibt es eine Eigenschaft, mit der Sie sein Verhalten ändern können.

Beispiel

Dieser Abschnitt enthält ein Beispiel für eine Implementierung mit einem vollständigen Arbeitsbeispiel.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contrib ads ad plugin</title>
</head>

<body>

  <video-js id="myPlayerID"
    data-account="1752604059001"
    data-player="default"
    data-embed="default"
    controls=""
    data-video-id="6077029038001"
    data-playlist-id=""
    data-application-id=""
    width="960" height="540"></video-js>

  <script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-ads/6.9.0/videojs.ads.js"></script>

  <script>
    const player = videojs.getPlayer("myPlayerID");
    let creative = '';

    player.ads();

    player.on('contentupdate', function () {

    // Console output
    console.log("### videojs EVENT: contentupdate");

    // can fetch ad inventory here...
    player.setTimeout(() => {
      creative = 'https://solutions.brightcove.com/bcls/ads/bc-ads/bcls-ad-1-8seconds.mp4';
    }, 100);
    player.trigger('adsready');

    // Console output
    console.log("### videojs EVENT: adsready");

    });

    player.on('loadedmetadata', function () {
    // Console output
    console.log("### videojs EVENT: loadedmetadata");
    });

    player.on('readyforpreroll', function () {

      // Console output
      console.log("### videojs EVENT: readyforpreroll");

      player.ads.startLinearAdMode();
      // play your linear ad content
      player.src(creative);
      player.one('durationchange', function () {
        player.play();
      });
      // when ad has finished restore player
      player.one('adended', function () {

        // Console output
        console.log("### videojs EVENT: adended");

        player.ads.endLinearAdMode();
      });
    });

    player.on('ended', function () {
      // Console output
      console.log("### videojs EVENT: ended");
    });
  </script>
</body>

</html>

FAQ