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 beliebigen VAST-kompatiblen Ad-Server bereitstellen und die Anzeigenwiedergabe in Ihren Apps verwalten. Mit IMA SDKs für die dynamische Anzeigenbereitstellung Streamanfrage für Anzeigen- und Contentvideo (VOD- oder Livecontent) Das SDK gibt dann einen kombinierten Videostream zurück, sodass Sie in Ihrer App nicht zwischen Anzeigen- und Inhaltsvideo wechseln müssen.

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

Dynamische Anzeigenbereitstellung mit Komplettservice

In diesem Leitfaden wird gezeigt, wie Sie das IMA DAI SDK in ein einfaches Video integrieren. Player-App. Wenn Sie sich eine fertige Stichprobe ansehen oder mit ihr einhergehen möchten -Integration, laden Sie die einfaches Beispiel von GitHub.

Dynamische Anzeigenbereitstellung mit IMA – Übersicht

Die Implementierung des IMA DAI SDK umfasst zwei Hauptkomponenten: diesem Leitfaden:

StreamRequest – entweder ein VODStreamRequest oder ein LiveStreamRequest: Ein Objekt, das eine Streamanfrage definiert. Streamanfragen können sich auf Video-on-Demand- oder Livestreams beziehen. In Anfragen werden eine Content-ID sowie ein API-Schlüssel oder ein Authentifizierungstoken und andere Parameter angegeben.
StreamManager: Ein Objekt, das Streams für die dynamische Anzeigenbereitstellung und Interaktionen mit dem DAI-Backend verarbeitet. Die Stream Manager verarbeitet auch Tracking-Pings und leitet Stream- und Anzeigenereignisse an den Publisher.

Vorbereitung

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

Entwicklungsserver starten

Da das IMA DAI SDK Abhängigkeiten mit demselben Protokoll wie die Seite lädt, von der es geladen wird, müssen Sie einen Webserver verwenden, um Ihre App zu testen. Sie können einen lokalen Entwicklungsserver schnell starten, indem Sie den integrierten Server von Python verwenden.

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

Sie können auch einen beliebigen anderen Webserver verwenden, beispielsweise 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 zum Laden von dai.css hinzu. und dai.js-Dateien zu speichern und den hls.js-Videoplayer zu importieren. Gehen Sie dann so vor: Ändern Sie dai.css, um die Größe und Position der Seitenelemente anzugeben. Definieren Sie schließlich in dai.js Variablen für die Streamanfrage. und einer 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 hinzu. für dai.js.

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

Um eine Gruppe von Anzeigen anzufordern, erstellen Sie eine ima.dai.api.StreamManager, die ist für das Anfordern und Verwalten von Streams für die dynamische Anzeigenbereitstellung zuständig. Der Konstruktor nimmt eine und in der sich daraus ergebenden Instanz wird ein UI-Element zur Verarbeitung der Anzeige verwendet. Klicks.

Definieren Sie dann Funktionen, die Streams anfordern. Dieses Beispiel enthält Funktionen sowohl für VOD als auch für Livestreams, die jeweils Instanzen von VODStreamRequest und LiveStreamRequest erstellen und dann streamManager.requestStream() mit den streamRequest-Parametern aufrufen. Für Livestreams musst du außerdem eine Handler zum Abhören zeitgesteuerter Metadatenereignisse und Weiterleiten der Ereignisse an den StreamManager Sie können den Code kommentieren oder den Kommentar entfernen, um ihn an Ihren Anwendungsfall anzupassen. Für beide Methoden wird ein optionaler API-Schlüssel verwendet. Wenn du einen geschützten Stream verwendest, musst du einen Authentifizierungsschlüssel für die dynamische Anzeigenbereitstellung erstellen.

Keiner der Streams in diesem Beispiel ist 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);
}

Stream-Ereignisse 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 kümmert sich um das Stream-Laden und Fehler und deaktiviert die Playersteuerung, während eine Anzeige wiedergegeben wird. Das ist vom SDK erforderlich. Wenn der Stream geladen wird, lädt der Videoplayer die angegebene URL mit einer loadUrl()-Funktion und spielt sie ab.

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

Damit die dynamische Anzeigenbereitstellung verwendet werden kann, muss Ihr benutzerdefinierter Player ID3-Ereignisse für Livestreams übergeben den IMA SDKs für die dynamische Anzeigenbereitstellung hinzugefügt werden, wie im Beispielcode dargestellt.

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 über das IMA DAI SDK an und schalten sie aus. Weitere Informationen zu erweiterten SDK-Funktionen finden Sie in den anderen Anleitungen oder in den Beispielen auf GitHub.