Métadonnées vidéo de mediainfo

Dans cette rubrique, vous apprendrez à récupérer des informations sur la vidéo (métadonnées) à partir du mediainfo objet. La propriété est peuplée après le loadstart l'événement est distribué.

propriété mediainfo

La mediainfo propriété est un objet qui contient des informations (métadonnées) sur la vidéo en cours dans le lecteur.

La mediainfo propriété est un objet qui contient des informations (métadonnées) sur la vidéo en cours dans le lecteur. Vous remplissez l'objet avec les informations vidéo de votre CMS (système de gestion de contenu) ou de votre base de données.

Après le mediainfo objet est rempli, vous pouvez l'utiliser pour une récupération de données pratique lorsque vous souhaitez afficher des informations vidéo, comme le nom ou la description de la vidéo. L'objet est également utilisé dans la collection analytique.

Champs dans mediainfo

Les champs présents dans le mediainfo propriété sont les suivantes:

Nom du champ Description Type de données
accountId Compte Brightcove chaîne
adKeys Pour une assistance future S. O.
createdAt Date et heure de création UTC (2011-09-28T 20:06:37 .879Z)
cuePoints Liste des points de repère sous forme de tableau d'objets tableau d'objets
customFields Paires clé-valeur de noms de champs personnalisés et valeurs associées Objet
description Brève description, 250 caractères maximum chaîne
duration Durée de la vidéo en secondes numérique
economics Contient soit AD_SUPPORTED ou FREE. Si le support est marqué FREE , ni les publicités IMA3 ni FreeWheel ne seront lues. chaîne
id ID vidéoIdentifiant unique associé à la vidéo chaîne
link Objet contenant un lien text et url Propriétés objet
longDescription Description, 5000 caractères maximum chaîne
name Titre de la vidéo chaîne
poster URL de l'image de l'affiche chaîne
posterSources Tableau contenant les sources des affiches déployer
publishedAt Date et heure de publication UTC (2011-09-28T 20:06:37 .879Z)
rawSources Informations de rendu déployer
referenceId ID de référence vidéoClé ou identifiant de base de données externe ou CMS chaîne
sources Liste des rendus sous forme de tableau d'objets; chaque objet comprend au moins deux éléments: type et src tableau d'objets
tags Balises (métadonnées) associées à la vidéo tableau de chaînes
textTracks Tableau contenant des pistes de texte pour les légendes, les points de repère, etc. déployer
thumbnail URL de l'image miniature chaîne
thumbnailSources Structure de données contenant des vignettes d'affiche chaîne
variants Un tableau d'objets contenant des métadonnées multilingues pour les vidéos; les propriétés de l'objet: language , name , description , long_description , et custom_fields baie

Remplir mediainfo

En utilisant le on() méthode que vous attendez loadstart événement à distribuer, puis dans le gestionnaire d'événements correspondant, vous accédez aux valeurs stockées dans mediainfo objet. À partir du code ci-dessous, notez l'utilisation de console.log qui affiche le mediainfo objet (lignes 111-113).

<video-js id="myPlayerID"
  data-video-id="4093643993001"
  data-account="1752604059001"
  data-player="VJvZIueYx"
  data-embed="default"
  controls=""></video-js>
<script src="https://players.brightcove.net/1752604059001/VJvZIueYx_default/index.min.js"></script>

<script type="text/javascript">
  videojs.getPlayer('myPlayerID').ready(function() {
    var myPlayer = this;
    myPlayer.on('loadstart',function(){
      console.log('mediainfo', myPlayer.mediainfo);
    })
  });
</script>

Un exemple d'affichage de la console est présenté ici:

affichage de la console

Remplir l'objet

