Usar el SDK de inserción dinámica de anuncios de IMA con un cliente HTML5

Reproducir emisiones de VOD registradas con la API Video Stitcher de Google Cloud

En esta guía se muestra cómo usar el SDK de DAI de IMA para HTML5 para solicitar y reproducir una sesión de emisión de vídeo bajo demanda de Google Cloud.

Esta guía amplía el ejemplo básico de la guía de inicio de IMA DAI.

Para obtener información sobre cómo integrar otras plataformas o usar los SDKs de IMA del lado del cliente, consulte SDKs de anuncios multimedia interactivos.

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

Configura un proyecto de Google Cloud.

Introduzca 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 de proyecto
Número de proyecto de Google Cloud que usa la API Video Stitcher: PROJECT_NUMBER
Token de OAuth

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

OAUTH_TOKEN

Consulta más información sobre cómo crear tokens de OAuth de corta duración. El token de OAuth se puede reutilizar en varias solicitudes siempre que no haya caducado.

Código de red

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

ID de configuración de VOD

El ID de configuración de VOD de la emisión de VOD: VOD_CONFIG_ID

Consulta más información sobre cómo crear el ID de configuración de VOD en la guía de creación de configuraciones de VOD de Cloud Stitching.

Configurar un entorno de desarrollo

Las aplicaciones de ejemplo de IMA solo muestran solicitudes de emisiones HLS. Puedes seguir usando las secuencias DASH al crear la clase VideoStitcherVodStreamRequest. Cuando configures tu reproductor compatible con DASH, tendrás que configurar un receptor para los eventos de progreso del reproductor de vídeo que pueda proporcionar los metadatos del vídeo a StreamManager.processMetadata(). Esta función usa tres parámetros:

  1. type: una cadena que debe definirse como 'ID3' para las emisiones HLS y 'urn:google:dai:2018' para las emisiones DASH.

  2. data: en el caso de los mensajes de eventos de DASH, se trata de la cadena de datos del mensaje.

  3. timestamp: número que indica la hora de inicio del mensaje de evento de las secuencias DASH.

Envía los metadatos tan pronto y con la frecuencia que permitan tus eventos de reproductor. Si faltan metadatos o no son correctos, es posible que el SDK de IMA DAI no active eventos de anuncios, lo que provocaría que se informara de forma incorrecta sobre ellos.

Descarga los ejemplos de inserción dinámica de anuncios de IMA para HTML5 y extrae el archivo ZIP de ejemplo hls_js/simple en una carpeta nueva. Este ejemplo es una aplicación web que puedes alojar de forma local para hacer pruebas.

Para alojar el ejemplo de forma local, ve a la nueva carpeta 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 ve a localhost:8000 para ver un reproductor de vídeo. Tu navegador debe ser compatible con la biblioteca HLS.js.

Si todo funciona correctamente, al hacer clic en el botón Reproducir del reproductor de vídeo, se iniciará el cortometraje "Tears of Steel", con pausas publicitarias cada 30 segundos.

Solicitar una emisión de VOD

Para sustituir la emisión de muestra por tu emisión de vídeo bajo demanda con anuncios insertados, usa la clase VideoStitcherVodStreamRequest para crear automáticamente una sesión publicitaria con Google Ad Manager. Puede usar la interfaz de usuario de Google Ad Manager para localizar las sesiones de inserción dinámica de anuncios generadas con fines de monitorización y depuración.

En el ejemplo, hay funciones para solicitar una emisión de VOD o una emisión en directo. Para que funcione con la API Google Cloud Video Stitcher, debes añadir una nueva función para devolver un objeto VideoStitcherVodStreamRequest.

Veamos un 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. Después, puedes solicitar y reproducir la emisión de vídeo bajo demanda personalizada.

(Opcional) Añadir opciones de sesión de streaming

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

Por ejemplo, puedes anular las opciones del manifiesto con el siguiente fragmento de código, que solicita dos manifiestos de emisión con representaciones ordenadas de menor a mayor tasa de bits.

...

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

streamManager.requestStream(streamRequest);

Limpieza

Ahora que has alojado correctamente una emisión de vídeo bajo demanda con la API Video Stitcher de Google Cloud y la has solicitado con el SDK de DAI de IMA para HTML5, es importante que elimines los recursos de servicio.

Sigue la guía para limpiar vídeos bajo demanda para quitar los recursos y los activos que no necesites.

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

Anterior
Chromecast
Siguiente
iOS