IMA SDK für die dynamische Anzeigenbereitstellung einrichten

Plattform auswählen:HTML5 Android iOS tvOS Cast Roku

Mit den IMA SDKs lassen sich Multimedia-Anzeigen ganz einfach in Ihre Websites und Apps einbinden. Mit IMA SDKs können Anzeigen von jedem VAST-konformen Ad-Server angefordert und die Anzeigenwiedergabe in Ihren Apps verwaltet werden. Mit IMA DAI SDKs senden Apps eine Streamanfrage für Anzeigen- und Contentvideos – entweder VOD- oder Liveinhalte. Das SDK gibt dann einen kombinierten Videostream zurück, sodass Sie das Umschalten zwischen Anzeigen- und Inhaltsvideo in Ihrer App nicht verwalten müssen.

Wählen Sie die DAI-Lösung aus, die Sie interessiert

Full Service Pod-Bereitstellung Cloud Stitching API Live Cloud Stitching API VOD

Mit der Google Cloud Video Stitcher API registrierte VOD-Streams abspielen

In dieser Anleitung wird gezeigt, wie Sie mit dem IMA DAI SDK für HTML5 eine Google Cloud-VOD-Stream-Sitzung anfordern und abspielen.

In diesem Leitfaden wird das grundlegende Beispiel aus dem Leitfaden für den Einstieg für IMA DAI erweitert.

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

Wenn Sie sich eine abgeschlossene Beispielintegration ansehen oder ihr folgen möchten, laden Sie das Cloud Video Stitcher-Beispiel für HLS oder DASH herunter.

Hinweis:Das IMA DAI SDK für HTML5 unterstützt sowohl HLS- als auch DASH-Streams. Für die Wiedergabe ist jedoch ein anderer Mediaplayer oder eine andere Erweiterung wie HLS.js oder DASH.js mit unterschiedlichen Implementierungen erforderlich.

In diesem Leitfaden wird beschrieben, wie Sie HLS.js und das IMA DAI SDK konfigurieren, um einen HLS-Stream abzuspielen. Außerdem finden Sie wichtige Hinweise zu Implementierungsunterschieden für DASH.

Die IMA DASH.js-Beispiel-App kann als Ausgangspunkt für die Implementierung von DASH-DAI-Streams mit IMA dienen.

Google Cloud-Projekt einrichten

Google Cloud-Projekt einrichten und Dienstkonten für den Zugriff auf das Projekt konfigurieren

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

Standort

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

Projektnummer

Die Google Cloud-Projektnummer für die Video Stitcher API: PROJECT_NUMBER

OAuth-Token

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

OAUTH_TOKEN

Weitere Informationen zum Erstellen kurzlebiger OAuth-Tokens 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

VOD-Konfigurations-ID

Die VOD-Konfigurations-ID für den VOD-Stream: VOD_CONFIG_ID

Weitere Informationen zum Erstellen der VOD-Konfigurations-ID finden Sie im Leitfaden zum Erstellen einer VOD-Konfiguration für Cloud Stitching.

Entwicklungsumgebung konfigurieren

Wichtig: Die IMA DAI-Klasse VideoStitcherVodStreamRequest unterstützt sowohl HLS-Streams als auch DASH-Streams mit mehreren Zeiträumen. Werbeunterbrechungen werden nur zwischen DASH-Zeiträumen eingefügt.

In den IMA-Beispiel-Apps werden nur HLS-Streamanfragen veranschaulicht. Sie können weiterhin DASH-Streams verwenden, wenn Sie die VideoStitcherVodStreamRequest-Klasse erstellen. Wenn Sie Ihren DASH-kompatiblen Player einrichten, müssen Sie einen Listener für die Fortschrittsereignisse Ihres Videoplayers einrichten, der die Metadaten des Videos an StreamManager.processMetadata() übergeben kann. Diese Funktion verwendet drei Parameter:

1. type: Ein String, der für HLS-Streams auf 'ID3' und für DASH-Streams auf 'urn:google:dai:2018' festgelegt werden muss.

