Implementieren von serverseitigen Anzeigen mit dem Brightcove-Player

Überblick

Mit der serverseitigen Anzeigeneinfügung (SSAI) können Sie Anzeigen in Ihre Videos einbetten, sodass sie nicht von Werbeblockern im Browser blockiert werden können. Dynamische Lieferung ist das Aufnahme- und Liefersystem der nächsten Generation, das Ihren Speicherbedarf verringert und Medien dynamisch verpackt.

Standardmäßig erzwingt SSAI, dass alle Anzeigen angesehen werden, und zeigt während der Wiedergabe einen Anzeigen-Countdown-Timer an. Sie können diese Funktion einfach anpassen, um Werbung zu überspringen.

Sie können den Brightcove Player so konfigurieren, dass clientseitige Anzeigen verwendet werden, wenn diese nicht blockiert sind, und automatisch ein Failover auf SSAI durchgeführt wird, wenn ein Adblocker erkannt wird. Weitere Informationen zum Aktivieren dieser Funktion finden Sie in der Anzeigenfailover Dokument.

Hier ist ein Video-Überblick:

Voraussetzungen

Um SSAI verwenden zu können, muss Ihr Video Cloud-Konto für Dynamic Delivery konfiguriert und für SSAI aktiviert sein. Wenden Sie sich an Ihren Kundenbetreuer, um diese Funktion zu nutzen.

Beispiel eines Spielers

In diesem Beispiel werden in einer VMAP-Datei definierte IMA-Anzeigen verwendet, um serverseitige Anzeigen im Videostream zu liefern. Sie sollten sehen, dass es eine Pre-Roll-, Mid-Roll- und Post-Roll-Anzeige gibt. Die VMAP-Datei wird in der Anzeigenkonfiguration definiert.

Siehe den Stift 18468-werbung-ssai-plugin von Brightcove Learning Services ( bcls1969 ) auf CodePen.

Zeigen Sie den Quellcode an.

Merkmale

Brightcove SSAI ist ein moderner Ersatz für die Anzeigenschaltung von Once UX. Die Funktionen umfassen:

• Vollständigere VMAP / VAST-Analyse
• Volle Unterstützung für VAST-Begleitanzeigen
• Neue APIs für die Interaktion mit der Zeitleiste und linearen Anzeigenrollen
• Unterstützung für Wiedergabelisten, Anzeigenmakros und FairPlay
• SSAI arbeitet sowohl mit DRM- als auch mit Nicht-DRM-Inhalten.
• Eine der Hauptaufgaben von SSAI besteht darin, bestimmte Verhaltensweisen bei der Suche und bei Anzeigen durchzusetzen.
• Doppelte Unterstützung für ältere Once UX-VMAPs (unter Verwendung des UO-Namespace) und neue Dynamic Delivery-VMAPs (unter Verwendung des BC-Namespace)

Erste Schritte

Gehen Sie folgendermaßen vor, um serverseitige Anzeigen aus Video Cloud abzuspielen:

1. Erstellen Sie eine Anzeigenkonfiguration
2. Erstellen Sie einen Brightcove-Player
3. Implementieren Sie SSAI mit Studio

Das ist es. Ihr Brightcove Player ist jetzt für serverseitige Anzeigen konfiguriert. Wenn Sie möchten, können Sie SSAI programmgesteuert hinzufügen, wie in der Abbildung gezeigt Implementieren Sie SSAI programmgesteuert Sektion.

Erstellen Sie eine Anzeigenkonfiguration

Die Anzeigenkonfiguration definiert verschiedene Aspekte der SSAI-Wiedergabe, einschließlich Anzeigenaufrufen, Beacons und anderen Konfigurationsoptionen. Ihre Anzeigenantwort kann VAST-, VMAP- oder DFP-Anzeigenregeln sein. Gehen Sie wie folgt vor, um eine Anzeigenkonfiguration zu erstellen:

