Implémentation des points de repère par programme

Points de repère de Video Cloud

Dans cette section du document, vous apprendrez à définir des points de repère de catalogue et à écouter les distributions d'événements de point de repère de catalogue.

Définition des points de repère de Video Cloud

Les points de repère Video Cloud peuvent être associés à une vidéo à l'aide de Video Cloud Studio, et de plusieurs autres façons, détaillées dans ce document: Utilisation des points de repère dans le module multimédia.

Agir sur les points de repère de Video Cloud - vidéo liée statiquement au lecteur

Dans cette section du document, vous apprendrez à traiter les points de repère du catalogue lorsque la vidéo a été liée statiquement au lecteur, ce qui signifie que la vidéo a été chargée dans le lecteur soit dans Studio, soit en utilisant directement l'API Player Management.

Pour éviter une situation de concurrence liée à la tentative de traitement des points de repère avant leur chargement, vous devez utiliser le loadedmetadata événement à envoyer avant de traiter les points de repère. Une fois que la bonne piste de texte a été lue, utilisez le oncuechange événement pour écouter les événements de points de repère à envoyer.

Le code suivant montre l'écoute des points de repère et l'affichage des données à partir du point de repère. Notez que dans cet exemple, la vidéo est liée statiquement au lecteur.

• Ligne 11 : Créez un élément de paragraphe comme emplacement dans lequel injecter du code HTML créé dynamiquement.
• Lignes 18 et 30 : Utilisez le one() méthode pour ajouter un écouteur d'événement pour le loadedmetadata événement une seule fois. La fonction de gestionnaire d'événements est définie ici de manière anonyme.
• Ligne 19 : Récupérez le tableau TextTracks à l'aide de la textTracks() méthode, puis attribuez l'élément zéro, qui contient les points de repère, à la variable tt. Notez qu'il peut être possible dans certaines implémentations que les points de repère se trouvent dans un autre élément de tableau. Voir le Trouver la bonne piste section ci-dessous pour plus d'informations.
• Lignes 20 et 28 : Définit la fonction de gestionnaire d'événements lorsque l' oncuechangeévénement est distribué.
• Ligne 21: Vérifiez que vous obtenez la première distribution de point de repère (élément de tableau zéro). Sans cette condition, vous verriez que chaque point de repère serait agi deux fois. Notez que si vous utilisez des points de repère dont les durées se chevauchent, cette condition doit être différente.
• Lignes 22-26 : Créez dynamiquement du code HTML à l'aide d'informations provenant du point de repère et injectez-en dans la page HTML.
• Ligne 29 : Lisez la vidéo.

<video-js id="myPlayerID"
  data-account="1507807800001"
  data-player="zN3V18ZPEu"
  data-embed="default"
  controls=""
  data-video-id="1507781667001"
  data-playlist-id=""
  data-application-id=""
  width="960" height="540"></video-js>

<p id="insertionPoint"></p>

<script src="https://players.brightcove.net/1507807800001/zN3V18ZPEu_default/index.min.js"></script>

<script>
  videojs.getPlayer('myPlayerID').ready(function() {
    var player = this;
    player.one("loadedmetadata", function () {
      var tt = player.textTracks()[0];
      tt.oncuechange = function () {
        if (tt.activeCues[0] !== undefined) {
          var dynamicHTML = "id: " + tt.activeCues[0].id + ", ";
          dynamicHTML += "text: " + tt.activeCues[0].text + ", ";
          dynamicHTML += "startTime: " + tt.activeCues[0].startTime + ",  ";
          dynamicHTML += "endTime: " + tt.activeCues[0].endTime;
          document.getElementById("insertionPoint").innerHTML += dynamicHTML + "<br/>";
        }
      }
      player.play();
    });
  });
</script>

Agir sur les points de repère de Video Cloud - charger dynamiquement la vidéo dans le lecteur

Dans cette section du document, vous apprendrez à traiter les points de repère du catalogue lorsque la vidéo est chargée dynamiquement dans le lecteur à l'aide du catalog.getVideo() et catalog.load() méthodes.

Lorsque vous utilisez le catalogue de lecteurs pour obtenir et charger la vidéo, le traitement des points de repère est un peu plus facile que lorsque vous utilisez une vidéo à liaison statique, car vous n'avez pas besoin d'utiliser le loadedmetadata un événement.

