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

Cómo comenzar

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 administrar la reproducción de anuncios en sus aplicaciones. Con los SDK de DAI de IMA, las aplicaciones realizan una solicitud de transmisión para anuncios y video de contenido, ya sea VOD o contenido en vivo. Luego, el SDK muestra una transmisión de video combinada, de modo que no tienes que administrar el cambio entre el anuncio y el video de contenido dentro de tu app.

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

Descripción general de la DAI de IMA

La implementación de la DAI de IMA implica dos componentes principales del SDK, que se muestran en esta guía:

StreamRequest: Puede ser un VODStreamRequest o un LiveStreamRequest: Es un objeto que define una solicitud de transmisión. Las solicitudes de transmisión pueden ser para video on demand o transmisiones en vivo. 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 controla las transmisiones de inserción de anuncios dinámicos y las interacciones con el backend de la DAI. El administrador de transmisiones también controla los pings de seguimiento y reenvía eventos de transmisión y anuncios al publicador.

Requisitos previos

Antes de comenzar, necesitas lo siguiente:

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

1. Inicia un servidor de desarrollo

Dado que el SDK de IMA carga las dependencias a través del mismo protocolo que la página desde la que se carga, debes usar un servidor web para probar tu app. La manera más sencilla de iniciar un servidor de desarrollo local es usar el servidor integrado de Python.

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 usar cualquier otro servidor web, como el servidor HTTP de Apache.

2. Crea un reproductor de video simple

Primero, modifica dai.html para crear un elemento de video HTML5 simple y un elemento div que se usará para el clic. Además, agrega las etiquetas necesarias para cargar los archivos dai.css y dai.js, así como para importar el reproductor de video hls.js. Luego, modifica dai.css para especificar el tamaño y la posición de los elementos de la página. Por último, en dai.js, define variables para conservar la información de la solicitud de transmisión y una función initPlayer() para que se ejecute 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 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. Cargue el SDK de IMA

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

...

4. Inicializa StreamManager y haz una solicitud de transmisión

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

Luego, define funciones que soliciten transmisiones. En este ejemplo, se incluyen funciones para VOD y transmisiones en vivo, que crean instancias de VODStreamRequest y LiveStreamRequest, respectivamente, y, luego, llaman a streamManager.requestStream() con los parámetros streamRequest. En las transmisiones en vivo, también debes agregar un controlador para escuchar eventos de metadatos con tiempos y reenviarlos a StreamManager. Puede comentar o quitar el comentario del código para adaptarlo a su caso de uso. Ambos métodos toman una clave de API opcional. Si utiliza una transmisión encriptada, deberá crear una clave de autenticación de DAI.

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. Cómo controlar eventos de transmisión

Por último, debe implementar objetos de escucha de eventos para eventos de video importantes. En este ejemplo simple, se llama a una función onStreamEvent() para controlar los eventos LOADED, ERROR, AD_BREAK_STARTED y AD_BREAK_ENDED. Esta función controla la carga y los errores de transmisión, además de inhabilitar los controles del reproductor mientras se reproduce un anuncio, lo que es obligatorio para el SDK. Cuando se carga la transmisión, el reproductor de video carga y reproduce la URL proporcionada mediante una función loadUrl().

También te recomendamos configurar objetos de escucha de eventos para los eventos pause y start del elemento de video a fin de permitir que el usuario reanude la reproducción cuando se detenga la IMA durante las pausas publicitarias.

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

Listo. Ahora solicita y muestra anuncios con el SDK de IMA. Para obtener más información sobre las funciones más avanzadas del SDK, consulta las otras guías o los ejemplos en GitHub.