1. Erweitern Sie in Video Cloud Studio das ADMINISTRATOR Menü und wählen Sie Serverseitige Anzeigeneinstellungen.

   

2. Fügen Sie Informationen für Ihre Anzeigenkonfiguration hinzu und wählen Sie Speichern.

   

Einzelheiten finden Sie im Serverseitige Anzeigeneinstellungen konfigurieren dokumentieren.

Informationen zum Erstellen einer Anzeigenkonfiguration mit der SSAI-API finden Sie im Video Cloud SSAI-Anzeigenkonfigurations-API dokumentieren.

Erstellen Sie einen Brightcove-Player

Erstellen Sie mit Video Cloud Studio einen neuen Brightcove-Player. Einzelheiten finden Sie in der Video Cloud-Grundlagen: Spieler erstellen Dokument.

Implementieren von SSAI mit Studio

Die einfachste Möglichkeit, Ihren Player für serverseitige Anzeigen zu konfigurieren, ist Video Cloud Studio. Nachdem Sie eine Anzeigenkonfiguration und einen Player erstellt haben, können Sie den Player wie folgt für SSAI konfigurieren:

1. Öffnen Sie das PLAYERS-Modul und suchen Sie den Player, dem Sie Werbefunktionen hinzufügen möchten.
2. Wähle den Link für den Spieler aus, um die Eigenschaften des Spielers zu öffnen.
3. Wählen Werbung im linken Navigationsmenü.
4. Aktivieren Sie das Kontrollkästchen Serverseitig (SSAI) aktivieren.
5. Wählen Sie im Dropdown-Menü Konfiguration auswählen die Anzeigenkonfiguration aus, die Sie diesem Player zuordnen möchten.

6. Wenn Sie möchten, dass Overlays über Ihre Anzeigen angezeigt werden, aktivieren Sie das Kontrollkästchen Overlays für Anzeigeninformationen aktivieren. Dies beinhaltet „Mehr erfahren“ und Overlays zur Anzeigenzählung.

7. Das ausgefüllte Formular sollte ungefähr so aussehen:

   

8. Wählen Sie Speichern aus.
9. Um den Player zu veröffentlichen, wählen Sie Veröffentlichen & Einbetten > Änderungen veröffentlichen aus.

Wenn die Änderungen an den Werbeeigenschaften gespeichert werden, wird das SSAI-Plugin als Teil der Plugin-Einstellungen konfiguriert. JavaScript und CSS werden ausgeblendet, da Sie sie über die hinzugefügt haben Werbung Sektion.

Ein Video mit Werbung abspielen

Jedes Video, das Sie aus der Video Cloud abrufen, das mit Dynamic Delivery aufgenommen wurde, enthält die in der VMAP-Datei angegebenen Anzeigen in Ihre Anzeigenkonfiguration. Beachten Sie, dass dem Video eine Audiospur zugeordnet sein muss, damit SSAI funktioniert.

SSAI programmgesteuert implementieren

Sie können Ihrem Player mit Video Cloud Studio ganz einfach SSAI hinzufügen, wie im vorherigen Abschnitt gezeigt. Wenn Sie dies lieber programmgesteuert tun möchten, gehen Sie folgendermaßen vor:

1. Fügen Sie das SSAI-Plugin hinzu
2. Verknüpfen Sie Anzeigen mit Ihrem Player
3. Ein Video mit Werbung abspielen

Fügen Sie das SSAI-Plugin hinzu

Sie können entweder die SSAI-Plugin-Dateien zu Ihrem HTML-Code hinzufügen oder sie wie hier gezeigt zur Konfiguration Ihres Players hinzufügen:

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. Wählen Sie im Dropdown-Menü Plugin hinzufügen die Option Benutzerdefiniertes Plugin aus.

   

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

   https://players.brightcove.net/videojs-ssai/1/videojs-ssai.js

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

   https://players.brightcove.net/videojs-ssai/1/videojs-ssai.css