Vous pouvez remplir manuellement le mediainfo propriété avec les métadonnées de votre CMS ou de votre base de données. Vous pouvez ensuite utiliser le mediainfo objets sources propriété pour remplir le lecteur avec un rendu vidéo.

  • Lignes 32-37: Implémentation du lecteur intégré dans la page
  • Lignes 40-52: Crée manuellement un objet vidéo; en réalité, les données proviennent du CMS ou de la base de données et de l'objet construit dynamiquement
  • Ligne 54-55: S'assure que le lecteur est prêt à être utilisé et affecte l'instance du lecteur à une variable
  • Ligne 56 : Attribue l'objet vidéo créé manuellement au lecteur mediainfo objet
  • Ligne 57 : Utilise le joueur src méthode pour attribuer un ou plusieurs rendus vidéo, qui sont stockés dans le mediainfo objets sources propriété, au joueur
  <video-js id="myPlayerID"
    data-account="3676484086001"
    data-player="2433352b-a2e2-4b7e-9a15-2d9ec7f07e9d"
    data-embed="default"
    controls=""></video-js>
  <script src="https://players.brightcove.net/3676484086001/2433352b-a2e2-4b7e-9a15-2d9ec7f07e9d_default/index.min.js"></script>

  <script type="text/javascript">
    //Populate video object (normally from database or CMS)
    var videoObject = new Object();
    videoObject.name = "Hand made video object test";
    videoObject.id = "1234msb";
    videoObject.description = "short description for hand made video object";
    videoObject.accountId = "1507807800001";
    videoObject.sources = [{
        "src": "http://solutions.brightcove.com/bcls/assets/videos/Tiger.m3u8",
        "type": "application/x-mpegURL"
      }, {
        "src": "http://solutions.brightcove.com/bcls/assets/videos/Tiger.mp4",
        "type": "video/mp4"
      }];

    videojs.getPlayer('myPlayerID').ready(function() {
      var myPlayer = this;
      myPlayer.mediainfo = videoObject;
      myPlayer.src(myPlayer.mediainfo.sources);
    });
  </script>

Afficher les balises et les champs personnalisés

Les balises et les champs personnalisés sont stockés dans des structures de données complexes. le customFields dans un objet et tags dans un tableau. La capture d'écran suivante montre les champs personnalisés et les balises mis en évidence dans le mediainfo objet.

balises et champs personnalisés dans l'affichage de la console

Pour afficher les données de ces structures de données complexes, vous avez besoin de deux types de boucles. UNE for boucle est utilisée pour parcourir le tableau de balises (lignes 16-20) et injecter la liste non ordonnée HTML construite dynamiquement dans un <div> (défini à la ligne 9). UNE for-in boucle est utilisée pour parcourir l'objet de champs personnalisés (lignes 24-27) et injecter la liste non ordonnée HTML construite dynamiquement dans le <div>.

<video-js id="myPlayerID"
  data-video-id="4093643993001"
  data-account="1752604059001"
  data-player="VJvZIueYx"
  data-embed="default"
  controls=""></video-js>
<script src="https://players.brightcove.net/1752604059001/VJvZIueYx_default/index.min.js"></script>

<div id="displayInfo"></div>

<script type="text/javascript">
  videojs.getPlayer('myPlayerID').ready(function() {
    var myPlayer = this;
    myPlayer.on('loadstart',function(){
      //Use JavaScript to display the tags
      var numTags = myPlayer.mediainfo.tags.length;
      displayInfo.innerHTML += "<h1>Tags:</h1><ul>";
      for (var i = 0; i < numTags; i++) {
        displayInfo.innerHTML += "<li>" + myPlayer.mediainfo.tags[i] + "</li>";
      };
      displayInfo.innerHTML += "</ul><br />";

      //Use JavaScript to display custom fields
      displayInfo.innerHTML += "<h1>Custom Fields:</h1><ul>";
      for (var key in myPlayer.mediainfo.customFields) {
       displayInfo.innerHTML += "<li><strong>" + key + "</strong>: " + myPlayer.mediainfo.customFields[key] + "</li>";
      }
      displayInfo.innerHTML += "</ul>";
    })
  });
</script>

Le HTML rendu apparaît comme indiqué dans cette capture d'écran.

balises et affichage personnalisé en HTML