IMA DAI SDK mit einem HTML5-Client verwenden

Livestreams abspielen, die bei der Google Cloud Video Stitcher API registriert sind

In diesem Leitfaden erfahren Sie, wie Sie das IMA DAI SDK für zum Anfordern und Abspielen eines Livestream für ein Ereignis, das für Google Cloud Video Stitcher registriert ist API und erklärt, wie Sie während der Wiedergabe eine Werbeunterbrechung einfügen.

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 Informationen zu clientseitigen SDKs finden Sie unter Interactive Media Ads SDKs.

Google Cloud-Projekt einrichten

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

Standort
Google Cloud-Region in dem die Live-Konfiguration erstellt wurde: LOCATION
Projektnummer
Die Google Cloud-Projektnummer, für die die Video Stitcher API verwendet wird: PROJECT_NUMBER
OAuth-Token

Das kurzlebige OAuth-Token eines Dienstkontos mit dem Video Stitcher-Nutzer Rolle: 

OAUTH_TOKEN

Weitere Informationen zu Erstellen kurzlebiger Anmeldedaten für einen Dienst Konten Das OAuth-Token kann für mehrere Anfragen wiederverwendet werden, solange abgelaufen.

Netzwerkcode

Ad Manager-Netzwerkcode für die Anzeigenanfragen: NETWORK_CODE

Live-Konfigurations-ID
Die Live-Konfigurations-ID, die Sie beim Erstellen Ihrer Livestream-Veranstaltung angegeben haben: LIVE_CONFIG_ID
Benutzerdefinierter Asset-Schlüssel
Der benutzerdefinierte Asset-Schlüssel für Ad Manager, der beim Erstellen eines Konfiguration für eine Livestream-Veranstaltung mit der Video Stitcher API: CUSTOM_ASSET_KEY

Entwicklungsumgebung konfigurieren

In den IMA-Beispielanwendungen werden nur HLS-Streamanfragen dargestellt. Du kannst weiterhin DASH verwenden streamt die VideoStitcherLiveStreamRequest-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' festgelegt werden muss. 'urn:google:dai:2018' für DASH-Streams.

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

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

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 die dynamische Anzeigenbereitstellung von IMA für HTML5 und extrahieren Sie den Einfaches HLS.js-Beispiel in einen neuen Ordner Dieses Beispiel ist eine Web-App, zu Testzwecken lokal hosten.

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 HLS.js unterstützen. Bibliothek.

Wenn alles korrekt funktioniert, klicke im Video auf die Schaltfläche Wiedergabe. Spieler beginnt den Kurzfilm „Tears of Steel“ nach einer kurzen Anzeige. Dieser Inhalt ist über einen VOD-Stream (Video-on-Demand) ausgeliefert.

Livestream anfordern

Wenn du den Beispiel-VOD-Stream durch deinen Livestream ersetzen möchtest, verwende die Methode VideoStitcherLiveStreamRequest die automatisch eine Anzeigensitzung mit Google Ad Manager erstellt. Sie können Verwenden Sie die 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 . Damit es mit der Google Cloud Video Stitcher API funktioniert, benötigen Sie um eine neue Funktion hinzuzufügen, die eine VideoStitcherLiveStreamRequest -Objekt enthält.

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

Für lokale Tests gilt: Wenn sich die Livestream-Dateien in einem Cloud Storage- und müssen dann Aktivieren CORS für den Ursprung http://localhost:8000

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

Optional: Optionen für Streamingsitzungen 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 VideoStitcherLiveStreamRequest.videoStitcherSessionOptions. Wenn Sie eine unbekannte Option angeben, In der Video Stitcher API wird ein HTTP 400-Fehler zurückgegeben. Informationen hierzu finden Sie in der Anleitung zur Fehlerbehebung um Unterstützung zu erhalten.

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

...

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 die aus dem Anzeigen-Tag abgerufenen Anzeigen für jedes Werbeunterbrechung. Werbeunterbrechungen werden im Manifest durch Anzeigenmarkierungen gekennzeichnet. Anzeigenmarkierungen sind die vom Livestreamencoder eingefügt wurden.

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

Bereinigen

Du hast jetzt erfolgreich einen Livestream über die Google Cloud Video Stitcher API und über das IMA DAI SDK angefordert. für HTML5 ist es wichtig, alle Auslieferungen Ressourcen.

Folgen Sie Livestream bereinigen um nicht benötigte Ressourcen und Assets zu entfernen.

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

Zurück
Chromecast
Weiter
iOS