8. Sie müssen keine Optionen für dieses Plugin eingeben.
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.

Verknüpfen Sie Anzeigen mit Ihrem Player

Als Nächstes ordnen Sie entweder Ihre Anzeigenkonfiguration Ihrem Brightcove Player zu. Sie können dies auf drei Arten tun:

• Standard-Einbettungscode
• Erweiterter Einbettungscode
• Katalog verwenden
• Aktualisieren Sie Ihre Player-Konfiguration

Standard (iframe) Einbettungscode

Fügen Sie dem Standardeinbettungscode das hinzu adConfigId Abfragezeichenfolgenparameter mit dem Wert Ihrer Anzeigenkonfigurations-ID:

<iframe src="https://players.brightcove.net/1752604059001/default_default/
index.html?videoId=5625751316001&adConfigId=your ad config id"
	allowfullscreen
  allow="encrypted-media"
	width="640"
	height="360"></iframe>

Erweiterter Einbettungscode

Fügen Sie dem erweiterten Einbettungscode Folgendes hinzu: data-ad-config-id Attribut mit dem Wert Ihrer Anzeigenkonfigurations-ID:

<video-js data-video-id="5625751316001"
  data-account="1752604059001"
  data-player="default"
  data-embed="default"
  data-application-id
  data-ad-config-id="your ad config id"
  controls=""
  width="640" height="360"></video-js>
<script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script>

Katalog verwenden

Du kannst den ... benutzen player catalog Anzeigen mit Ihrem Video verknüpfen. Der Katalog arbeitet mit zwei Anfragen:

1. Fordern Sie Videodaten aus dem Player-Katalog an. Dies beinhaltet eine VMAP-URL.
2. Die Player-Quelle wird mit der VMAP-URL festgelegt, wodurch eine Anforderung für ein VMAP-Dokument von Dynamic Delivery ausgelöst wird. Die Player-Quelle wird erneut mit einem gültigen VMAP-XML-Dokument festgelegt.

Bei Verwendung der catalog Hängen Sie mit SSAI Ihre Anzeigenkonfigurations-ID an die an getVideo() Rufen Sie die Playback-API wie folgt auf:

var adConfigId = "your ad config id";
var myPlayer = videojs.getPlayer('myPlayerId');
// If you added the SSAI plugin using the Players module, then the initialization
// step is performed automatically. Uncomment the next line if you
// did not use the Players module.
//myPlayer.ssai();

myPlayer.catalog.getVideo("your video id", function(error, video) {
	if (error) {
		myPlayer.error(error);
	} else {
		myPlayer.catalog.load(video);
	}
}, adConfigId);

Aktualisieren Sie Ihre Player-Konfiguration

Eine andere Möglichkeit, Anzeigen zuzuordnen, besteht darin, Ihre Anzeigenkonfigurations-ID in Ihre Brightcove Player-Konfiguration aufzunehmen. Dazu können Sie die verwenden Player Management API wie folgt:

1. Verwenden Sie die PATCH Befehl, um Ihre einzuschließen ad_config_id. Hier ist ein Beispiel für die Aktualisierung Ihres Players mit cURL:

   curl \
     --header "Content-Type: application/json" \
     --user $EMAIL \
     --request PATCH \
     --data '{
         "ad_config_id" : "$CONFIG_ID"
     }' \
     https://players.api.brightcove.com/v1/accounts/$ACCOUNT_ID/players/$PLAYER_ID/configuration
   

2. Sie können Ihre Änderungen dann wie folgt veröffentlichen:

   curl \
     --header "Content-Type: application/json" \
     --user $EMAIL \
     --request POST \
     https://players.api.brightcove.com/v1/accounts/$ACCOUNT_ID/players/$PLAYER_ID/publish
   

