Introduction
Dans cette rubrique, vous apprendrez à récupérer des données à partir du API CMS et affichez-le dans une superposition pour Brightcove Player. Cette superposition affiche un ensemble de vidéos associées (via des balises et métadonnées) dans votre compte lorsque la lecture est interrompue ou se termine. Voir aussi le Superposition de vidéos populaires échantillon.
Contraintes
Exemple de lecteur
Cet exemple affiche une superposition interactive de miniatures vidéo associées lorsque la lecture est interrompue ou est terminée. Commencez la lecture de la vidéo ci-dessous. Lorsque vous mettez en pause la lecture ou lorsque la vidéo se termine, une superposition de vidéos associées apparaît. En sélectionnant une vignette dans la superposition, charge la vidéo associée dans le lecteur et démarre la lecture.
Voir le stylo Exemple de lecteur Brightcove: Vidéos associées via des balises (API CMS) par Brightcove Learning Services ( bcls1969 ) sur CodePen.
Code source
Voir le solution complète sur GitHub.
Aperçu
Cet exemple utilise un proxy construit en PHP appeler le CMS API et recherchez des vidéos associées dans le même compte qui ont la même valeur de balise que la vidéo chargée dans le lecteur.
Si vous êtes nouveau dans l'utilisation de l'API CMS, commencez par consulter les documents suivants:
Utilisation du CodePen
Voici quelques conseils pour utiliser efficacement le CodePen ci-dessus :
- Basculez l'affichage réel du joueur en cliquant sur le Result bouton.
- Cliquez sur les HTML/CSS/JS boutons pour afficher L'UN des types de code.
- Plus loin dans ce document, la logique, le flux et le style utilisés dans l'application seront discutés dans la configuration Plateur/HTML, le flux d'application et le style de l'application. sections. La meilleure façon de suivre les informations contenues dans ces sections est de :
- Cliquez sur le EDIT ON CODEPEN bouton dans le CodePen et ayez le code disponible dans un onglet navigateur/navigateur.
- Dans CodePen, réglez le code que vous souhaitez afficher. Vous pouvez modifier la largeur de différentes sections de code dans CodePen.
- Voir le Configuration du lecteur/HTML , Flux de candidature et/ou Style d'application sections dans un autre navigateur/onglet de navigateur. Vous pourrez maintenant suivre les explications du code et en même temps afficher le code.
Séquence de développement
Voici la séquence de développement recommandée :
- Utilisez l'implémentation du lecteur intégré In-Page pour tester les fonctionnalités de votre lecteur, de votre plugin et de votre CSS (si CSS est nécessaire)
- Placez le JavaScript et le CSS du plugin dans des fichiers séparés pour des tests locaux
- Déployez le code du plugin et le CSS sur votre serveur une fois que vous avez corrigé des erreurs.
- Utilisez Studio pour ajouter le plugin et le CSS à votre lecteur
- Remplacez l'implémentation du lecteur intégré dans la page si vous déterminez que l'implémentation iframe est mieux adaptée (détaillée dans la section suivante)
Pour plus de détails sur ces étapes, consultez la section étape par étape : Guide de développement de plug-ins.
Intégrer iFrame ou In-Page
Lorsque vous développez des améliorations pour Brightcove Player, vous devrez décider si le code convient le mieux à l'implémentation intégrée iframe ou In-Page. La recommandation des meilleures pratiques consiste à créer un plugin à utiliser avec une implémentation iframe. Les avantages de l'utilisation du lecteur iframe sont les suivants :
- Aucune collision avec JavaScript et/ou CSS existants
- Réactif automatiquement
- L'iframe facilite l'utilisation dans les applications de médias sociaux (ou lorsque la vidéo devra « voyager » dans d'autres applications)
Bien que l'intégration du lecteur d'intégration dans la page puisse être plus complexe, il y a des moments où vous planifiez votre code autour de cette implémentation. Pour généraliser, cette approche est préférable lorsque la page contenante doit communiquer avec le lecteur. En particulier, voici quelques exemples :
- Le code dans la page contenant doit écouter et agir sur les événements du joueur
- Le lecteur utilise des styles de la page contenante
- L'iframe entraînera l'échec de la logique de l'application, comme une redirection à partir de la page contenant
Même si votre implémentation finale n'utilise pas le code iframe, vous pouvez toujours utiliser le code intégré In-Page avec un plugin pour votre JavaScript et un fichier séparé pour votre CSS. Cela encapsule votre logique afin que vous puissiez facilement l'utiliser sur plusieurs joueurs.
Ressources API/Plugin utilisées
| Méthodes API | Événements API | Plugins |
|---|---|---|
| Catalog.getVideo () | jouer | videojs-overlay |
| catalog.load () | terminé | |
| jouer () |
Configuration du lecteur/HTML
Le plugin Overlay est défini et initialisé dans le code JavaScript pour cet exemple. La raison pour laquelle cela est fait ici, c'est que nous devons obtenir les métadonnées des vidéos associées avant d'initialiser la superposition.
Si vous souhaitez inclure le plugin Overlay dans la configuration de votre lecteur, vous pouvez ajouter les fichiers JavaScript et CSS Overlay dans le module Players de Video Cloud Studio. Dans le Plugins section , quitter le Nom propriété vide, afin que vous puissiez initialiser le plugin dans le code.
Autre HTML
N'oubliez pas d'ajouter l' id attribut à la video balise dans le code d'intégration du lecteur.
<video-js id="myPlayerID"
...
Flux d'application
La logique de base derrière cette application est la suivante :
- Créez des variables qui définissent des valeurs pour l' CMS API URL de base et l'URL du code proxy.
- Attendez que la vidéo commence à se charger pour récupérer les métadonnées vidéo.
- Configurez la demande pour l'API CMS.
- Appelez le code proxy pour faire la demande au CMS API pour obtenir les 9 premières vidéos associées.
- Formatez le contenu de superposition pour afficher les vignettes de chacune des vidéos associées.
- Lorsqu'un utilisateur sélectionne l'une des vignettes vidéo associées, chargez-la dans le lecteur et démarrez la lecture.
Définir des valeurs
Créez des variables qui définissent des valeurs pour l' CMS API URL de base et l'URL du code proxy.
Attendez les métadonnées chargées
Trouvez le code étiqueté :
// +++ Wait for loadedmetadata +++
Attendez que la vidéo commence à se charger en écoutant le loadedmetadata un événement. Cela garantit que les métadonnées vidéo, telles que l'ID de compte, le nom et les valeurs de balise, seront disponibles dans l' mediainfo objet.
Configuration de la demande d'API
Trouvez le code étiqueté :
// +++ Setup the API request +++
À l'aide des informations de la vidéo actuellement chargée dans le lecteur, créez un CMS API demande de recherche de vidéos dans le même compte. La recherche recherche les vidéos ayant la même valeur que la première balise de la vidéo en cours. Il exclut toute vidéo portant le même nom que la vidéo actuelle et limitera le nombre de vidéos renvoyées à 9. C'est le nombre qui s'insèrent dans notre mise en page de superposition.
Faire le CMS API demande
Trouvez le code étiqueté :
// +++ Make the CMS API request +++
Utilisez le code proxy pour envoyer une requête HTTP GET au CMS API Service Web RESTful. Analyse les données renvoyées au format JSON. Si une erreur se produit, affichez un message d'erreur.
Formater le contenu de superposition
Trouvez le code étiqueté :
// +++ Format the overlay content +++
Pour formater le contenu de superposition, vous devez effectuer les opérations suivantes :
- Extrayez l'ID, le nom et la vignette de chaque vidéo associée renvoyée par l'API CMS et stockez-les dans un tableau.
- En boucle dans le tableau vidéo associé, créez un
<div>wrapper de liste vidéo contenant un<div>élément pour chaque vidéo associée. Cela deviendra le contenu de superposition. - Initialisez le plugin Overlay avec le contenu vidéo associé nouvellement créé. Une grille de vignettes vidéo associées s'affiche lorsque la superposition est affichée. Affiche la superposition lorsque la lecture vidéo est interrompue ou s'est terminée. Masquez la superposition lorsque la vidéo principale est en cours de lecture.
Charger et lire des vidéos associées
Trouvez le code étiqueté :
// +++ Load and play related video +++
Créez une fonction qui charge et démarre la lecture de la vidéo associée sélectionnée par l'utilisateur.
Style d'application
Le CSS style la grille de vignettes de vidéos associées pour la superposition.
Code du plug-in
Normalement, lors de la conversion du JavaScript en plugin Brightcove Player, des modifications nominales sont nécessaires. Une modification requise consiste à remplacer l'utilisation standard de la ready() méthode par le code qui définit un plugin.
Voici le code de début de JavaScript très couramment utilisé qui fonctionnera avec le lecteur :
videojs.getPlayer('myPlayerID').ready(function() {
var myPlayer = this;
...
});
Vous allez modifier la première ligne pour utiliser la syntaxe standard pour démarrer un plugin Brightcove Player :
videojs.registerPlugin('pluginName', function(options) {
var myPlayer = this;
...
});
Comme mentionné précédemment, vous pouvez voir le code JavaScript du plugin dans le référentiel GitHub correspondant de ce document: connexes-vidéos-cms.js.
Utilisation du plugin avec un lecteur
Une fois que les fichiers CSS et JavaScript du plugin sont stockés dans un emplacement accessible à Internet, vous pouvez utiliser le plugin avec un lecteur. Dans les studios JOUEURS module, vous pouvez choisir un joueur, puis dans le PLUGINS section ajouter les URL aux fichiers CSS et JavaScript, et également ajouter le Nom et Options , si des options sont nécessaires.
Code proxy
Afin de créer votre propre version de l'exemple d'application sur cette page, vous devez créer et héberger votre propre proxy. (Les proxy utilisés par Brightcove Learning Services n'acceptent que les demandes des domaines Brightcove.) Un exemple de proxy, très similaire à celui que nous utilisons, mais sans les contrôles qui bloquent les demandes provenant de domaines non-BrightCove, peut être trouvé dans ce dépôt GitHub. Vous y trouverez également des instructions de base pour l'utiliser, ainsi qu'un guide plus détaillé sur la création d'applications autour du proxy dans Utilisation des API REST.