Diese Seite wurde von der Cloud Translation API übersetzt.

Einführung in das IMA DAI SDK

Mit IMA SDKs kannst du ganz einfach Multimedia-Anzeigen in deine Websites und Apps einbinden. Mit IMA SDKs können Anzeigen von jedem VAST-kompatiblen Ad-Server angefordert und die Anzeigenwiedergabe in Ihren Apps verwaltet werden. Mit IMA DAI SDKs senden Apps eine Streamanfrage für Anzeigen- und Videoinhalte – entweder VOD- oder Liveinhalte. Das SDK gibt dann einen kombinierten Videostream zurück, sodass Sie nicht zwischen Anzeigen- und Inhaltsvideo in Ihrer App wechseln müssen.

Wählen Sie die gewünschte dynamische Anzeigenbereitstellungslösung aus.

Mit der Google Cloud Video Stitcher API registrierte Livestreams abspielen

In dieser Anleitung wird gezeigt, wie du mit dem IMA DAI SDK für HTML5 einen Livestream für ein Ereignis anforderst und abspielst, das bei der Google Cloud Video Stitcher API registriert ist. Außerdem erfährst du, wie du während der Wiedergabe eine Werbeunterbrechung einfügst.

In diesem Leitfaden wird das einfache Beispiel aus dem Einstiegsleitfaden für die dynamische Anzeigenbereitstellung in IMA erweitert.

Informationen zur Einbindung in andere Plattformen oder zur Verwendung der clientseitigen IMA SDKs finden Sie unter Interactive Media Ads SDKs.

Wenn du dir eine fertige Beispielintegration ansehen oder folgen möchtest, lade das Beispiel für den Cloud-Video-Stitcher für HLS oder DASH herunter.

Google Cloud-Projekt einrichten

Richten Sie ein Google Cloud-Projekt ein und konfigurieren Sie Dienstkonten für den Zugriff auf das Projekt.

Erstelle eine Konfiguration für einen Livestream-Termin. Verwende dazu einen Livestream mit deinen eigenen Inhalten oder einen Testlivestream. In dieser Anleitung wird von einem HLS-Stream ausgegangen.

Gib die folgenden Variablen für die Verwendung im IMA SDK ein:

Standort

Die Google Cloud-Region, in der Ihre Livekonfiguration erstellt wurde: LOCATION

Projektnummer

Die Google Cloud-Projektnummer, in der die Video Stitcher API verwendet wird: PROJECT_NUMBER

OAuth-Token

Das kurzlebige OAuth-Token eines Dienstkontos mit der Nutzerrolle „Video Stitcher“:

OAUTH_TOKEN

Weitere Informationen zum Erstellen kurzlebiger Anmeldedaten für Dienstkonten Das OAuth-Token kann für mehrere Anfragen wiederverwendet werden, solange es nicht abgelaufen ist.

Netzwerkcode

Der Ad Manager-Netzwerkcode zum Anfordern von Anzeigen: NETWORK_CODE

ID der Live-Konfiguration: Die Live-Konfigurations-ID, die du beim Erstellen des Livestreamereignisses angegeben hast: LIVE_CONFIG_ID
Benutzerdefinierter Asset-Schlüssel: Der benutzerdefinierte Ad Manager-Asset-Schlüssel, der beim Erstellen einer Konfiguration für ein Livestream-Ereignis mit der Video Stitcher API generiert wurde: CUSTOM_ASSET_KEY

Entwicklungsumgebung konfigurieren

Die IMA-Beispiel-Apps zeigen nur HLS-Streamanfragen. Du kannst weiterhin DASH-Streams verwenden, wenn du die VideoStitcherLiveStreamRequest-Klasse erstellst. Wenn du deinen DASH-kompatiblen Player einrichtest, musst du einen Listener für die Fortschrittsereignisse des Videoplayers einrichten, der die Metadaten des Videos an StreamManager.processMetadata() weitergeben kann. Diese Funktion verwendet drei Parameter:

type: Ein String, der für HLS-Streams auf 'ID3' und für DASH-Streams auf 'urn:google:dai:2018' festgelegt werden muss.
data: Bei DASH-Ereignisnachrichten ist dies der Nachrichtendatenstring.
timestamp: Eine Zahl, die der Startzeit der Ereignisnachricht für DASH-Streams entspricht.

Sende die Metadaten so schnell und so oft wie möglich, sobald sie von deinen Spielerereignissen verfügbar sind. Wenn Metadaten fehlen oder falsch sind, werden über das IMA DAI SDK möglicherweise keine Anzeigenereignisse ausgelöst. Das kann zu falsch erfassten Anzeigenereignissen führen.

Lade die Beispiele für die dynamische Anzeigenbereitstellung mit IMA für HTML5 herunter und extrahiere das einfache Beispiel „HLS.js“ in einen neuen Ordner. Dieses Beispiel ist eine Webanwendung, die Sie zu Testzwecken lokal hosten können.

Wenn Sie das Beispiel lokal hosten möchten, rufen Sie den neuen Ordner auf und führen Sie den folgenden Python-Befehl aus, um einen Webserver zu starten:

python3 -m http.server 8000

http.server ist nur in Python 3.x verfügbar. Sie können auch einen anderen Webserver verwenden, z. B. den Apache HTTP-Server oder Node.js.

Öffnen Sie einen Webbrowser und rufen Sie localhost:8000 auf, um einen Videoplayer zu sehen. Dein Browser muss die HLS.js-Bibliothek unterstützen.

Wenn alles richtig funktioniert, wird nach einer kurzen Werbeunterbrechung der Kurzfilm „Tears of Steel“ gestartet, wenn Sie im Videoplayer auf die Schaltfläche Wiedergabe klicken. Dieser Inhalt wird über einen VOD-Stream (Video on Demand) ausgeliefert.