3. Stellen Sie sicher, dass die Konfiguration für Ihren Brightcove Player enthalten ist ad_config_id Stellen Sie Ihren Konfigurations-ID-Wert und das SSai-Plugin mit den zugehörigen Plugin-Dateien ein. Gehen Sie dazu folgendermaßen vor:

   1. Navigieren Sie im Studio Players-Modul zu Ihrem Player. Klicken Sie auf den Link für den Spielernamen, um Details anzuzeigen.
   2. Wähle aus Code & URL einbetten (entweder Vorschau oder Veröffentlicht funktioniert). Klick auf das Spieler-URL Verknüpfung.
   3. Ändern Sie in der Adressleiste des Browsers die index.html zu config.json und durchsuchen Sie die neue URL.

   Ihre Player-Konfiguration sollte ungefähr so aussehen:

   {
     "account_id": "1752604059001",
     "ad_config_id": "d6190656-2095-4ff3-8afe-123abcde",
     "compatibility": true,
     "embed_id": "default",
     "player": {
       "template": {
         "name": "single-video-template",
         "version": "6.9.0"
       }
     },
     "player_id": "rJCECV0RZ",
     "player_name": "SSAI Player",
     "plugins": [
       {
         "name": "ssai"
       }
     ],
     "scripts": [
       "https://players.brightcove.net/videojs-ssai/1/videojs-ssai.js"
     ],
     "stylesheets": [
       "https://players.brightcove.net/videojs-ssai/1/videojs-ssai.css"
     ],
     "updated_at": "2017-11-07T16:03:47.161Z",
     "video_cloud": {
       "policy_key": "ABCDE123456789",
       "video": null
     }
   }

Abspielen eines Videos mit Anzeigen

Jedes Video, das Sie aus der Video Cloud abrufen, das mit Dynamic Delivery aufgenommen wurde, enthält die in der VMAP-Datei angegebenen Anzeigen in Ihre Anzeigenkonfiguration. Beachten Sie, dass dem Video eine Audiospur zugeordnet sein muss, damit SSAI funktioniert.

Optionen

• debug
  • Wenn dies der Fall ist, werden Debug-Meldungen in Contrib-Anzeigen eingerichtet und zusätzliche Informationen in Gegenwart von videojs-bc-analyse-logger protokolliert.
• hideOverlays
  • Wenn wahr, der Countdown-Timer und Erfahren Sie mehr Click-through-Overlays werden während der Wiedergabe von Anzeigen nicht angezeigt.
• trackingBeacons
  • Bei false werden die vom VMAP analysierten Tracking Beacons für Anzeigenansicht, Impression, Quartile usw. nicht gesendet.
• timeout
  • Die Anzahl der Millisekunden, nach denen ein XHR zum Abrufen eines VMAP eine Zeitüberschreitung aufweist.

Styling

Es gibt mehrere nützliche HTML-Klassen, die von diesem Plugin auf den Player angewendet werden und anhand derer der Status des Plugins ermittelt werden kann.

Methoden / Eigenschaften

Bei Verwendung des SSAI-Plugins stehen mehrere öffentliche Methoden zur Verfügung. Denken Sie daran, dass Sie auch die Standard-Player-Methoden verwenden können.

Um die SSAI-Methoden verwenden zu können, muss Ihr JavaScript-Code warten, bis das Plugin geladen ist, wie hier gezeigt:

<script>
	videojs.getPlayer('myPlayerID').ready(function () {
		var myPlayer = this;
		myPlayer.on("loadedmetadata", function () {
			console.log(myPlayer.ssai().currentTimelineState());
		});
	});
</script>

Timeline-Statusmethoden

Das *TimelineState Methoden geben a zurück TimelineState Objekt. Ein Timeline-Statusobjekt ist ein einfaches Objekt mit einer bestimmten Schnittstelle, die den Wiedergabestatus eines SSAI-Streams an einem beliebigen Punkt in der absoluten Timeline angibt.

Die "absolute Zeit" bezieht sich auf einen Punkt in der vollständigen Zeitleiste eines Streams (einschließlich Anzeigen und Inhalt). Der Begriff "relative Zeit" bezieht sich auf die Zeit relativ zum aktuellen Inhalt (entweder Anzeige oder Inhalt).

