Étape par étape : Personnalisation des joueurs
Aperçu
Ce document comporte plusieurs sections comme l'utilisation de CSS avec l'intégration dans la page et les implémentations iframe du lecteur sont très différentes.
Le contenu de ce document utilise les outils de développement de Chrome, mais tous les navigateurs modernes ont des fonctionnalités équivalentes. Pour une brève introduction à l'utilisation des outils de développement dans différents navigateurs, consultez le Notions de base sur le débogage document.
Déterminer le sélecteur de joueur
Les sélecteurs CSS vous permettent de sélectionner et de manipuler des éléments HTML sur une page. Les sélecteurs CSS sont utilisés pour « rechercher » (ou sélectionner) des éléments HTML en fonction de leur identifiant, de leur classe, de leur type, de leur attribut, etc. La première chose à faire lorsque vous tentez de modifier l'apparence d'un élément sur une page HTML est de déterminer le sélecteur à utiliser pour traiter l'élément. Les étapes suivantes montrent comment trouver le sélecteur pour le joueur, puis modifier sa taille.
- Dans Video Cloud Studio, ouvrez le Médias module et sélectionnez une vidéo à publier.
- Choisissez Publier et intégrer... → Publier sur le web, puis sélectionnez le lecteur avec lequel vous souhaitez lire la vidéo. Le lecteur par défaut de Brightcove fonctionne correctement.
- Met le Dimensionnement , Ratio d'aspect et la taille du joueur.
- Copiez le Avancée code de publication.
- À l'aide de votre éditeur HTML, créez une nouvelle page HTML.
- Collez le code de publication dans le corps de votre page HTML.
- Parcourez la page nouvellement créée.
- Ouvrez les outils de développement de votre navigateur, inspectez le code HTML et explorez le code HTML pour trouver le
<video-js>
étiqueter. Vous verrez le<video-js>
tag a une classe également nomméevideo-js
. le<video-js>
tag aura toujours une classe devideo-js
. Vous utiliserez levideo-js
classe fréquemment lors de la mise en forme du lecteur. - Consultez la capture d'écran ci-dessous pour voir la classe surlignée en rouge. Surligné en vert est le
<video-js>
tag, qui est, bien sûr, Brightcove Player.
Implémentation de code avancé
Lorsque vous travaillez avec les sélecteurs et les styles ci-dessus, les résultats ont été utilisés avec l'implémentation de code avancé du lecteur, comme indiqué ici:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style>
.video-js .vjs-big-play-button {
background-color: red;
opacity: .3;
}
</style>
</head>
<body>
<video-js data-account="1507807800001"
data-player="default"
data-embed="default"
controls=""
data-video-id="6065136830001"
data-playlist-id=""
data-application-id=""
width="640" height="360">
</video-js><script src="https://players.brightcove.net/1507807800001/default_default/index.min.js"></script>
</body>
</html>
Il s'agit d'une façon très courante d'utiliser CSS avec une page HTML. Vous voyez le <style>
bloc est sur la page avec le <video-js>
marque.
Remarque : En fonction de votre expérience CSS, vous vous demandez peut-être pourquoi le code ci-dessus n'a pas attribué de id
attribut au <video-js>
marque. Vous pouvez ensuite utiliser un sélecteur comme #myPlayer .vjs-big-play-button
. En fait, vous auriez pu et cela aurait fonctionné. Le problème est que le CSS créé à l'aide de sélecteurs d'ID ne fonctionnera pas lors de l'utilisation de l'implémentation du lecteur iframe, de sorte que seuls les noms de classes existants ont été utilisés. En n'utilisant pas de id
attribut, les styles seront directement applicables aux implémentations du lecteur iframe.
Implémentation de code standard
L'implémentation du code Standard, ou iframe, place, sans surprise, le Brightcove Player dans un iframe que vous placez ensuite dans une page HTML. Vous pouvez styler l'iframe lui-même, modifier sa taille par exemple, en utilisant des styles sur la page qui contient l'iframe, mais les styles de la page de l'iframe ne sont PAS en cascade dans l'iframe lui-même. L'iframe extrait littéralement une page HTML distincte, de sorte que les styles souhaités pour le contenu de l'iframe doivent être associés à la page HTML de l'iframe.
Lorsque vous utilisez l'implémentation iframe du lecteur Brightcove, les étapes pour appliquer CSS sont les suivantes :
- Placer les styles dans un fichier accessible à Internet
- Liez la feuille de style au lecteur (effectuée à l'aide de Studio ou de l'API Player Management)
Remarque : Les étapes suivantes supposent que vous travaillerez à partir du code HTML que vous avez terminé dans les étapes précédentes et affiché dans l'extrait de code ci-dessus. Si vous souhaitez conserver cela comme exemple de travail, copiez simplement le code dans un autre fichier et commencez les étapes suivantes dans le nouveau fichier.
- Dans Studio, publiez une vidéo et copiez le code d'une implémentation iframe du lecteur.
- Dans votre page HTML, remplacez le code intégré dans la page par le code iframe.
- Vérifiez que votre page HTML ressemble à ce qui suit :
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Untitled Document</title> <style> .video-js .vjs-big-play-button { background-color: red; opacity: .3; } </style> </head> <body> <iframe src="https://players.brightcove.net/1507807800001/default_default/index.html?videoId=6065136830001" allowfullscreen="" allow="encrypted-media" width="640" height="360"></iframe> </body> </html>
- Parcourez la page et vous verrez que les styles du bouton ne sont PAS utilisés.
- Créez un fichier nommé customize-qs.css et enregistrez-le dans un emplacement accessible à Internet.
- Coupez les styles du bouton et collez-les dans le fichier et enregistrez-le. Coupez uniquement les styles du bouton, vous ne pouvez pas inclure le
<style>
Mots clés. Le fichier doit contenir uniquement ce contenu :.video-js .vjs-big-play-button { background-color: red; opacity: .3; }
- Vérifiez que votre page HTML ressemble à ce qui suit :
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Untitled Document</title> </head> <body> <iframe src="https://players.brightcove.net/1507807800001/default_default/index.html?videoId=6065136830001" allowfullscreen="" allow="encrypted-media" width="640" height="360"></iframe> </body> </html>
- Dans Studio, allez dans le Joueurs module et modifiez le lecteur que vous utilisez pour ce démarrage rapide.
- Cliquez sur Plugins dans le menu de navigation de gauche.
- Cliquez sur Feuilles de style , puis le Ajouter une feuille de style et entrez votre chemin:
- Cliquez sur Save pour enregistrer les modifications apportées. Le lecteur de prévisualisation sur le côté droit de la page se mettra à jour pour afficher les styles CSS appliqués au bouton.
- Pour publier le lecteur, cliquez sur Publier et intégrer > Publier les modifications.
- Pour fermer la boîte de dialogue ouverte, cliquez sur Fermer.
- Revenez dans votre navigateur et actualisez la page. Une fois les modifications publiées actives, vous verrez vos styles appliqués au lecteur iframe. Il peut s'écouler plusieurs minutes avant que les modifications publiées ne soient visibles.
Découvrir les styles
Dans cette section, un CodePen est utilisé pour vous permettre d'explorer les styles et d'apporter plus de personnalisations au gros bouton de lecture que ce qui est montré ci-dessus. Une fois que vous avez l'apparence souhaitée, vous pouvez simplement copier le CSS généré et l'utiliser avec l'implémentation de l'un ou l'autre des joueurs, comme indiqué ci-dessus.
Un problème qui peut sembler déroutant est que la flèche réelle du bouton n'est pas une image mais fait partie d'une famille de polices. C'est pourquoi vous contrôlez sa taille en utilisant font-size
et ems
en utilisant comme unités.
Voir le stylo 5.x Personnalisation du bouton Big Play par Matt Boles (@mboles ) au Stylo de code.