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 <ph type="x-smartling-placeholder"></ph> 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 kombinierten Videostream, sodass Sie nicht zwischen Anzeige und Contentvideo wechseln müssen. in Ihrer App.

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 VODStreamRequest oder LiveStreamRequest: Ein Objekt, das eine Streamanfrage definiert. Streamanfragen können entweder für On-Demand-Videos oder für Livestreams gelten. Streams. Anfragen geben eine Content-ID sowie einen API-Schlüssel oder ein Authentifizierungstoken und andere Parameter.
StreamManager: Ein Objekt, das Streams zur dynamischen Anzeigenbereitstellung und Interaktionen mit dem Back-End für die dynamische Anzeigenbereitstellung verarbeitet. Die Stream Manager verarbeitet außerdem Tracking-Pings und leitet Stream- und Anzeigenereignisse an den Publisher.

Vorbereitung

Drei leere Dateien <ph type="x-smartling-placeholder">
- dai.html
- dai.css
- dai.js
Python ist auf Ihrem Computer oder ein Webserver zum Testen installiert

Entwicklungsteam starten

Weil das IMA DAI SDK Abhängigkeiten mit demselben Protokoll wie die Seite lädt, aus dem sie geladen wird, müssen Sie Ihre Anwendung mit einem Webserver testen. A können Sie schnell einen lokalen Entwicklungsserver starten, indem Sie Server.

Ü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.
Rufe 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 zu erstellen, das Klick verwendet werden soll. 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 für VOD und Livestreams, die Instanzen von VODStreamRequest und LiveStreamRequest und rufen Sie dann streamManager.requestStream() auf mit den Parametern streamRequest. 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 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, muss Erstellen Sie einen Authentifizierungsschlüssel für die dynamische Anzeigenbereitstellung.

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. Dieses in einem einfachen Beispiel verarbeitet werden: LOADED, ERROR, AD_BREAK_STARTED und AD_BREAK_ENDED durch Aufrufen einer onStreamEvent()-Funktion. Diese Funktion das Laden von Streams und Fehler behandelt und die Steuerelemente des Videoplayers deaktiviert werden. während eine Anzeige wiedergegeben wird. Dies ist für das SDK erforderlich. Wenn der Stream geladen wird, lädt der Videoplayer die angegebene URL und gibt sie über ein loadUrl()-Element wieder .

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! Anzeigen werden jetzt mit dem IMA DAI SDK angefordert und ausgeliefert. Bis Informationen zu erweiterten SDK-Funktionen finden Sie in den anderen Leitfäden oder in den Beispiele auf GitHub