Se usó la API de Cloud Translation para traducir esta página.

Cómo comenzar a usar el SDK de IMA de DAI

Los SDK de IMA facilitan la integración de anuncios multimedia en sus sitios web y aplicaciones. Los SDK de IMA pueden solicitar anuncios de cualquier servidor de anuncios compatible con VAST y administra la reproducción de anuncios en tus apps. Con los SDK de IMA de DAI, las aplicaciones solicitud de transmisión para anuncios y videos de contenido, ya sea VOD o contenido en vivo. Luego, el SDK muestra un una transmisión de video por Internet combinada, de modo que no tenga que administrar el cambio entre el video del anuncio y el de contenido dentro de la app.

Selecciona la solución de DAI que te interesa

DAI de servicio completo

En esta guía, se muestra cómo integrar el SDK de IMA de DAI en un video simple de reproducción de video. Si quieres ver o seguir una muestra completa integración, descarga el ejemplo simple de GitHub.

Descripción general de IMA de DAI

La implementación del SDK de IMA de DAI incluye dos componentes principales, como se demuestra en esta guía:

StreamRequest, ya sea VODStreamRequest o LiveStreamRequest: Un objeto que define una solicitud de transmisión. Las solicitudes de transmisión pueden ser de video on demand o en vivo. transmisiones continuas. Las solicitudes especifican un ID de contenido, así como una clave de API o un token de autenticación y otros parámetros.
StreamManager Es un objeto que administra interacciones y transmisiones de inserción de anuncios dinámicos con el backend de DAI. El Además, administra el seguimiento de los pings y reenvía la transmisión y los eventos de anuncios al publicador.

Requisitos previos

Tres archivos vacíos
- dai.html
- dai.css
- dai.js
Python instalado en tu computadora, o un servidor web para usar en las pruebas

Inicia un servidor de desarrollo

Dado que el SDK de DAI de IMA carga las dependencias con el mismo protocolo que la página. desde la cual se carga, debes usar un servidor web para probar tu app. R una forma rápida de iniciar un servidor de desarrollo local es usar la clave servidor.

Con una línea de comandos, desde el directorio que contiene tu archivo index.html ejecuta lo siguiente:
```
python -m http.server 8000
```
Nota: http.server solo está disponible en Python 3.x.
En un navegador web, ve a http://localhost:8000/.

También puedes utilizar cualquier otro servidor web, como el servidor HTTP de Apache Servidor.

Cómo crear un reproductor de video simple

Primero, modifica dai.html para crear un elemento de video HTML5 simple y un div para usar para el porcentaje de clics. Además, agrega las etiquetas necesarias para cargar el archivo dai.css. y dai.js, y también importar el reproductor de video hls.js. Luego, modifiques dai.css para especificar el tamaño y la posición de los elementos de página. Por último, en dai.js, define variables para retener la solicitud de transmisión. y una función initPlayer() que se ejecutará cuando se cargue la página.

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

Cargue el SDK de IMA de DAI

A continuación, agregue el marco de trabajo de IMA con una etiqueta de secuencia de comandos en dai.html, antes de la etiqueta. para 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>

Inicializa el StreamManager y realiza una solicitud de transmisión

Para solicitar un conjunto de anuncios, crea un ima.dai.api.StreamManager, que es responsable de solicitar y administrar transmisiones de DAI. El constructor toma un de video, y la instancia resultante toma un elemento de la IU del anuncio para clics.

Luego, define funciones que soliciten transmisiones. Este ejemplo incluye funciones para VOD y transmisiones en vivo, que crean instancias de VODStreamRequest y LiveStreamRequest, respectivamente, y, luego, llama a streamManager.requestStream(). con los parámetros streamRequest. En las transmisiones en vivo, también debes agregar para escuchar eventos de metadatos temporizados y reenviar los eventos al StreamManager Puedes agregar comentarios al código o quitarlo para que se ajuste a tu caso de uso. Ambos métodos toman una clave de API opcional. Si usas una transmisión protegida, puedes necesitar Crear una clave de autenticación de DAI

En este ejemplo, ninguna de las transmisiones está protegida, por lo que no se usa apiKey.

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

Cómo controlar eventos de transmisión

Por último, debes implementar objetos de escucha de eventos para eventos de video importantes. Esta ejemplo simple que controla LOADED, ERROR, AD_BREAK_STARTED y AD_BREAK_ENDED llamando a una función onStreamEvent(). Esta función Maneja la carga de transmisiones y los errores, e inhabilita los controles del reproductor. mientras se reproduce un anuncio, lo cual es obligatorio para el SDK. Cuando la transmisión se el reproductor de video carga y reproduce la URL proporcionada con un loadUrl() .

Es posible que también quieras configurar objetos de escucha de eventos para el pause del elemento de video. y start para permitir que el usuario reanude la reproducción cuando se detenga el IMA durante las pausas publicitarias.

Para funcionar con la DAI, su reproductor personalizado debe pasar eventos ID3 para las transmisiones en vivo. a los SDK de DAI de IMA, como se indica en el código de muestra.

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

Eso es todo. Ahora está solicitando y mostrando anuncios con el SDK de IMA de DAI. Para para obtener más información sobre funciones del SDK más avanzadas, consulta las otras guías o la muestras en GitHub.