2. data: Bei DASH-Ereignisnachrichten ist dies der Nachrichtendatenstring.

3. timestamp: Eine Zahl, die die Startzeit der Ereignisnachricht für DASH-Streams angibt.

Senden Sie die Metadaten so schnell und so oft wie möglich, sobald sie durch Ihre Player-Ereignisse bereitgestellt werden können. Wenn Metadaten fehlen oder nicht korrekt sind, werden mit dem IMA DAI SDK möglicherweise keine Anzeigenereignisse ausgelöst, was zu falsch gemeldeten Anzeigenereignissen führt.

Laden Sie die IMA DAI-Beispiele für HTML5 herunter und extrahieren Sie die hls_js/simple-Beispiel-ZIP-Datei in einen neuen Ordner. Dieses Beispiel ist eine Web-App, die Sie zu Testzwecken lokal hosten können.

Wenn Sie das Beispiel lokal hosten möchten, wechseln Sie zum neuen Ordner 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. Ihr Browser muss die HLS.js-Bibliothek unterstützen.

Wenn alles richtig funktioniert, wird durch Klicken auf die Wiedergabeschaltfläche im Videoplayer der Kurzfilm „Tears of Steel“ mit Werbeunterbrechungen alle 30 Sekunden gestartet.

VOD-Stream anfordern

Wenn Sie den Beispielstream durch Ihren VOD-Stream mit eingefügten Anzeigen ersetzen möchten, verwenden Sie die Klasse VideoStitcherVodStreamRequest, um automatisch eine Anzeigensitzung mit Google Ad Manager zu erstellen. In der Google Ad Manager-Benutzeroberfläche können Sie die generierten DAI-Sitzungen aufrufen, um sie zu überwachen und Fehler zu beheben.

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, die ein VideoStitcherVodStreamRequest-Objekt zurückgibt.

Beispiel:

// StreamManager which will be used to request DAI 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() {
  requestVodVideoStitcherStream();

  playButton.style.display = "none";
  playButton.removeEventListener('click', initiatePlayback);
  playButton.addEventListener('click', resumePlayback);
}
...
function requestVodVideoStitcherStream() {
  const streamRequest = new google.ima.dai.api.VideoStitcherVodStreamRequest();
  streamRequest.vodConfigId = 'VOD_CONFIG_ID';
  streamRequest.region = 'LOCATION';
  streamRequest.projectNumber = 'PROJECT_NUMBER';
  streamRequest.oAuthToken = 'OAUTH_TOKEN';
  streamRequest.networkCode = 'NETWORK_CODE';

  streamManager.requestStream(streamRequest);
}

Aktualisieren Sie die Seite. Anschließend können Sie den benutzerdefinierten VOD-Stream anfordern und abspielen.

(Optional) Optionen für die Streaming-Sitzung hinzufügen

Sie können Ihre Streamanfrage anpassen, indem Sie Sitzungsoptionen hinzufügen, um die Standardkonfiguration der Cloud Video Stitcher API mit VideoStitcherVodStreamRequest.videoStitcherSessionOptions zu überschreiben. Wenn Sie eine nicht erkannte Option angeben, antwortet die Cloud Video Stitcher API mit einem HTTP-Fehler 400. Weitere Informationen finden Sie im Leitfaden zur Fehlerbehebung.

Mit dem folgenden Code-Snippet können Sie beispielsweise die Manifestoptionen überschreiben. Damit werden zwei Streammanifeste mit Darstellungen angefordert, die von der niedrigsten 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": {
    "bitrateOrder": "ascending"
  }
};

streamManager.requestStream(streamRequest);

Bereinigen

Nachdem Sie einen VOD-Stream mit der Google Cloud Video Stitcher API gehostet und mit dem IMA DAI SDK für HTML5 angefordert haben, ist es wichtig, alle Bereitstellungsressourcen zu bereinigen.

Folge der Anleitung zur VOD-Bereinigung, um unnötige Ressourcen und Assets zu entfernen.

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