Cómo guardar y cargar favoritos de flujos de anuncios

Selecciona la plataforma: HTML5 Android iOS tvOS Roku

En esta guía, se muestra cómo implementar el uso de marcadores con el SDK de IMA para DAI cuando se usa la inserción de anuncios dinámicos (DAI) para transmisiones de video on demand (VOD). Esto supone que hay una implementación de DAI de IMA en funcionamiento, como la que se presenta en Primeros pasos.

¿Qué es el uso de marcadores?

Los favoritos permiten guardar un punto específico en la transmisión del contenido y luego regresar a él. Supongamos que un usuario mira cinco minutos de contenido, deja la transmisión de video y luego regresa a ella. Los favoritos guardan la posición del usuario en la transmisión para que pueda retomarla desde donde la dejó y, de esta forma, ofrecen al espectador una experiencia continua.

Funcionamiento interno del agregado de marcadores de la DAI

Cuando agregues a favoritos una transmisión de DAI, debes registrar el ID y la hora de la transmisión cuando el usuario abandone el video. Cuando el usuario regrese, vuelve a solicitar la transmisión y busca el tiempo guardado. Como cada instancia de la transmisión solicitada puede tener pausas publicitarias de diferentes duraciones, no funcionará simplemente guardar el tiempo de la transmisión. Lo que realmente quieres hacer es continuar desde el mismo momento del contenido.

Los métodos de conversión al rescate

El SDK de DAI de IMA proporciona un par de métodos para solicitar el tiempo de contenido para un tiempo de transmisión determinado y el tiempo de transmisión para un tiempo de contenido determinado. Con estos métodos de conversión, puedes almacenar el tiempo de contenido marcado y, luego, buscar el tiempo de transmisión correspondiente en la nueva instancia de la transmisión. Aquí se explica el enfoque, incluido un vínculo a una app de ejemplo que muestra una implementación de favoritos en funcionamiento.

Cómo guardar y cargar marcadores de transmisiones de anuncios

Guarda un marcador cuando el reproductor de contenido está en pausa.

onPause() {
    var bookmarkTime = Math.floor(
    streamManager.contentTimeForStreamTime(videoElement.currentTime));
}

Cargando marcadores

Carga el marcador cuando se vuelve a solicitar una transmisión.

function loadUrl(url) {
  hls.on(Hls.Events.MANIFEST_PARSED, () => {
    var startTime = 0;
    if (bookmarkTime) {
      var startTime = streamManager.streamTimeForContentTime(bookmarkTime);
      // Seeking on load triggers the onSeekEnd event, so treat this seek as
      // if it's snapback. Without this, resuming at a bookmark kicks you
      // back to the ad before the bookmark.
      isSnapback = true;
    }
    hls.startLoad(startTime);
    videoElement.addEventListener('loadedmetadata', () => { videoElement.play(); });
  });
  hls.loadSource(url);
  hls.attachMedia(videoElement);
}

App de ejemplo

Descarga la app de ejemplo para ver una implementación de marcadores.