contentTimelineState()

• Argument: einzeln numerisch time
• Ruft den Timeline-Status zur angegebenen Inhaltszeit ab (Inhalt, ohne Werbung). Wenn Ihr Inhalt beispielsweise 100 Sekunden lang ist, können Sie den Timeline-Status zur Hälfte des Inhalts abrufen, indem Sie Folgendes verwenden:

  contentTimelineState(50)

absoluteTimelineState()

• Argument: einzeln numerisch time
• Ruft den Timeline-Status zur angegebenen absoluten Zeit ab (Inhalt + Anzeigen). Wenn Ihr Content beispielsweise eine 30-Sekunden-Pre-Roll-Anzeige enthält, können Sie den Timeline-Status nach 30 Sekunden in Ihren Content einfügen, indem Sie Folgendes verwenden:

  absoluteTimelineState(50)

Hier ist eine Liste zusätzlicher Methoden für den Zeitleistenstatus:

currentTimelineState()
relativeTimelineState()
seekInAbsoluteTime()
seekInRelativeTime()
seekInContentTime()

Eigenschaften des Zeitleistenstatus

Um den Wert einer Timeline-Statuseigenschaft abzurufen, können Sie die folgende Syntax verwenden:

myPlayer.ssai().absoluteTimelineState().absoluteDuration;

Hier ist eine Liste der Eigenschaften, die mit dem verknüpft sind TimelineState Objekt:

absoluteTime

• Typ: Nummer
• Die absolute Zeit im Stream.

absoluteDuration

• Typ: Nummer
• Die absolute Dauer des Streams.

relativeTime

• Typ: Nummer
• Die Zeit im Stream relativ zur aktuellen linearen Anzeige oder zum Inhalt selbst.

relativeDuration

• Typ: Nummer
• Die Dauer der aktuellen linearen Anzeige oder des Inhalts selbst.

linearAdRoll

• Typ: LinearAdRoll
• Ein Objekt, das die aktuelle lineare Anzeige für die absolute Zeit darstellt.

linearAd

• Typ: LinearAd
• Ein Objekt, das die aktuelle lineare Anzeige für die absolute Zeit darstellt.

Veranstaltungen

Derzeit gibt es ein SSAI-spezifisches Ereignis, das von diesem Plugin ausgelöst wird.

bcov-ssai-click-through

• Dieses Ereignis wird intern vom Plugin ausgelöst, um anzuzeigen, dass ein Anzeigenklick angefordert wurde.

Konfigurationshinweise

1. Das Vorabladen von Anzeigen sollte nicht mit SSAI erfolgen. Der Grund dafür ist, dass der Player beim Vorabladen eine Anzeigenimpression und wahrscheinlich die ersten Quartil-Beacons meldet, bevor das Video abgespielt wird. Dies kann zu ungenauen Anzeigenanalysen führen. Wenn Sie SSAI in Studio konfigurieren, geschieht dies automatisch, aber wenn Sie SSAI manuell einrichten, müssen Sie sich dieses Problems bewusst sein.
2. Wenn der Webplayer SSAI verwendet und einer Ihrer Beweggründe darin besteht, Werbeblocker zu umgehen, sollten Sie serverseitige Beacons verwenden. Clientseitige Beacons sollten nicht verwendet werden, da sie blockiert werden.

Glossar

Dieses Plugin unterscheidet die Konzepte von absolut und Inhalt Zeit innerhalb eines SSAI-Streams. Herkömmliche Videoplayer haben nur ein Konzept von Inhalt Zeit; Zeiten zwischen Start und Ende der URI, die gerade abgespielt wird. Weil ein SSAI-Stream im Wesentlichen eine Anzahl von ist Inhalt Streams zusammengenäht haben wir das Konzept von eingeführt absolut Zeit, die den gesamten zusammengefügten Stream einschließlich der Videowerbung berücksichtigt.

