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. IMA SDKs können Anzeigen von jedem VAST-kompatiblen Ad-Server anfordern und die Anzeigenwiedergabe in Ihren Apps verwalten. Mit IMA DAI SDKs senden Apps Streamanfragen für Anzeigen- und Contentvideos – entweder für VOD oder Livecontent. Das SDK gibt dann einen kombinierten Videostream zurück, sodass Sie in Ihrer App nicht mehr zwischen Anzeige- und Contentvideo wechseln müssen.

Gewünschte Lösung für die dynamische Anzeigenbereitstellung auswählen

Dynamische Anzeigenbereitstellung mit Komplettservice

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

Dynamische Anzeigenbereitstellung mit IMA – Übersicht

Die Implementierung des IMA DAI SDK umfasst zwei Hauptkomponenten:

StreamRequest – entweder VODStreamRequest oder LiveStreamRequest: Ein Objekt, das eine Streamanfrage definiert. Streamanfragen können entweder für Video-on-Demand oder Livestreams gelten. Anfragen geben eine Content-ID, einen API-Schlüssel oder ein Authentifizierungstoken und andere Parameter an.
StreamManager: Ein Objekt, das Streams zur dynamischen Anzeigenbereitstellung und Interaktionen mit dem Back-End für die dynamische Anzeigenbereitstellung verarbeitet. Er verarbeitet auch Tracking-Pings und leitet Stream- und Anzeigenereignisse an den Publisher weiter.

Voraussetzungen

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

Entwicklungsteam starten

Da das IMA DAI SDK Abhängigkeiten mit demselben Protokoll wie die Seite lädt, von der es geladen wird, müssen Sie Ihre App mit einem Webserver testen. Eine schnelle Möglichkeit, einen lokalen Entwicklungsteam zu starten, ist die Verwendung des integrierten Python-Servers.

Führen Sie in einer 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.

Sie können auch einen beliebigen anderen Webserver verwenden, z. B. den Apache HTTP Server.

Einfachen Videoplayer erstellen

Ändern Sie zuerst dai.html, um ein einfaches HTML5-Videoelement und ein div-Element für den Klick zu erstellen. Fügen Sie außerdem die erforderlichen Tags hinzu, um die Dateien dai.css und dai.js zu laden und den Videoplayer hls.js zu importieren. Ändern Sie dann dai.css, um die Größe und Position der Seitenelemente anzugeben. Definieren Sie schließlich in dai.js Variablen zum Speichern der Informationen zur Streamanfrage und eine initPlayer()-Funktion, die beim Laden der Seite ausgeführt wird.

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 DAI 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 DAI SDK laden

Als Nächstes fügen Sie 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 Streamanfrage stellen

Wenn Sie eine Gruppe von Anzeigen anfordern möchten, müssen Sie einen ima.dai.api.StreamManager erstellen, der für das Anfordern und Verwalten von Streams für die dynamische Anzeigenbereitstellung zuständig ist. Der Konstruktor verwendet ein Videoelement und in der resultierenden Instanz wird ein UI-Element für die Anzeige verwendet, um Anzeigenklicks zu verarbeiten.

Definieren Sie dann Funktionen, die Streams anfordern. Dieses Beispiel enthält Funktionen für VOD und Livestreams, die Instanzen von VODStreamRequest und LiveStreamRequest erstellen und dann streamManager.requestStream() mit den streamRequest-Parametern aufrufen. Bei Livestreams müssen Sie außerdem einen Handler hinzufügen, um zeitgesteuerte Metadatenereignisse zu überwachen und die Ereignisse an die 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 verwendet. Wenn Sie einen geschützten Stream verwenden, müssen Sie einen Authentifizierungsschlüssel für die dynamische Anzeigenbereitstellung erstellen.

In diesem Beispiel ist keiner der Streams geschützt. Deshalb 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 Ereignis-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. Diese Funktion verarbeitet das Laden des Streams und Fehler. Außerdem werden die Steuerelemente des Videoplayers deaktiviert, während eine Anzeige wiedergegeben wird. Dies ist für das SDK erforderlich. Beim Laden des Streams wird die bereitgestellte URL im Videoplayer geladen und mithilfe einer loadUrl()-Funktion wiedergegeben.

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

Damit die dynamische Anzeigenbereitstellung verwendet werden kann, muss Ihr benutzerdefinierter Player ID3-Ereignisse für Livestreams an die IMA DAI 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 jetzt Anzeigen mit dem IMA DAI SDK an und schalten diese ein. Weitere Informationen zu erweiterten SDK-Funktionen finden Sie in den anderen Leitfäden oder in den Beispielen auf GitHub.