Mit Full-Service-DAI einrichten

Plattform auswählen: HTML5 Android iOS tvOS Cast Roku

In diesem Leitfaden wird gezeigt, wie Sie das IMA DAI SDK in eine Videoplayer-App einbinden. Wenn Sie sich eine vollständige Beispielintegration ansehen oder nachvollziehen möchten, laden Sie das einfache Beispiel von GitHub herunter.

IMA DAI – Übersicht

Die Implementierung des IMA DAI SDK umfasst zwei Hauptkomponenten, die in diesem Leitfaden beschrieben werden:

  • StreamRequest: entweder ein VODStreamRequest oder ein LiveStreamRequest. Ein Objekt, das eine Streamanfrage definiert. Streamanfragen können entweder für Video-on-Demand- oder Livestreams gestellt werden. Bei Livestream-Anfragen wird ein Asset-Schlüssel angegeben, bei VOD-Anfragen eine CMS-ID und eine Video-ID. Beide Anfragetypen können optional einen API-Schlüssel enthalten, der für den Zugriff auf bestimmte Streams erforderlich ist, sowie einen Google Ad Manager-Netzwerkcode, damit das IMA SDK Anzeigenkennungen gemäß den Google Ad Manager-Einstellungen verarbeiten kann.
  • StreamManager: Ein Objekt, das Streams für die dynamische Anzeigenbereitstellung und Interaktionen mit dem Backend für die dynamische Anzeigenbereitstellung verarbeitet. Der Stream-Manager verarbeitet auch Tracking-Pings und leitet Stream- und Anzeigenereignisse an den Publisher weiter.

Vorbereitung

  • Drei leere Dateien
    • dai.html
    • dai.css
    • dai.js
  • Python auf Ihrem Computer oder einen 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. Eine schnelle Möglichkeit, einen lokalen Entwicklungsserver zu starten, ist die Verwendung des integrierten Python-Servers.

  1. Führen Sie in der Befehlszeile im Verzeichnis, das die Datei index.html enthält, Folgendes aus:

    python -m http.server 8000

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

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

Videoplayer erstellen

Ändern Sie zuerst dai.html, um ein HTML5-Videoelement und ein div-Element für die Klick-URL zu erstellen. Im folgenden Beispiel wird das IMA DAI SDK importiert. Weitere Informationen finden Sie unter IMA DAI SDK importieren.

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 für die Informationen zur Streamanfrage und eine initPlayer()-Funktion, die beim Seitenaufbau ausgeführt werden soll. Richten Sie außerdem den Wiedergabebutton so ein, dass beim Klicken ein Stream angefordert wird.

<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
  <script src="//imasdk.googleapis.com/js/sdkloader/ima3_dai.js"></script>
  <script src="dai.js"></script>
  <link rel="stylesheet" href="dai.css">
</head>
<body onLoad="initPlayer()">
  <h2>IMA SDK DAI Demo (HLS.JS)</h2>
  <video id="video"></video>
  <div id="adUi"></div>
  <button id="play-button">Play</button>
</body>
</html>


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

#adUi {
  cursor: pointer;
}

#play-button {
  position: absolute;
  top: 400px;
  left: 15px;
}

// This stream will be played if ad-enabled playback fails.
const BACKUP_STREAM =
    'http://storage.googleapis.com/testtopbox-public/video_content/bbb/' +
    'master.m3u8';

// Live stream asset key.
// const TEST_ASSET_KEY = 'c-rArva4ShKVIAkNfy6HUQ';

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

// Ad Manager network code.
const NETWORK_CODE = '21775744923';
const API_KEY = null;

// StreamManager which will be used to request ad-enabled streams.
let streamManager;

// hls.js video player
const hls = new Hls();

// Video element
let videoElement;

// Ad UI element
let adUiElement;

// The play/resume button
let playButton;

// Whether the stream is currently in an ad break.
let adBreak = false;

/**
 * Initializes the video player.
 */
function initPlayer() {
  videoElement = document.getElementById('video');
  playButton = document.getElementById('play-button');
  adUiElement = document.getElementById('adUi');
  createStreamManager();
  listenForMetadata();

  // Show the video controls when the video is paused during an ad break,
  // and hide them when ad playback resumes.
  videoElement.addEventListener('pause', () => {
    if (adBreak) {
      showVideoControls();
    }
  });
  videoElement.addEventListener('play', () => {
    if (adBreak) {
      hideVideoControls();
    }
  });

  playButton.addEventListener('click', () => {
    console.log('initiatePlayback');
    requestStream();
    // Hide this play button after the first click to request the stream.
    playButton.style.display = 'none';
  });
}

Wenn die Wiedergabe während pausierter Werbeunterbrechungen fortgesetzt werden soll, richten Sie Event-Listener für die Ereignisse pause und start des Videoelements ein, um die Steuerelemente des Videoplayers ein- und auszublenden.

/**
 * Hides the video controls.
 */
function hideVideoControls() {
  videoElement.controls = false;
  adUiElement.style.display = 'block';
}

/**
 * Shows the video controls.
 */
function showVideoControls() {
  videoElement.controls = true;
  adUiElement.style.display = 'none';
}

IMA DAI SDK laden

Fügen Sie als Nächstes das IMA-Framework mit einem Script-Tag in dai.html vor dem Tag für dai.js hinzu.

<script src="//imasdk.googleapis.com/js/sdkloader/ima3_dai.js"></script>

StreamManager initialisieren

