Étape par étape : Personnalisation des joueurs

Dans cette rubrique, des étapes pratiques sont fournies pour personnaliser l'apparence du lecteur Brightcove lorsqu'il est suivi. Pour personnaliser l'apparence du lecteur Brightcove, vous devez utiliser les feuilles de style en cascade (CSS). Ce document passera par le processus de modification de l'apparence et de l'emplacement du bouton de lecture qui superpose initialement la vidéo.

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.

  1. Dans Video Cloud Studio, ouvrez le Médias module et sélectionnez une vidéo à publier.
  2. 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.
  3. Met le Dimensionnement , Ratio d'aspect et la taille du joueur.
  4. Copiez le Avancée code de publication.
  5. À l'aide de votre éditeur HTML, créez une nouvelle page HTML.
  6. Collez le code de publication dans le corps de votre page HTML.
  7. Parcourez la page nouvellement créée.
  8. 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ée video-js. le <video-js> tag aura toujours une classe de video-js. Vous utiliserez le video-js classe fréquemment lors de la mise en forme du lecteur.
  9. 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.
    sélecteurs de joueurs

Sélecteur de bouton de lecture

Une autre approche va être utilisée pour trouver le sélecteur pour le bouton de lecture. Les étapes suivantes vous montrent comment trouver le sélecteur approprié pour le bouton de lecture, puis modifier son apparence.

  1. Parcourez votre page HTML.
  2. Faites un clic droit sur le bouton de lecture qui se superpose au lecteur (vous devrez cliquer deux fois avec le bouton droit puisque le premier clic droit affiche les informations du Brightcove Player) et sélectionnez Inspecter.
  3. Notez que le <div> La balise en surbrillance représente le bouton de lecture et a une classe vjs-big-play-button.
    grand bouton de lecture div
  4. Modifiez vos styles pour inclure du CSS qui change la couleur et l'opacité du bouton de lecture.
    <style>
      .vjs-big-play-button {
        background-color: red;
        opacity: .3;
      }
    </style>
  5. Parcourez votre page et vous verrez que tous les styles n'ont pas été utilisés. Le bouton n'est pas rouge.
    bouton pas rouge
  6. Regardez à droite de vos outils de développement et vous verrez un résumé de vos styles. Vous pouvez regarder en bas et voir que la modification de l'arrière-plan en rouge est remplacée, représentée par le barré.
    arrière-plan des styles remplacé

    Ce qui s'est passé, c'est que de nombreux changements sont apportés à la couleur d'arrière-plan. Le style que vous avez défini a été remplacé dans la partie « en cascade » de CSS. Vous pouvez modifier cela en utilisant la fonctionnalité de CSS appelée spécificité. La spécificité détermine quelle règle CSS est appliquée par les navigateurs et est un type de pondération qui a une incidence sur la façon dont vos règles de feuille de style en cascade (CSS) sont affichées. En utilisant la spécificité, vous pouvez rendre votre style plus important que les autres, en le forçant à être utilisé. Il y a une brève introduction à la spécificité CSS dans le Personnaliser l'apparence du joueur doc, et de nombreuses références dans toute recherche.

  7. Dans ce cas, en utilisant le video-js class "boostera" vos styles pour qu'ils priment. Modifiez vos styles pour utiliser le nouveau sélecteur de combinaison. Notez qu'il y a un espace avant la dernière classe (les détails de la raison peuvent être trouvés dans les règles de spécificité).
    <style>
      .video-js .vjs-big-play-button {
        background-color: #ff0000;
        opacity: .3;
      }
    </style>  
  8. Parcourez votre page et voyez que tous les styles sont maintenant appliqués.
    travail de fond de styles
  9. Encore une fois, regardez à droite de vos outils de développement et vous verrez un résumé de vos styles. Vous voyez maintenant que votre changement de couleur d'arrière-plan n'est pas remplacé.
    arrière-plan des styles NON remplacé

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.

  1. Dans Studio, publiez une vidéo et copiez le code d'une implémentation iframe du lecteur.
  2. Dans votre page HTML, remplacez le code intégré dans la page par le code iframe.
  3. 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>
  4. Parcourez la page et vous verrez que les styles du bouton ne sont PAS utilisés.
  5. Créez un fichier nommé customize-qs.css et enregistrez-le dans un emplacement accessible à Internet.
  6. 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;
    }
  7. 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>
  8. Dans Studio, allez dans le Joueurs module et modifiez le lecteur que vous utilisez pour ce démarrage rapide.
  9. Cliquez sur Plugins dans le menu de navigation de gauche.
  10. Cliquez sur Feuilles de style , puis le Ajouter une feuille de style et entrez votre chemin:
    studio entrez css
  11. 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.
  12. Pour publier le lecteur, cliquez sur Publier et intégrer > Publier les modifications.
  13. Pour fermer la boîte de dialogue ouverte, cliquez sur Fermer.
  14. 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.