Métadonnées vidéo de mediainfo
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:
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 lemediainfo
objetssources
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.
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.