Wenn Sie eine Reihe von Anzeigen anfordern möchten, erstellen Sie ein ima.dai.api.StreamManager, das für das Anfordern und Verwalten von Streams für die dynamische Anzeigenbereitstellung verantwortlich ist. Der Konstruktor verwendet ein Videoelement und ein Anzeigen-UI-Element, um Anzeigenklicks zu verarbeiten.

/**
 * Create the StreamManager and listen to stream events.
 */
function createStreamManager() {
  streamManager =
      new google.ima.dai.api.StreamManager(videoElement, adUiElement);
  streamManager.addEventListener(
      google.ima.dai.api.StreamEvent.Type.LOADED, onStreamEvent);
  streamManager.addEventListener(
      google.ima.dai.api.StreamEvent.Type.ERROR, onStreamEvent);
  streamManager.addEventListener(
      google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED, onStreamEvent);
  streamManager.addEventListener(
      google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED, onStreamEvent);
}

Streamanfrage stellen

Definieren Sie Funktionen zum Anfordern von Streams. Dieses Beispiel enthält Funktionen für VOD und Livestreams, die Instanzen der Klasse VODStreamRequest und der Klasse LiveStreamRequest erstellen. Nachdem Sie die streamRequest-Instanz erstellt haben, rufen Sie die Methode streamManager.requestStream() mit der Streamanfrageinstanz auf.

/**
 * Makes a stream request and plays the stream.
 */
function requestStream() {
  requestVODStream(TEST_CONTENT_SOURCE_ID, TEST_VIDEO_ID, NETWORK_CODE, API_KEY);
  // Uncomment line below and comment one above to request a LIVE stream.
  // requestLiveStream(TEST_ASSET_KEY, NETWORK_CODE, API_KEY);
}

/**
 * Requests a Live stream with ads.
 * @param {string} assetKey
 * @param {?string} networkCode
 * @param {?string} apiKey
 */
function requestLiveStream(assetKey, networkCode, apiKey) {
  const streamRequest = new google.ima.dai.api.LiveStreamRequest();
  streamRequest.assetKey = assetKey;
  streamRequest.networkCode = networkCode;
  streamRequest.apiKey = apiKey;
  streamManager.requestStream(streamRequest);
}

/**
 * Requests a VOD stream with ads.
 * @param {string} cmsId
 * @param {string} videoId
 * @param {?string} networkCode
 * @param {?string} apiKey
 */
function requestVODStream(cmsId, videoId, networkCode, apiKey) {
  const streamRequest = new google.ima.dai.api.VODStreamRequest();
  streamRequest.contentSourceId = cmsId;
  streamRequest.videoId = videoId;
  streamRequest.networkCode = networkCode;
  streamRequest.apiKey = apiKey;
  streamManager.requestStream(streamRequest);
}

Beide Streamanfragemethoden akzeptieren einen optionalen API-Schlüssel. Wenn Sie einen geschützten Stream verwenden, müssen Sie einen Authentifizierungsschlüssel für die dynamische Anzeigenbereitstellung erstellen. Weitere Informationen finden Sie unter Anfragen für Videostreams der dynamischen Anzeigenbereitstellung authentifizieren. Keiner der Streams in diesem Beispiel ist mit einem Authentifizierungsschlüssel für die dynamische Anzeigenbereitstellung geschützt. Daher wird apiKey nicht verwendet.

Stream-Metadaten parsen

Außerdem müssen Sie einen Handler hinzufügen, der auf zeitgesteuerte Metadatenereignisse wartet und die Ereignisse an die Klasse StreamManager weiterleitet, damit IMA während Werbeunterbrechungen Anzeigenereignisse ausgeben kann:

/**
 * Set up metadata listeners to pass metadata to the StreamManager.
 */
function listenForMetadata() {
  // Timed metadata is handled differently by different video players, and the
  // IMA SDK provides two ways to pass in metadata,
  // StreamManager.processMetadata() and StreamManager.onTimedMetadata().
  //
  // Use StreamManager.onTimedMetadata() if your video player parses
  // the metadata itself.
  // Use StreamManager.processMetadata() if your video player provides raw
  // ID3 tags, as with hls.js.
  hls.on(Hls.Events.FRAG_PARSING_METADATA, function(event, data) {
    if (streamManager && data) {
      // For each ID3 tag in our metadata, we 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);
      });
    }
  });
}

In diesem Leitfaden wird der hls.js-Player für die Streamwiedergabe verwendet. Die Implementierung der Metadaten hängt jedoch vom verwendeten Player-Typ ab.

Streamereignisse verarbeiten

Implementieren Sie Event-Listener für wichtige Videoereignisse. In diesem 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, die Behandlung von Streamfehlern und das Deaktivieren der Steuerelemente des Videoplayers während der Anzeigenwiedergabe, was für das IMA SDK erforderlich ist.

/**
 * Responds to a stream event.
 * @param {!google.ima.dai.api.StreamEvent} e
 */
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');
      adBreak = true;
      hideVideoControls();
      break;
    case google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED:
      console.log('Ad Break Ended');
      adBreak = false;
      showVideoControls();
      break;
    default:
      break;
  }
}

/**
 * Loads and plays a Url.
 * @param {string} url
 */
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();
  });
}

Wenn der Stream geladen ist, lädt der Videoplayer die angegebene URL und gibt sie mit einer loadUrl()-Funktion wieder.

Geschafft! Sie können jetzt Anzeigen mit dem IMA DAI SDK anfordern und anzeigen lassen. Weitere Informationen zu erweiterten SDK-Funktionen finden Sie in den anderen Leitfäden oder in den Beispielen auf GitHub.