• Ligne 11 : Créez un élément de paragraphe comme emplacement dans lequel injecter du code HTML créé dynamiquement.
• Lignes 17 et 31 : Utilisez le catalog.getVideo() méthode pour récupérer une vidéo. La fonction de rappel est définie ici de manière anonyme.
• Ligne 19 : Utilisez le catalog.load() méthode pour charger la vidéo dans le lecteur.
• Ligne 21: Récupérez le tableau TextTracks à l'aide de la textTracks() méthode, puis attribuez l'élément zéro, qui contient les points de repère, à la variable tt. Notez qu'il peut être possible dans certaines implémentations que les points de repère se trouvent dans un autre élément de tableau. Voir le Trouver la bonne piste section ci-dessous pour plus d'informations.
• Lignes 22-30 : Définit la fonction de gestionnaire d'événements lorsque l' oncuechangeévénement est distribué.
• Ligne 23 : Vérifiez que le premier point de repère (élément du tableau zéro) est défini. Sans cette condition, vous verriez que chaque point de repère serait agi deux fois, la deuxième fois sans éléments définis dans le activecues array (puisque le deuxième changement de repère concerne la fin du point de repère). Notez que si vous utilisez des points de repère dont les durées se chevauchent, cette condition doit être différente.
• Lignes 24-28 : Créez dynamiquement du code HTML à l'aide d'informations provenant du point de repère et injectez-en dans la page HTML.
• Ligne 32: Lisez la vidéo.

<video-js id="myPlayerID"
  data-account="1507807800001"
  data-player="zN3V18ZPEu"
  data-embed="default"
  controls=""
  data-video-id=""
  data-playlist-id=""
  data-application-id=""
  width="960" height="540"></video-js>

<p id="insertionPoint"></p>

<script src="https://players.brightcove.net/1507807800001/zN3V18ZPEu_default/index.min.js"></script>
  <script>
  videojs.getPlayer('myPlayerID').ready(function() {
    var player = this;
    player.catalog.getVideo('1507781667001', function (error, video) {
      //deal with error
      player.catalog.load(video);
      player.one("loadedmetadata", function () {
        var tt = player.textTracks()[0];
        tt.oncuechange = function () {
          if (tt.activeCues[0] !== undefined) {
            var dynamicHTML = "id: " + tt.activeCues[0].id + ", ";
            dynamicHTML += "text: " + tt.activeCues[0].text + ", ";
            dynamicHTML += "startTime: " + tt.activeCues[0].startTime + ",  ";
            dynamicHTML += "endTime: " + tt.activeCues[0].endTime;
            document.getElementById("insertionPoint").innerHTML += dynamicHTML + "<br/>";
          }
        }
      });
      player.play();
    });
  });
</script>

Récupérer toutes les informations sur les points de repère de Video Cloud

Comme vous l'avez peut-être remarqué, toutes les informations relatives aux points de repère de Video Cloud ne vous sont pas directement accessibles depuis le activecues tableau. Cela est facilement résolu en récupérant les informations souhaitées à partir du mediainfo propriété.

L'approche de base de cette solution est:

1. Attends le loadstart événement pour le mediainfo propriété à peupler.
2. Attribuez le cue_points tableau du mediainfo propriété à une variable. Cette variable contient des informations complètes sur les points de repère de Video Cloud.
3. Lors d'un événement de point de repère, récupérez les données de point de repère correspondantes en fonction de time valeur de la propriété. Cela sera fait à l'aide d'une fonction d'assistance qui récupère un objet d'un tableau en fonction d'une valeur de propriété dans l'objet.
4. Utilisez les données du point de repère.

L'image suivante montre l'ensemble du tableau de points de repère (en haut à gauche), la collection de données de point de repère unique (en haut à droite) et une propriété de cette collection de données de point de repère unique (en bas à droite).

Dans l'extrait ci-dessous, seul le code nouveau / modifié des exemples ci-dessus sera expliqué.

• Lignes 452-463: Incluez la fonction qui sera utilisée pour extraire une collection de données de point de repère unique du tableau de tous les points de repère. Notez que vous lui transmettez le tableau de tous les points de repère, la propriété dans laquelle vous recherchez une valeur spécifique et enfin la valeur que vous recherchez.
• Ligne 432: Écoute l' loadstart événement. Lorsque votre vidéo commence à se charger, le mediainfo la propriété est peuplée.
• Ligne 434: Attribuez le tableau de tous les points de repère Video Cloud à une variable.
• Ligne 443: Dans le gestionnaire d'événements de répartition des points de repère, affectez la collecte de données du point de repère spécifique à une variable. C'est là que la fonction mentionnée dans la première puce est appelée. Les arguments utilisés sont:
  • :cuePointAra Toute la collection de points de repère Video Cloud.
  • :'time' Propriété dans laquelle rechercher une valeur.
  • :tt.activeCues[0].startTime Heure de début du point de repère en cours de traitement dans le gestionnaire d'événements de répartition de point de repère.
• Lignes 444-445: Débogage console.log() les appels de méthode, qui doivent être supprimés dans le code de production.

