Comienza a usar el SDK de IMA para DAI

Selecciona la plataforma: HTML5 Android iOS tvOS Cast Roku

Los SDK de IMA facilitan la integración de anuncios multimedia en tus sitios web y apps. Los SDKs de IMA pueden solicitar anuncios de cualquier servidor de anuncios compatible con VAST y administrar la reproducción de anuncios en tus apps. Con los SDK de IMA para DAI, las apps realizan una solicitud de transmisión para el video de anuncio y contenido, ya sea VOD o contenido en vivo. Luego, el SDK devuelve una transmisión de video combinada, por lo que no tienes que administrar el cambio entre el anuncio y el video de contenido en tu app.

Selecciona la solución de DAI que prefieras:

Reproduce transmisiones de VOD registradas con la API de Video Stitcher de Google Cloud

En esta guía, se muestra cómo usar el SDK de IMA para DAI para HTML5 con el objetivo de solicitar y reproducir una sesión de transmisión de VOD de Google Cloud.

Esta guía amplía el ejemplo básico de la guía de introducción para IMA para DAI.

Para obtener información sobre la integración con otras plataformas o el uso de los SDKs de IMA del cliente, consulta SDKs de anuncios multimedia interactivos.

Para ver o seguir una integración de muestra completada, descarga el ejemplo de Cloud Video Stitcher para HLS o DASH.

Configura un proyecto de Google Cloud

Configura un proyecto de Google Cloud y las cuentas de servicio para acceder al proyecto.

Ingresa las siguientes variables para usarlas en el SDK de IMA:

Ubicación
La región de Google Cloud en la que se creó tu configuración de VOD: LOCATION
Número del proyecto
El número de proyecto de Google Cloud que usa la API de Video Stitcher: PROJECT_NUMBER
Token de OAuth

Un token de OAuth de corta duración de una cuenta de servicio con el rol de usuario de Video Stitcher: 

OAUTH_TOKEN

Obtén más información para crear tokens de OAuth de corta duración. El token de OAuth se puede reutilizar en varias solicitudes, siempre que no haya vencido.

Código de red

Es el código de red de Ad Manager para solicitar anuncios: NETWORK_CODE

ID de configuración de VOD

Es el ID de configuración de VOD para la transmisión de VOD: VOD_CONFIG_ID

Obtén más información para crear el ID de configuración de VOD en la guía de Cloud Stitching para crear una configuración de VOD.

Configura un entorno de desarrollo

Las apps de ejemplo del SDK de IMA solo muestran solicitudes de transmisiones de HLS. Puedes seguir usando transmisiones de DASH cuando construyas la clase VideoStitcherVodStreamRequest. Cuando configures tu reproductor compatible con DASH, deberás configurar un objeto de escucha para los eventos de progreso del reproductor de video que pueda proporcionar los metadatos del video a StreamManager.processMetadata(). Esta función toma tres parámetros:

  1. type: Es una cadena que se debe establecer en 'ID3' para las transmisiones de HLS y 'urn:google:dai:2018' para las transmisiones de DASH.

  2. data: En el caso de los mensajes de eventos de DASH, esta es la cadena de datos del mensaje.

  3. timestamp: Es un número que indica la hora de inicio del mensaje de evento para las transmisiones de DASH.

Envía los metadatos tan pronto y con la mayor frecuencia posible según lo que puedan proporcionar los eventos de tu reproductor. Si faltan metadatos o no son correctos, es posible que el SDK de IMA para DAI no active los eventos de anuncios, lo que generará informes incorrectos de estos eventos.

Descarga los ejemplos de IMA para DAI para HTML5 y extrae el archivo ZIP de muestra hls_js/simple en una carpeta nueva. Este ejemplo es una app web que puedes alojar de forma local para realizar pruebas.

Para alojar el ejemplo de forma local, navega a la carpeta nueva y ejecuta el siguiente comando de Python para iniciar un servidor web:

python3 -m http.server 8000

http.server solo está disponible en Python 3.x. Puedes usar cualquier otro servidor web, como el servidor HTTP de Apache o Node JS.

Abre un navegador web y navega a localhost:8000 para ver un reproductor de video. Tu navegador debe admitir la biblioteca de HLS.js.

Si todo funciona correctamente, cuando hagas clic en el botón de reproducción del reproductor de video, comenzará el cortometraje "Tears of Steel", con pausas publicitarias cada 30 segundos.

Solicita una transmisión de VOD

Para reemplazar la transmisión de ejemplo por tu transmisión de VOD con inserción de anuncios, usa la clase VideoStitcherVodStreamRequest para crear automáticamente una sesión publicitaria con Google Ad Manager. Puedes usar la IU de Google Ad Manager para ubicar las sesiones de DAI generadas con fines de supervisión y depuración.

En la muestra existente, hay funciones para solicitar una transmisión de VOD o una transmisión en vivo. Para que funcione con la API de Video Stitcher de Google Cloud, debes agregar una función nueva que devuelva un objeto VideoStitcherVodStreamRequest.

Por ejemplo:

// StreamManager which will be used to request DAI streams.
let streamManager;
...

function initPlayer() {
  videoElement = document.getElementById('video');
  adUiElement = document.getElementById('adUi');
  streamManager = new google.ima.dai.api.StreamManager(
    videoElement,
    adUiElement
  );
  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);

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

  videoElement.addEventListener('pause', () => {
    playButton.style.display = "block";
  });

  playButton.addEventListener('click', initiatePlayback);
}

function initiatePlayback() {
  requestVodVideoStitcherStream();

  playButton.style.display = "none";
  playButton.removeEventListener('click', initiatePlayback);
  playButton.addEventListener('click', resumePlayback);
}
...
function requestVodVideoStitcherStream() {
  const streamRequest = new google.ima.dai.api.VideoStitcherVodStreamRequest();
  streamRequest.vodConfigId = 'VOD_CONFIG_ID';
  streamRequest.region = 'LOCATION';
  streamRequest.projectNumber = 'PROJECT_NUMBER';
  streamRequest.oAuthToken = 'OAUTH_TOKEN';
  streamRequest.networkCode = 'NETWORK_CODE';

  streamManager.requestStream(streamRequest);
}

Vuelve a cargar la página. Luego, puedes solicitar y reproducir la transmisión de VOD personalizada.

Agrega opciones de sesión de transmisión (opcional)

Personaliza tu solicitud de transmisión agregando opciones de sesión para anular la configuración predeterminada de la API de Cloud Video Stitcher con VideoStitcherVodStreamRequest.videoStitcherSessionOptions. Si proporcionas una opción no reconocida, la API de Video Stitcher de Cloud responderá con un error HTTP 400. Consulta la guía de solución de problemas para obtener asistencia.

Por ejemplo, puedes anular las opciones de manifiesto con el siguiente fragmento de código, que solicita dos manifiestos de transmisión con versiones ordenadas de la tasa de bits más baja a la más alta.

...

// The following session options are examples. Use session options
// that are compatible with your video stream.
streamRequest.videoStitcherSessionOptions = {
  "manifestOptions": {
    "bitrateOrder": "ascending"
  }
};

streamManager.requestStream(streamRequest);

Limpia

Ahora que alojaste correctamente una transmisión de VOD con la API de Video Stitcher de Google Cloud y la solicitaste con el SDK de IMA para DAI de HTML5, es importante que limpies los recursos de publicación.

Sigue la guía de limpieza de VOD para quitar los recursos y activos innecesarios.

Por último, en la ventana de terminal en la que iniciaste el servidor web de Python 3, usa el comando ctrl+C para finalizar el servidor local.