Livestream anfordern

Wenn du den Beispiel-VOD-Stream durch deinen Livestream ersetzen möchtest, verwende die Klasse VideoStitcherLiveStreamRequest, mit der automatisch eine Anzeigensitzung mit Google Ad Manager erstellt wird. In der Google Ad Manager-Benutzeroberfläche können Sie die generierten dynamischen Anzeigenbereitstellungssitzungen zum Überwachen und Beheben von Fehlern finden.

Im vorhandenen Beispiel gibt es Funktionen zum Anfordern eines VOD-Streams oder eines Livestreams. Damit die Funktion mit der Google Cloud Video Stitcher API funktioniert, müssen Sie eine neue Funktion hinzufügen, um ein VideoStitcherLiveStreamRequest-Objekt zurückzugeben.

Beispiel:

// StreamManager which will be used to request ad-enabled streams.
let streamManager;
...
function initPlayer() {
  videoElement = document.getElementById('video');
  adUiElement = document.getElementById('adUi');
  streamManager = new google.ima.dai.api.StreamManager(
    videoElement,
    adUiElement
  );
  streamManager.addEventListener(
      [
        google.ima.dai.api.StreamEvent.Type.LOADED,
        google.ima.dai.api.StreamEvent.Type.ERROR,
        google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED,
        google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED
      ],
      onStreamEvent, false);

  hls.on(Hls.Events.FRAG_PARSING_METADATA, function(event, data) {
    if (streamManager && data) {
      // For each ID3 tag in our metadata, we pass in the type - ID3, the
      // tag data (a byte array), and the presentation timestamp (PTS).
      data.samples.forEach(function(sample) {
        streamManager.processMetadata('ID3', sample.data, sample.pts);
      });
    }
  });

  videoElement.addEventListener('pause', () => {
    playButton.style.display = 'block';
  });

  playButton.addEventListener('click', initiatePlayback);
}

function initiatePlayback() {
  requestVideoStitcherStream();

  playButton.style.display = "none";
  playButton.removeEventListener('click', initiatePlayback);
  playButton.addEventListener('click', resumePlayback);
}
...

function requestVideoStitcherStream() {
  const streamRequest = new google.ima.dai.api.VideoStitcherLiveStreamRequest();
  streamRequest.liveStreamEventId = 'LIVE_CONFIG_ID';
  streamRequest.region = 'LOCATION';
  streamRequest.projectNumber = 'PROJECT_NUMBER';
  streamRequest.oAuthToken = 'OAUTH_TOKEN';
  streamRequest.networkCode = 'NETWORK_CODE';
  streamRequest.customAssetKey = 'CUSTOM_ASSET_KEY';

  streamManager.requestStream(streamRequest);
}

Wenn sich die Livestream-Dateien für lokale Tests in einem Cloud Storage-Bucket befinden, musst du CORS für die Quellehttp://localhost:8000 aktivieren.

Lade die Seite neu. Anschließend kannst du benutzerdefinierte Livestreams anfordern und abspielen.

(Optional) Optionen für die Streamingsitzung hinzufügen

Du kannst deine Streamanfrage anpassen, indem du Sitzungsoptionen hinzufügst, um die Standardkonfiguration der Cloud Video Stitcher API mit VideoStitcherLiveStreamRequest.videoStitcherSessionOptions zu überschreiben. Wenn du eine nicht erkannte Option angibst, antwortet die Cloud Video Stitcher API mit einem HTTP-Fehler 400. Weitere Informationen finden Sie in der Anleitung zur Fehlerbehebung.

Du kannst die Manifest-Optionen beispielsweise mit dem folgenden Code-Snippet überschreiben. Dabei werden zwei Streammanifeste mit Darstellungen angefordert, die von der niedrigsten bis zur höchsten Bitrate sortiert sind.

...

// The following session options are examples. Use session options
// that are compatible with your video stream.
streamRequest.videoStitcherSessionOptions = {
  "manifestOptions": {
    "includeRenditions": [
      {"bitrateBps": 3000, "codecs": "hvc1.1.4.L126.B0, mp4a.40.2"},
      {"bitrateBps": 2000, "codecs": "avc1.64001f, mp4a.40.2"},
    ],
    "bitrateOrder": "ascending"
  }
};

streamManager.requestStream(streamRequest);

Werbeunterbrechung einfügen

Die Google Cloud Video Stitcher API fügt für jede Werbeunterbrechung Anzeigen ein, die aus dem Anzeigen-Tag abgerufen wurden. Werbeunterbrechungen werden im Manifest mit Anzeigenmarkierungen gekennzeichnet. Anzeigenmarkierungen werden vom Livestream-Encoder eingefügt.

Wenn du deinen eigenen Livestream verwendest, musst du die Anzeigenmarkierung einfügen. Weitere Informationen zu den unterstützten HLS- und DASH-Anzeigenmarkierungen findest du in der Dokumentation zu Anzeigenmarkierungen.
Wenn du einen Livestream mit der Google Cloud Livestream API erstellt hast, füge ein Kanalereignis für Werbeunterbrechungen ein.

Die Anzeige wird sofort nach dem Einfügen der Werbeunterbrechung wiedergegeben.

Bereinigen

Nachdem du einen Livestream mit der Google Cloud Video Stitcher API gehostet und über das IMA DAI SDK für HTML5 angefordert hast, solltest du alle Bereitstellungsressourcen bereinigen.

Folge der Anleitung unter Livestreams bereinigen, um alle nicht benötigten Ressourcen und Assets zu entfernen.

Verwenden Sie abschließend im Terminalfenster, in dem Sie den Python 3-Webserver gestartet haben, den Befehl ctrl+C, um den lokalen Server zu beenden.