Diese Seite wurde von der Cloud Translation API übersetzt.

Einführung in das IMA DAI SDK

Mit IMA SDKs können Sie Multimedia-Anzeigen ganz einfach in Ihre 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 stellen Apps eine Streamanfrage für Anzeigen- und Contentvideos – entweder VOD oder Livecontent. Das SDK gibt dann einen kombinierten Videostream zurück, sodass Sie in Ihrer App nicht zwischen Anzeigen- und Contentvideo wechseln müssen.

Wählen Sie die gewünschte Lösung für die dynamische Anzeigenbereitstellung aus.

Dynamische Anzeigenbereitstellung mit Komplettservice

In diesem Leitfaden wird beschrieben, wie Sie das IMA SDK in eine einfache Videoplayer-App integrieren. Wenn Sie sich das einfache Beispiel von GitHub ansehen oder ein fertiges Beispielintegration ansehen möchten, laden Sie es herunter.

IMA DAI – Übersicht

Die Implementierung der IMA DAI umfasst zwei wichtige SDK-Komponenten, wie in dieser Anleitung beschrieben:

StreamRequest – entweder VODStreamRequest oder LiveStreamRequest: Ein Objekt, das eine Streamanfrage definiert. Streamanfragen können für Video-on-Demand- oder Livestreams erfolgen. In den Anfragen werden eine Content-ID, ein API-Schlüssel oder ein Authentifizierungstoken und weitere Parameter angegeben.
StreamManager: Ein Objekt, das Streams zur dynamischen Anzeigenbereitstellung und Interaktionen mit dem Back-End für die dynamische Anzeigenbereitstellung verarbeitet. Außerdem verarbeitet er Tracking-Pings und leitet Stream- und Anzeigenereignisse an den Publisher weiter.

Voraussetzungen

Drei leere Dateien
- dai.html
- dai.css
- dai.js
Python, der auf Ihrem Computer installiert ist, oder ein Webserver zum Testen

Entwicklungsserver starten

Da das IMA SDK Abhängigkeiten mit demselben Protokoll wie die Seite lädt, von der es geladen wird, müssen Sie Ihre Anwendung mit einem Webserver testen. Die einfachste Methode zum Starten eines lokalen Entwicklungsservers ist die Verwendung des integrierten Python-Servers.

Führen Sie über eine Befehlszeile in dem Verzeichnis, das die Datei index.html enthält, folgenden Befehl aus:
```
python -m http.server 8000
```
Hinweis: http.server ist nur in Python 3.x verfügbar.
Rufe in einem Webbrowser http://localhost:8000/ auf.

Du kannst auch einen beliebigen anderen Webserver wie zum Beispiel Apache HTTP Server verwenden.

Einfachen Videoplayer erstellen

Ändern Sie zuerst dai.html, um ein einfaches HTML5-Videoelement und ein div-Element für den Klick zu erstellen. Füge außerdem die Tags hinzu, die zum Laden der Dateien dai.css und dai.js sowie zum Importieren des Videoplayers hls.js erforderlich sind. Ändern Sie dann dai.css, um die Größe und Position der Seitenelemente anzugeben. Definieren Sie schließlich in dai.js Variablen für die Informationen der Streamanfrage und eine initPlayer()-Funktion, die beim Laden der Seite ausgeführt werden soll.

dai.html

<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
  <script src="dai.js"></script>
  <link rel="stylesheet" href="dai.css" type="text/css">
</head>
<body onLoad="initPlayer()">
  <h2>IMA SDK DAI Demo (HLS.JS)</h2>
    <video id="video"></video>
    <div id="ad-ui"></div>
</body>
</html>

dai.css

#video,
#ad-ui {
  width: 640px;
  height: 360px;
  position: absolute;
  top: 35px;
  left: 0;
}

#ad-ui {
  cursor: pointer;
}

dai.js

var BACKUP_STREAM =
    'https://storage.googleapis.com/interactive-media-ads/media/bbb.m3u8'

// Livestream asset key.
var TEST_ASSET_KEY = "sN_IYUG8STe1ZzhIIE_ksA";

// VOD content source and video IDs.
var TEST_CONTENT_SOURCE_ID = "2548831";
var TEST_VIDEO_ID = "tears-of-steel";

var hls = new Hls(); // hls.js video player
var videoElement;
var adUiElement;
var isAdBreak;

function initPlayer() {
  videoElement = document.getElementById('video');
  adUiElement = document.getElementById('adUi');
}

IMA SDK laden

Fügen Sie als Nächstes das IMA-Framework mithilfe eines Skript-Tags in dai.html vor dem Tag für dai.js ein.

dai.html

<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
  <script type="text/javascript" src="//imasdk.googleapis.com/js/sdkloader/ima3_dai.js"></script>
  <script src="dai.js"></script>
  <link rel="stylesheet" href="dai.css" type="text/css">
</head>

StreamManager initialisieren und eine Streamanfrage stellen

Wenn Sie eine Gruppe von Anzeigen anfordern möchten, müssen Sie einen ima.dai.api.StreamManager erstellen. Dieser dient dazu, Streams für die dynamische Anzeigenbereitstellung anzufordern und zu verwalten. Der Konstruktor verwendet ein Videoelement und die resultierende Instanz verwendet ein Anzeigen-UI-Element zur Verarbeitung von Anzeigenklicks.

