Enregistrer et charger des favoris de flux d'annonces

Ce guide explique comment implémenter l'ajout de signets à l'aide du SDK IMA DAI lorsque vous utilisez l'insertion dynamique d'annonces (DAI) pour les flux de vidéo à la demande (VOD). Cela suppose une implémentation IMA DAI fonctionnelle, telle que celle présentée dans Premiers pas.

Qu'est-ce que l'ajout de favoris ?

Cette fonctionnalité permet d'enregistrer un point précis du flux de contenu, puis d'y revenir. Supposons qu'un utilisateur regarde cinq minutes de contenu, quitte le flux vidéo, puis y revienne. La fonctionnalité de favoris enregistre la position de l'utilisateur dans le flux de sorte que celui-ci puisse reprendre la lecture là où l'utilisateur s'était arrêté. Cela garantit une expérience homogène à l'utilisateur.

Fonctionnement de l'ajout de signets pour l'insertion dynamique d'annonces

Lorsque vous ajoutez un flux DAI à vos favoris, vous devez enregistrer l'ID et l'heure du flux lorsque l'utilisateur quitte la vidéo. Lorsque l'utilisateur revient, demandez à nouveau le flux et recherchez l'heure enregistrée. Étant donné que chaque instance du flux demandé peut comporter des pauses publicitaires de durées différentes, il ne suffit pas d'enregistrer l'heure du flux. Ce que vous voulez vraiment faire, c'est continuer à partir du même temps de contenu.

Les méthodes de conversion à la rescousse

Le SDK IMA DAI fournit une paire de méthodes permettant de demander le temps de contenu pour un temps de flux donné et le temps de flux pour un temps de contenu donné. Ces méthodes de conversion vous permettent de stocker le temps de contenu mis en signet, puis de rechercher le temps de flux correspondant dans la nouvelle instance du flux. Voici l'approche, y compris un lien vers un exemple d'application qui montre une implémentation de mise en signet fonctionnelle.

Enregistrer et charger des repères de flux d'annonces

Enregistrez un signet lorsque le lecteur de contenu est en pause.

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

Chargement des favoris

Chargez le signet lorsque vous demandez à nouveau un flux.

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

Application exemple

Téléchargez l'application exemple pour voir une implémentation de la mise en signet.