IMA DAI SDK mit einem HTML5-Client verwenden

VOD-Streams wiedergeben, die bei der Google Cloud Video Stitcher API registriert sind

In diesem Leitfaden wird gezeigt, wie du mit dem IMA DAI SDK für HTML5 eine Google Cloud VOD-Stream-Sitzung anforderst und wiedergibst.

Dieser Leitfaden erweitert das grundlegende Beispiel aus dem Abschnitt Erste Schritte Leitfaden für die dynamische Anzeigenbereitstellung mit IMA-Werten.

Informationen zur Integration mit anderen Plattformen oder zur Verwendung des IMA clientseitige SDKs siehe Interactive Media Ads SDKs.

Google Cloud-Projekt einrichten

Geben Sie die folgenden Variablen zur Verwendung im IMA SDK ein:

Standort
Die Google Cloud-Region, in der deine VOD-Konfiguration 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 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 findest du im Leitfaden zum Erstellen einer VOD-Konfiguration für die Cloud-Stitching-Funktion.

Entwicklungsumgebung konfigurieren

Die IMA-Beispiel-Apps zeigen nur HLS-Streamanfragen. Du kannst weiterhin DASH verwenden. streamt die VideoStitcherVodStreamRequest-Klasse. Wann? Einrichten Ihres DASH-kompatiblen Players müssen Sie einen Listener für Ihren Fortschrittsereignisse des Videoplayers, über die die Metadaten des Videos StreamManager.processMetadata() 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 der Startzeit der Ereignisnachricht für DASH-Streams entspricht.

Sende die Metadaten so schnell und so oft, wie deine Spielerereignisse liefern können. Wenn keine Metadaten fehlen oder nicht korrekt sind, löst das IMA DAI SDK möglicherweise keine Anzeigenereignisse aus. die zu falsch gemeldeten Anzeigenereignissen führen.

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

Um das Beispiel lokal zu hosten, wechseln Sie zum neuen Ordner und führen Sie folgenden Befehl aus: Python-Befehl zum Starten eines Webservers:

python3 -m http.server 8000

http.server ist nur in Python 3.x verfügbar. Sie können einen beliebigen anderen Webserver verwenden, wie Apache HTTP Server oder Node.js.

Öffne einen Webbrowser und rufe localhost:8000 auf, um einen Videoplayer aufzurufen. Dein Browser muss die HLS.js-Bibliothek unterstützen.

Wenn alles korrekt funktioniert, klicke im Video auf die Schaltfläche Wiedergabe. beginnt den Kurzfilm „Tears of Steel“ mit Werbeunterbrechungen alle 30 Sekunden.

VOD-Stream anfordern

Wenn du den Beispielstream durch deinen VOD-Stream mit Anzeigen ersetzen möchtest, verwende die Klasse VideoStitcherVodStreamRequest, um automatisch eine Anzeigensitzung mit Google Ad Manager zu erstellen. Sie können auf der Google Ad Manager-Benutzeroberfläche, um die generierten Sitzungen für die dynamische Anzeigenbereitstellung zu finden, um sie für Monitoring und Fehlerbehebung zu nutzen.

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 VideoStitcherVodStreamRequest-Objekt zurückzugeben.

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);
}

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

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

Passen Sie Ihre Streamanfrage an, indem Sie Sitzungsoptionen hinzufügen, um die Standardeinstellung zu überschreiben Konfiguration der Cloud Video Stitcher API mithilfe von VideoStitcherVodStreamRequest.videoStitcherSessionOptions 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.

Beispielsweise können Sie den Parameter Manifestoptionen durch das folgende Code-Snippet, das zwei Streammanifeste mit Wiedergaben werden von der niedrigsten zur höchsten Bitrate sortiert.

...

// 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);

Bereinigen

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

Folgen Sie VOD-Bereinigung um nicht benötigte 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.

Zurück
Chromecast
Weiter
iOS