Definieren Sie dann Funktionen, die Streams anfordern. Dieses Beispiel enthält Funktionen für VOD und Livestreams, die Instanzen von VODStreamRequest bzw. LiveStreamRequest erstellen und dann streamManager.requestStream() mit den Parametern streamRequest aufrufen. Bei Livestreams müssen Sie auch einen Handler hinzufügen, um zeitgesteuerte Metadatenereignisse zu überwachen und die Ereignisse an StreamManager weiterzuleiten. Sie können den Code entsprechend Ihrem Anwendungsfall kommentieren oder die Kommentarzeichen entfernen. Für beide Methoden wird ein optionaler API-Schlüssel benötigt. Wenn Sie einen geschützten Stream verwenden, müssen Sie einen Authentifizierungsschlüssel für die dynamische Anzeigenbereitstellung erstellen.

Keiner der Streams ist in diesem Beispiel geschützt. Daher wird apiKey nicht verwendet.

dai.js

function initPlayer() {
  videoElement = document.getElementById('video');
  adUiElement = document.getElementById('adUi');
  streamManager = new google.ima.dai.api.StreamManager(videoElement, adUiElement)

  // Timed metadata is only used for LIVE streams.
  hls.on(Hls.Events.FRAG_PARSING_METADATA, function(event, data) {
    if (streamManager && data) {
      // For each ID3 tag in the metadata, 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);
      });
    }
  });

  requestVODStream(TEST_CONTENT_SOURCE_ID, TEST_VIDEO_ID, null);
  // Uncomment the line below and comment out the one above to request a
  // LIVE stream instead of a VOD stream.
  //requestLiveStream(TEST_ASSET_KEY, null);
}

function requestVODStream(cmsId, videoId, apiKey) {
  var streamRequest = new google.ima.dai.api.VODStreamRequest();
  streamRequest.contentSourceId = cmsId;
  streamRequest.videoId = videoId;
  streamRequest.apiKey = apiKey;
  streamManager.requestStream(streamRequest);
}

function requestLiveStream(assetKey, apiKey) {
  var streamRequest = new google.ima.dai.api.LiveStreamRequest();
  streamRequest.assetKey = assetKey;
  streamRequest.apiKey = apiKey;
  streamManager.requestStream(streamRequest);
}

Streamereignisse verarbeiten

Schließlich müssen Sie Event-Listener für wichtige Videoereignisse implementieren. In diesem einfachen Beispiel werden die Ereignisse LOADED, ERROR, AD_BREAK_STARTED und AD_BREAK_ENDED durch Aufrufen einer onStreamEvent()-Funktion verarbeitet. Mit dieser Funktion werden das Laden von Streams und Fehler behoben. Außerdem werden die Steuerelemente des Videoplayers während der Wiedergabe einer Anzeige deaktiviert, was vom SDK erforderlich ist. Wenn der Stream geladen wird, lädt der Videoplayer die angegebene URL mithilfe einer loadUrl()-Funktion und spielt sie wieder.

Sie können auch Event-Listener für die pause- und start-Ereignisse des Videoelements einrichten, damit der Nutzer die Wiedergabe fortsetzen kann, wenn die IMA während der Werbeunterbrechungen pausiert wird.

Damit Sie die dynamische Anzeigenbereitstellung nutzen können, muss Ihr benutzerdefinierter Player ID3-Ereignisse für Livestreams an die IMA SDKs übergeben, wie im Beispielcode gezeigt.

dai.js

var isAdBreak;

function initPlayer() {
  videoElement = document.getElementById('video');
  adUiElement = document.getElementById('adUi');
  streamManager = new google.ima.dai.api.StreamManager(videoElement, adUiElement);
  videoElement.addEventListener('pause', onStreamPause);
  videoElement.addEventListener('play', onStreamPlay);

  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);
...
function onStreamEvent(e) {
  switch (e.type) {
    case google.ima.dai.api.StreamEvent.Type.LOADED:
      console.log('Stream loaded');
      loadUrl(e.getStreamData().url);
      break;
    case google.ima.dai.api.StreamEvent.Type.ERROR:
      console.log('Error loading stream, playing backup stream.' + e);
      loadUrl(BACKUP_STREAM);
      break;
    case google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED:
      console.log('Ad Break Started');
      isAdBreak = true;
      videoElement.controls = false;
      adUiElement.style.display = 'block';
      break;
    case google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED:
      console.log('Ad Break Ended');
      isAdBreak = false;
      videoElement.controls = true;
      adUiElement.style.display = 'none';
      break;
    default:
      break;
  }
}

function loadUrl(url) {
  console.log('Loading:' + url);
  hls.loadSource(url);
  hls.attachMedia(videoElement);
  hls.on(Hls.Events.MANIFEST_PARSED, function() {
    console.log('Video Play');
    videoElement.play();
  });
}

function onStreamPause() {
  console.log('paused');
  if (isAdBreak) {
    videoElement.controls = true;
    adUiElement.style.display = 'none';
  }
}

function onStreamPlay() {
  console.log('played');
  if (isAdBreak) {
    videoElement.controls = false;
    adUiElement.style.display = 'block';
  }
}

Fertig! Sie fordern und schalten Anzeigen jetzt mit dem IMA SDK. Informationen zu erweiterten SDK-Funktionen finden Sie in den anderen Leitfäden oder in den Beispielen auf GitHub.