Wenn Sie das Präfix sehen absolut Bei einer Eigenschaft oder Methode beziehen sich die erwarteten / zurückgegebenen Zeiten auf den gesamten zusammengefügten Stream. Wenn Sie das Präfix sehen Inhalt Die erwarteten / zurückgegebenen Zeiten beziehen sich nur auf einen bestimmten Inhalt, der in den Stream eingefügt wurde (Hauptinhalt oder einzelne lineare Werbung).

• Absolute Zeit :: Bezieht sich auf einen bestimmten Punkt in der Gesamtzeitleiste eines SSAI-Streams. Zum Beispiel a 2:00 Video mit einem 0:30 Pre-Roll-Anzeige hat eine absolute Gesamtzeit von 2:30. Die absolute Zeit von 0:15 ist in der Pre-Roll und der absoluten Zeit von 0:31 ist die erste Sekunde des Inhalts.

• Relative Zeit :: Bezieht sich auf die Zeit relativ zum aktuellen Medienblock - entweder Inhalt oder Anzeige. Erweitern Sie oben die relative Zeit während des Pre-Rolls 0:15 ist gleichbedeutend mit der absoluten Zeit von 0:15 , aber die absolute Zeit 0:31 würde einer relativen Zeit von entsprechen 0:01.

  Im Allgemeinen ist die relative Zeit das, was Sie in der Player-Benutzeroberfläche sehen, und ein Großteil der Arbeit dieses Plugins und der zugehörigen Middleware wird von der absoluten Zeit in die relative Zeit übersetzt.

• Inhaltszeit bezieht sich auf einen Zeitpunkt innerhalb der Inhaltszeitleiste eines SSAI-Streams, wobei alle Anzeigen ignoriert werden. Beispielsweise hat ein 2: 00-Video mit einer 0: 30-Pre-Roll-Anzeige eine Inhaltszeit von 2: 00. Die Inhaltszeit von 0:15 entspricht einer absoluten Zeit von 0:45 (Pre-Roll plus 15 Sekunden).

Bekannte Probleme

Hier sind die bekannten Probleme bei der Verwendung des SSAI-Plugins:

• Safari 10/11 zeigt manchmal das letzte Bild der Postroll am Ende des Videos.
• SSAI fügt keine Overlay-Anzeigen in den Videostream ein.

Anmerkungen

SSAI VOD

• Wenn Sie benutzerdefinierte Implementierungen auf der Grundlage der Antworten der Brightcove-Wiedergabe-API (PAPI) erstellen, beachten Sie bitte die folgenden Hinweise:
  • Bei der serverseitigen Anzeigenschaltung (SSAI) befindet sich das Manifest mit den Miniaturansichten in der VMAP statt in der PAPI-Antwort.
  • Bei Nicht-SSAI ist das Manifest der Miniaturansichten in der PAPI-Antwort enthalten.
• Eine Liste der Einschränkungen finden Sie im SSAI-Übersicht dokumentieren.

SSAI Live

• VMAP for Live SSAI wird derzeit nicht unterstützt.
• Für SSAI für die Live-Wiedergabe ist das SSAI-Plugin nicht erforderlich, und clientseitige Funktionen für die SSAI-Wiedergabe sind für die Live-Wiedergabe nicht verfügbar.
• Eine Liste der Einschränkungen finden Sie im Dokument Brightcove Live-API mit SSAI .

SSAI midroll Verhalten

• Wenn ein Benutzer den Abspielkopf über eine Anzeige bewegt, wird die Anzeige abgespielt, bevor der Inhalt fortgesetzt wird
• Wenn der Benutzer den Abspielkopf vor der Anzeige zurückbewegt, wird die Anzeige erneut abgespielt

Änderungsliste

Siehe die Versionshinweise zum SSAI-Plugin.

Historische Versionshinweise finden Sie im Changelog hier.