Jetzt starten

Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.

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-SDKs für die dynamische Anzeigenbereitstellung stellen Apps eine Streamanfrage für Anzeigen- und Contentvideos – VOD- oder Livecontent. Das SDK gibt dann einen kombinierten Videostream zurück, damit Sie nicht mehr zwischen Anzeigen- und Contentvideos in Ihrer App wechseln müssen.

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

IMA-Plattform für die dynamische Anzeigenbereitstellung

Die Implementierung der IMA-DJs umfasst zwei wichtige SDK-Komponenten, die in diesem Leitfaden vorgestellt werden:

  • StreamRequest: entweder VODStreamRequest oder LiveStreamRequest: ein Objekt, das eine Streamanfrage definiert. Streamanfragen können für Video-on-Demand- oder Livestreams erfolgen. Anfragen geben eine Content-ID sowie einen API-Schlüssel oder ein Authentifizierungstoken und andere Parameter an.
  • StreamManager: Ein Objekt, das dynamische Anzeigenbereitstellungsstreams und Interaktionen mit dem Back-End für die dynamische Anzeigenbereitstellung verarbeitet. Der Stream-Manager verarbeitet außerdem Tracking-Pings und leitet Stream- und Anzeigenereignisse an den Publisher weiter.

Voraussetzungen

Für den Start ist Folgendes erforderlich:

  • Drei leere Dateien
    • dai.html
    • dai.css
    • Dai.js
  • Auf Ihrem Computer installierter Python-Code oder ein Webserver zum Testen

1. Entwicklungsserver starten

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

  1. Verwenden Sie eine Befehlszeile aus dem Verzeichnis, das die Datei index.html enthält:

    python -m http.server 8000

  2. Rufe in einem Webbrowser http://localhost:8000/ auf.

Sie können auch einen beliebigen anderen Webserver wie den Apache-HTTP-Server verwenden.

2. 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 abschließend in dai.js Variablen für die 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 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'

// Live stream asset key.
var TEST_ASSET_KEY = "sN_IYUG8STe1ZzhIIE_ksA";

// VOD content source and video IDs.
var TEST_CONTENT_SOURCE_ID = "2528370";
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');
}

3. 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>

...

4. StreamManager initialisieren und eine Streamanfrage stellen

Wenn Sie eine Reihe von Anzeigen anfordern möchten, erstellen Sie einen ima.dai.api.StreamManager. Dieser ist für das Anfordern und Verwalten von Streams für die dynamische Anzeigenbereitstellung verantwortlich. Der Konstruktor verwendet ein Videoelement und die resultierende Instanz ein Anzeigen-UI-Element, 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 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 für Ihren Anwendungsfall kommentieren oder die Kommentarzeichen entfernen. Beide Methoden verwenden einen optionalen API-Schlüssel. Wenn Sie einen verschlüsselten Stream verwenden, müssen Sie einen Authentifizierungsschlüssel für die dynamische Anzeigenbereitstellung erstellen.

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

5. 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 übernimmt das Laden des Streams und Fehler und deaktiviert die Player-Steuerelemente, während eine Anzeige wiedergegeben wird. Dies ist für das SDK erforderlich. Beim Laden des Streams wird die bereitgestellte URL mit einer loadUrl()-Funktion geladen und wiedergegeben.

Außerdem sollten Sie Ereignis-Listener für die Ereignisse pause und start des Videoelements einrichten, damit der Nutzer die Wiedergabe fortsetzen kann, wenn das IMA-Element während der Werbeunterbrechungen pausiert wird.

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