Bienvenue dans le premier article d'une série d'articles techniques qui, au cours des prochains mois, aborderont des sujets tels que la personnalisation du nouveau lecteur, la sécurité et le transcodage. J'ai souhaité aborder ces sujets, alors que Brightcove lance de nouveaux produits, car des questions similaires sont posées par des prospects, des clients et des partenaires. Par exemple, les clients qui avaient investi dans le Smartplayer de Brightcove, basé sur Flash, voulaient savoir par où commencer et quelle était l'étendue de la personnalisation offerte par le nouveau lecteur.
Le lecteur Brightcove est une version moderne d'un lecteur vidéo, qui utilise HTML5 dans la mesure du possible. Vous serez peut-être intéressé d'apprendre qu'il s'agit à l'origine d'un projet open-source sponsorisé par Brightcove, Video.js. Aujourd'hui, il ne cesse de s'améliorer et permet aux développeurs de gagner du temps en créant des expériences vidéo uniques pour leurs visiteurs. Permettez-moi de vous présenter quelques exemples d'utilisation de cette technologie.
LECTEURS VIDÉO HTML5 FACILES À PERSONNALISER
La personnalisation est généralement un mot qui suscite l'inquiétude. Ne craignez rien. Le lecteur étant conçu en HTML5, il est hautement personnalisable et extensible. Vous souhaitez peut-être modifier les couleurs de l'habillage du lecteur vidéo pour l'adapter à votre site Web, collecter des mesures tout en les envoyant à une plate-forme d'analyse (autre que Brightcove Analytics) et permettre des interactions à l'intérieur de la page : tout cela est possible. Avec quelques connaissances en JS et CSS, vous pouvez vraiment personnaliser le lecteur vidéo comme vous le souhaitez et avec facilité.
La personnalisation de l'apparence du lecteur vidéo est simple et repose principalement sur les feuilles de style CSS. Il est possible de modifier le bouton du lecteur, de réduire la zone de lecture, de modifier l'emplacement du bouton de lecture et bien d'autres choses encore. Pour une personnalisation légère, le module Players du Studio vous permet de modifier la couleur de la zone de lecture. Pour des modifications plus sophistiquées, remplacez le CSS du lecteur au niveau de la page ou ajoutez un fichier CSS au lecteur.
Ressource: Comment personnaliser l'apparence du lecteur vidéo
Exemple de personnalisation de l'habillage d'un lecteur vidéo
CRÉER DES INTERACTIONS AVEC DES PLUGINS DE LECTEURS VIDÉO
L'aspect le plus puissant du lecteur est clairement les plugins et les JS/CSS de la page, qui pilotent les interactions du lecteur. Ces API de lecteur vidéo vous permettent d'écouter les événements et d'entreprendre/programmer une action. Il peut s'agir d'une action aussi simple que l'ajout d'un bouton de téléchargement ou aussi complexe que l'envoi de données à Google Analytics ou Omniture.
Ressource: Démarrage rapide du développement de plugins
L'une des raisons d'intégrer les interactions dans un plugin, plutôt que sur la page, est que le plugin peut résider dans le code du lecteur vidéo. Dans le cadre du processus de création du lecteur, le code JS du plugin est intégré et boulonné dans le fichier JS du lecteur, ce qui signifie que pour chaque requête du lecteur, un seul fichier doit être envoyé. En fait, lorsque je crée un plugin, je commence par construire la fonctionnalité dans un fichier JS, qui est appelé dans la page contenant le lecteur vidéo. De cette façon, je peux revoir le code du plugin, consulter la console Developer et ajuster le code du plugin. Une fois que le plugin a atteint le point où la fonctionnalité souhaitée est en place, j'intègre le code dans un plugin et je l'attache au lecteur.
Le codage d'un lien connexe dans le lecteur vidéo permet de rassembler tous vos contenus connexes.
Comme le lecteur Brightcove contient le cœur du lecteur Video.js, il existe une vaste bibliothèque de modules qui peuvent être utilisés avec le lecteur Brightcove. Remarque : tous les modules de la bibliothèque VideoJS n'ont pas été testés avec le lecteur Brightcove et sont donc fournis tels quels.
Si vous avez besoin d'espace pour héberger vos fichiers CSS et/ou JS pour le lecteur, nous avons même la possibilité d'héberger ces fichiers dans un dépôt de type git. Les dépôts peuvent être créés pour chaque compte, en utilisant l'API du système de livraison. Une fois que vous avez créé le dépôt et poussé les fichiers dans le dépôt, ces fichiers peuvent être référencés par le lecteur, dans la section Plugins.
EXEMPLES DE PERSONNALISATION DU LECTEUR VIDÉO
Vous cherchez à vous inspirer de ce que vous pouvez faire avec le lecteur ? Le salon du lecteur, organisé par les ingénieurs commerciaux de Brightcove, présente des exemples de personnalisation du lecteur. Nous avons également partagé des articles pratiques avec des instructions étape par étape. Consultez la section Échantillons de code de la documentation du lecteur Brightcove pour commencer rapidement. J'espère que cet article a aiguisé votre curiosité sur le lecteur Brightcove et sur la facilité avec laquelle il est possible d'étendre ses fonctionnalités. La prochaine fois, je traiterai du transcodage.