<script>
  videojs.getPlayer('myPlayerID').ready(function() {
    var myPlayer = this,
      cuePointAra = [],
      allCuePointData;
    myPlayer.on('loadstart', function () {
      //console.log('mediainfo', myPlayer.mediainfo);
      cuePointAra = myPlayer.mediainfo.cue_points;
      var tt = myPlayer.textTracks()[0];
      tt.oncuechange = function () {
        if (tt.activeCues[0] !== undefined) {
          var dynamicHTML = "id: " + tt.activeCues[0].id + ", ";
          dynamicHTML += "text: " + tt.activeCues[0].text + ", ";
          dynamicHTML += "startTime: " + tt.activeCues[0].startTime + ",  ";
          dynamicHTML += "endTime: " + tt.activeCues[0].endTime;
          document.getElementById("insertionPoint").innerHTML += dynamicHTML + "<br/>";
          allCuePointData = getSubArray(cuePointAra, 'time', tt.activeCues[0].startTime);
          console.log('cue point data:', allCuePointData);
          console.log('cue point metadata:', allCuePointData[0].metadata);
        }
      }
      myPlayer.play();
      myPlayer.muted(true);
    });

    function getSubArray(targetArray, objProperty, value) {
      var i, totalItems = targetArray.length,
        objFound = false,
        idxArr = [];
      for (i = 0; i < totalItems; i++) {
        if (targetArray[i][objProperty] === value) {
          objFound = true;
          idxArr.push(targetArray[i]);
        }
      }
      return idxArr;
    };
  });
</script>

Points de repère programmatiques

Il est possible d'ajouter des points de repère par programmation. La méthode clé vient du HTML5 VTTCue interface. Vous pouvez créer des points de repère en utilisant la syntaxe suivante:

new VTTCue( startTime, endTime, text )

La logique de traitement des points de repère est très similaire aux exemples précédents, donc seul le code différent de celui utilisé ci-dessus sera détaillé.

• Lignes 43,44: Ajoute un textTrack élément au joueur en utilisant addRemoteTextTrack() méthode. Spécifie le kind être métadonnées , et un label , dans ce cas Point de repère chronométré.

• Lignes 45-48: Attendez 10 millisecondes avant de créer deux points de repère à l'aide du lecteur addCue() méthode. Les points de repère sont instanciés à l'aide de HTML5 VTTCue() constructeur.

• Ligne 22: Écoute l' addtrack événement.
• Ligne 23 : Récupère toutes les pistes de texte associées au lecteur.
• Ligne 24 : Définit le attLength variable selon le nombre de pistes de texte. Cette valeur sera utilisée dans une boucle dans le prochain segment de code.
• Lignes 25-30: Faites une boucle sur chaque piste de texte en vérifiant label pour être égal à la valeur correcte. Lorsqu'elle est trouvée, assignez la piste de texte actuelle à une variable et sortez de la boucle.

<video-js id="myPlayerID"
  data-video-id="4607746980001"
  data-account="1507807800001"
  data-player="default"
  data-embed="default"
  width="640" height="360"
  controls=""></video-js>

<script src="https://players.brightcove.net/1507807800001/default_default/index.min.js"></script>

<p id="insertionPoint"></p>

<script type="text/javascript">
  videojs.getPlayer("myPlayerID").ready(function () {
    var myPlayer = this,
      textTrack = [],
      allTextTacks,
      attLength,
      tt;
    myPlayer.one("loadedmetadata", function () {
      myPlayer.textTracks().addEventListener('addtrack', function () {
        allTextTacks = myPlayer.textTracks();
        attLength = allTextTacks.length;
        for (var i = 0; i < attLength; i++) {
          if (allTextTacks[i].label === 'Timed Cue Point') {
            tt = allTextTacks[i];
            break;
          }
        }
        tt.oncuechange = function () {
          if (tt.activeCues[0] !== undefined) {
            var dynamicHTML = "id: " + tt.activeCues[0].id + ", ";
            dynamicHTML += "text: <strong>" + tt.activeCues[0].text + "</strong>, ";
            dynamicHTML += "startTime: <strong>" + tt.activeCues[0].startTime + "</strong>,  ";
            dynamicHTML += "endTime: <strong>" + tt.activeCues[0].endTime + "</strong>";
            document.getElementById("insertionPoint").innerHTML += dynamicHTML + "<br/><br/>";
          } else {
            document.getElementById("insertionPoint").innerHTML += "Cue point duration over" + "<br/><br/>";
          }
        }; //end oncuechange
      }); // end playing
      textTrack = myPlayer.addRemoteTextTrack({kind: 'metadata', label: 'Timed Cue Point', mode: 'hidden'}, false);
      textTrack.track.mode = 'hidden';
      setTimeout(function(){
        textTrack.track.addCue(new window.VTTCue(2, 5, 'cue point 1 text'));
        textTrack.track.addCue(new window.VTTCue(10, 15, 'cue point 2 text'));
      }, 10);
    }); //end on loadedmetadata
  }); //end ready
</script>

Le code génère une sortie comme indiqué dans la capture d'écran suivante. Noter la id les valeurs ne reçoivent pas de valeur lors de l'utilisation de VTTCue() méthode constructeur.