Personnalisation de l'apparence du joueur

Cette rubrique est une introduction à la personnalisation de l'apparence de Brightcove Player. Le contenu 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 Bases du débogage document.

Créez votre propre peau

Si vous ne souhaitez pas utiliser l'habillage par défaut et créer le vôtre, cela est possible à l'aide de l'API Player Management. Le Guide de configuration du joueur fournit les informations nécessaires.

Joueur

Vous pouvez modifier l'apparence du joueur, mais vous devez d'abord avoir un moyen d'y remédier. Pour voir cela, parcourez une page HTML avec le code avancé (incorporé dans la page) inséré. dans le Elements section des outils de développement localisez le <video-js> tag et vous verrez qu'il a une classe avec la valeur video-js assigné, parmi beaucoup d’autres.

personnaliser les éléments du joueur

Une fois que vous le savez, vous pouvez utiliser des styles pour modifier le lecteur lui-même. Par exemple, pour inclure une bordure autour du lecteur, vous pouvez utiliser ce style:

<style>
  .video-js {
    border-style: double;
    border-width: thick;
    border-color: red;
  }
</style>
personnaliser les éléments du joueur

lecteur iFrame

Si vous utilisez l'implémentation Standard (iframe) du lecteur, la situation est différente. Vous verrez toujours le joueur avec le video-js classe, mais ce sera, bien sûr, à l'intérieur de l'iframe, et à l'intérieur du video-js marque.

iframe-player-elements

Les styles que vous créez continueront de fonctionner avec le lecteur dans l'iframe, mais un fichier CSS devra être créé et associé au lecteur utilisant Studio. Vous faites cela en vous rendant au Joueurs module, puis cliquez sur le player auquel vous souhaitez associer le CSS, puis dans le Plugins> Feuilles de style section ajoutez le chemin de votre fichier CSS.

Si vous souhaitez personnaliser l'iframe lui-même, vous pouvez le faire en utilisant un sélecteur d'élément. Utilisez ensuite une <style> balise pour modifier comme vous le souhaitez. Dans l'exemple ci-dessous, une bordure est ajoutée autour du lecteur.

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Untitled Document</title>
  <style>
    .video-js {
      border-style: double;
      border-width: thick;
      border-color: red;
    }
  </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>

Bouton de lecture

Si vous souhaitez modifier l'apparence du bouton de lecture, vous devez d'abord savoir comment y remédier. Dans Chrome, faites un clic droit sur le bouton. Parmi les sélections qui apparaissent, choisissez Inspect. Lorsque vous sélectionnez Inspect , Chrome Outils de développement s'ouvrira.

bouton d'inspection

dans le Elements section des outils de développement, vous verrez le code HTML qui correspond à l'élément bouton.

gros bouton de lecture

À partir du code surligné ci-dessus, vous pouvez voir la classe attribuée au bouton est vjs-big-play-button. La couleur du bouton de lecture (pour correspondre au tigre) et l'opacité du bouton de lecture seront modifiées avec les styles suivants :

.vjs-big-play-button {
  background-color: #B37D5B;
  opacity: .6;
}

Vous penseriez que cette approche fonctionnerait, mais ce n'est pas le cas. Lorsque vous travaillez avec CSS, vous devez être conscient de la spécificité des propriétés. Il s'agit de la façon dont le navigateur détermine quelles valeurs de propriétés sont appliquées à un élément en fonction de leur pertinence.

Une façon d'appliquer les modifications du bouton consiste à ajouter une autre classe dans le sélecteur. Par exemple, vous pouvez utiliser le .video-js class pour augmenter la spécificité du sélecteur. Pour plus de détails, consultez le Spécificité CSS section

Ensuite, référencez le gros bouton de lecture du joueur dans le CSS comme suit :

.video-js .vjs-big-play-button {
  background-color: #B37D5B;
  opacity: .6;
}

Voici le résultat du changement du bouton du gris foncé à l'orange :

bouton de lecture orange

Bouton Masquer la lecture

Vous pouvez masquer complètement le bouton de lecture en utilisant le style suivant :

display: none;

Expérience

Le CodePen suivant vous permet d'expérimenter le bouton de lecture. Notez que le triangle du bouton de lecture est en fait une police et que sa taille est contrôlée par un font-size style.

Découvrez la personnalisation du bouton Pen Big Play par Brightcove Learning Services (@rcrooks1969) sur CodePen.

Modifier le texte de survol

Si vous souhaitez modifier le texte qui s'affiche lorsque vous survolez le gros bouton de lecture, qui est Lire la vidéo par défaut, pour quelque chose de plus spécifique à vos vidéos, vous pouvez le faire. Ajoutez le JavaScript suivant en utilisant le verbiage souhaité comme argument pour le controlText méthode.

videojs.getPlayer('myPlayerID').ready(function() {
  var myPlayer = this;
  myPlayer.getChild('bigPlayButton').controlText('Play Audio');
});

Contrôle la visibilité

Vous pouvez contrôler si vous voulez que la barre de contrôle et les contrôles qu'elle contient soient visibles ou non. Si vous souhaitez masquer la barre de contrôle dès le début de la création du lecteur, vous pouvez utiliser ce style:

.video-js .vjs-control-bar {
  display: none;
}

Si vous souhaitez le faire de manière dynamique en fonction d'un événement, vous pouvez utiliser le controlBar.hide()/show() méthodes. L'extrait de code ci-dessous illustre les méthodes utilisées (cela suppose que vous ayez un id avec une valeur de myPlayer sur la vidéo):

<video-js id="myPlayerID"
  data-account="1507807800001"
  data-player="default"
  data-embed="default"
  controls=""
  data-video-id="5781068653001"
  data-playlist-id=""
  data-application-id=""
  width="960" height="540"></video-js>
<script src="https://players.brightcove.net/1507807800001/default_default/index.min.js"></script>

<p><button onclick="hideBtn()">hide controls</button></p>
<p><button onclick="showBtn()">show controls</button></p>

<script>
  var myPlayer;
	videojs.getPlayer('myPlayerID').ready(function() {
		myPlayer = this;
	});

	function hideBtn() {
		myPlayer.controlBar.hide();
	}

	function showBtn() {
		myPlayer.controlBar.show();
	}
</script>

Les contrôles ne se cachent jamais

Vous pouvez également faire en sorte que les commandes ne se cachent jamais. Pour ce faire, utilisez le transform.none style. Le sélecteur est très long puisque six classes sont utilisées pour la spécificité des transformations.

.video-js.not-hover.vjs-has-started.vjs-paused.vjs-user-active .vjs-control-bar:not(.vjs-focus-within):not(.vjs-control-bar-visible),
.video-js.not-hover.vjs-has-started.vjs-paused.vjs-user-inactive .vjs-control-bar:not(.vjs-focus-within):not(.vjs-control-bar-visible),
.video-js.not-hover.vjs-has-started.vjs-playing.vjs-user-active .vjs-control-bar:not(.vjs-focus-within):not(.vjs-control-bar-visible),
.video-js.not-hover.vjs-has-started.vjs-playing.vjs-user-inactive .vjs-control-bar:not(.vjs-focus-within):not(.vjs-control-bar-visible),
.video-js.vjs-has-started.vjs-paused.vjs-ad-playing.vjs-user-inactive .vjs-control-bar,
.video-js.vjs-has-started.vjs-playing.vjs-user-inactive .vjs-control-bar:not(.vjs-focus-within):not(.vjs-control-bar-visible){
  transform: none;
  -webkit-transform: none;
  -ms-transform: none;
}

Barre de progression

Vous allez maintenant voir comment changer la couleur de l'indicateur de progression. La couleur par défaut de l'indicateur est le fuchsia, comme indiqué ici:

personnaliser les éléments du joueur

Le défi consiste ici à trouver les noms de classes pour les éléments. En utilisant la même technique que celle décrite précédemment dans le document, cliquez avec le bouton droit sur un élément et choisissez Inspect , puis en regardant vers le bas, vous verrez le vjs-play-progress classe.

éléments de progression et de volume

le background-color change la couleur de l'élément et doit être stylisé. Le style nécessaire est illustré ici :

.video-js .vjs-play-progress {
  background-color: green;
}

Notez que la .video-js classe a été ajoutée au sélecteur. Ceci est fait pour augmenter la spécificité CSS du sélecteur.

Les résultats apparaissent comme suit, affichant une barre de progression maintenant verte:

personnaliser les éléments du joueur

Commandes de volume

Vous pouvez personnaliser le contrôle du volume en utilisant CSS ou en passant le options objet lors de la création du joueur.

Mettre à jour à l'aide de CSS

Vous allez maintenant voir comment changer la couleur des commandes de volume. L'aspect par défaut est montré ici, un bouton de volume blanc avec une barre de niveau de volume fuchsia:

personnaliser les éléments du joueur

Pour changer la couleur du bouton de volume et le bouton de sourdine lorsque vous cliquez dessus, utilisez le sélecteur illustré ici:

.vjs-volume-panel.vjs-control.vjs-volume-panel-horizontal {
  color: yellow;
}

Pour changer la couleur de la barre de volume, le background-color de l'élément doit être stylisé. Le style nécessaire est illustré ici :

.video-js .vjs-volume-level{
  background-color: yellow;
}

Notez que la .video-js classe a été ajoutée au sélecteur. Ceci est fait pour augmenter la spécificité CSS du sélecteur.

Les résultats de la mise en forme du bouton et de la barre de volume sont affichés ici:

personnaliser les éléments du joueur

Mettre à jour à l'aide de l'objet d'options

Pour modifier la disposition du contrôle du volume, vous pouvez passer le options objet dans le méthode bc () comme suit:

  1. Retardez la création du lecteur en supprimant les attributs suivants du video marque:
    • data-account
    • data-player
    • data-video-id
  2. Définir les options objet de sorte que le volumePanel est vertical et non aligné avec la barre de contrôle. 
    var options = {
  controlBar: {
    volumePanel: {
      inline: false,
      vertical: true
    }
  }
};
  3. Ajoutez les attributs de joueur initialement supprimés.
  4. Créez le joueur en appelant le méthode bc () avec le options objet. 
    bc("myPlayerID", options);
  5. Pour plus de détails, consultez le Contrôle du volume vertical échantillon de joueur.
    personnaliser les éléments du joueur

Polices

Le titre et la description apparaissent lorsque le lecteur est chargé pour la première fois et lorsque l'utilisateur survole le lecteur. Vous pouvez modifier le style des polices pour le titre et la description, ensemble ou séparément. Le HTML pour le Dock apparaît comme indiqué dans la capture d'écran suivante. Notez qu'il y a un <div> élément avec une classe de vjs-dock-text qui contient deux autres <div> éléments qui contiennent le Titre et la description.

sélecteurs de texte d'ancrage

Vous pouvez affecter à la fois le titre et la description en définissant un style sur le vjs-dock-text classe. Notez que les styles définis sur le .vjs-dock-title et .vjs-dock-description ne sera, bien entendu, pas complètement écrasé par le style défini à un niveau supérieur. Certains styles sont hérités, comme le montrent le style suivant et son résultat sur le texte:

.video-js .vjs-dock-text {
  color: yellow;
  font-size: .7em;
}
exemple de sélecteur de texte d'ancrage

Vous pouvez directement styliser le titre et la description individuels. Ce qui suit montre les styles définis sur le .vjs-dock-title et .vjs-dock-description sélecteurs de classe, avec le texte résultant affichant les styles:

.video-js .vjs-dock-title {
  color: red;
  font-size: 1.5em;
}
.video-js .vjs-dock-description {
  color: yellow;
  font-size: 1.0em;
}
sélecteurs de titre et de description

Manipulation des icônes de la barre de contrôle

Ordre des icônes de la barre de contrôle déterminé par l'ordre du code HTML <div>s dans la barre de contrôle parent <div>. Ici vous voyez la barre de contrôle <div> avec tous ses enfants.

elements-controlbar-div

En règle générale, c'est l'approche à adopter lors de la mise en icône dans la barre de contrôle:

  • Construisez dynamiquement l'élément que vous souhaitez insérer dans la barre de contrôle.
  • Obtenez une référence à l'élément de la barre de contrôle.
  • Obtenez une référence à l'élément devant lequel vous souhaitez insérer votre nouvel élément dans la barre de contrôle.
  • Utilisez le JavaScript insertBefore() méthode pour placer l'icône.

Plus précisément, le code suivant est utilisé pour insérer une icône de téléchargement de vidéo devant l'icône de volume:

  • Lignes 280-285: Style pour le bouton de téléchargement.
  • Lignes 291-295: Attribuez des variables et créez des éléments HTML pour:
    • le <div> qui contiendra l'icône de l'icône de téléchargement.
    • La balise d'ancrage qui rend l'icône cliquable.
    • L'image de l'icône elle-même.
  • Lignes 297-2980: Attribuez des classes id et CSS au nouvel élément.
  • Ligne 300: Attribuez une source à l'image.
  • Ligne 301: Attribuer un href vers le lien.
  • Ligne 302 : Ajoutez l'image au lien.
  • Ligne 303: Ajoutez le lien au fichier créé dynamiquement <div>.
  • Ligne 306: Obtenir une référence à la barre de contrôle à utiliser avec insertBefore().
  • Ligne 308: Obtenez une référence à l'élément devant lequel la nouvelle icône sera insérée, à utiliser avec insertBefore().
  • Ligne 310: Insérez l'élément créé dynamiquement.
<!-- styles for page -->
  /* Style the download icon */
  #downloadButton {
      width: 34px;
      height: 33px;
      margin-top: 6px;
  }
</style>

<script type="text/javascript">
  videojs.getPlayer('myPlayerID').ready(function() {
    // Create variables and new div, anchor and image for download icon
    var myPlayer = this,
      controlBar,
      newElement = document.createElement('div'),
      newLink = document.createElement('a'),
      newImage = document.createElement('img');
    // Assign id and classes to div for icon
    newElement.id = 'downloadButton';
    newElement.className = 'downloadStyle vjs-control';
    // Assign properties to elements and assign to parents
    newImage.setAttribute('src','http://solutions.brightcove.com/bcls/brightcove-player/download-video/file-download.png');
    newLink.setAttribute('href','http://www.brightcove.com');
    newLink.appendChild(newImage);
    newElement.appendChild(newLink);
    // Get controlbar and insert before elements
    // Remember that getElementsByClassName() returns an array
    controlBar = document.getElementsByClassName('vjs-control-bar')[0];
    // Change the class name here to move the icon in the controlBar
    insertBeforeNode = document.getElementsByClassName('vjs-volume-menu-button')[0];
    // Insert the icon div in proper location
    controlBar.insertBefore(newElement,insertBeforeNode);
  });

Ici, vous voyez le résultat du code, avec l'icône nouvellement insérée surlignée en jaune:

download-icon-before-volume

Si vous souhaitez avoir l'icône dans un emplacement différent, il vous suffit de changer le code qui obtient l'élément à insérer devant. Par exemple, pour déplacer la nouvelle icône devant le bouton plein écran, utilisez ceci:

insertBeforeNode = document.getElementsByClassName('vjs-fullscreen-control')[0];

Le résultat apparaîtrait comme suit:

download-icon-before-fullscreen

Icône à l'extrême droite

Si vous souhaitez que l'icône apparaisse à l'extrême droite de la barre de contrôle, vous devez remplacer insertBefore() avec le appendChild() méthode, comme indiqué ici:

controlBar.appendChild(newElement);

Un exemple d'ajout d'une icône (pour télécharger un fichier dans ce cas) est illustré dans l' exemple de Brightcove Player : Téléchargez le document Video Plugin.

Utilisez l'entretoise

Bien que les techniques ci-dessus fonctionnent pour placer des icônes sur la barre de contrôle, il est possible qu'elles ne soient pas compatibles avec d'autres codes qui manipulent la barre de contrôle. De plus, vous ne voudriez probablement pas extraire le code dans un plugin pour une réutilisation générale.

Les faiblesses du paragraphe précédent peuvent être surmontées en utilisant le espaceur élément inséré dans la barre de contrôle spécialement pour l'ajout d'icônes. L'inconvénient de l'espaceur est que vous n'avez pas un contrôle total sur l'endroit où l'icône peut être placée, alors que vous le faites en utilisant les techniques présentées précédemment dans cette section.

L'élément d'espacement est situé dans la barre de contrôle entre les informations de temps à gauche et l'icône plein écran à droite, comme illustré dans la capture d'écran suivante (mise en évidence dans l'ovale vert). Remarque dans le Éléments section des outils de développement l'élément est défini un HTML <div>.

espaceur

Pour placer une icône dans l'élément d'espacement, vous utilisez le code suivant, qui est très similaire au code présenté plus haut dans cette section. Le résultat du code est affiché dans la capture d'écran qui suit l'extrait de code.

// Get the spacer element
spacer = document.getElementsByClassName('vjs-spacer')[0];
// Place the new element in the spacer
spacer.appendChild(newElement);
spacer-gauche

Si vous souhaitez placer l'icône sur le côté droit de l'espaceur, une autre ligne de code doit être utilisée. La disposition d'espacement est contrôlée par une Flexbox HTML. Ainsi, en ajoutant un style Flexbox, vous pouvez pousser l'icône ajoutée vers la droite. Le résultat du code est affiché dans la capture d'écran qui suit l'extrait de code.

// Set the content of the spacer to be right justified
spacer.setAttribute("style", "justify-content: flex-end;");
spacer-right
/playback/ios-and-brightcove-player.html/playback/ios-and-brightcove-player.html

Supprimer le bouton plein écran

Il peut y avoir des problèmes si vous autorisez la visualisation en plein écran des vidéos sur iOS, détaillé dans le iOS et Brightcove Player document. Si vous souhaitez supprimer le bouton plein écran de la barre de contrôle, vous pouvez utiliser ce code:

<script type="text/javascript">
  videojs.getPlayer('myPlayerID').ready(function() {
    var myPlayer = this,
      fullScreenElement = document.getElementsByClassName("vjs-fullscreen-control")[0];
    if (videojs.browser.IS_IOS ) {
      fullScreenElement.parentNode.removeChild(fullScreenElement);
    }
  });
</script>

Noter la if afin que le bouton ne soit supprimé que sur les appareils iOS.

Icône de la barre de contrôle "lueur"

Vous pouvez modifier l'ombre du texte (parfois appelée «lueur») des icônes de la barre de contrôle. Par exemple, vous souhaiterez peut-être changer la couleur ou augmenter la lueur pour mettre davantage l'accent sur l'icône. La capture d'écran suivante montre l'ombre du texte en rouge.

ombre de texte rouge

L'effet montré se fait en changeant le CSS text-shadow. Le sélecteur détermine que le changement ne se produira que si l'icône a des états de focus ou de survol.

.video-js .vjs-control:hover:before, .video-js .vjs-control:focus:before {
  text-shadow: 0 0 1em #f00,0 0 1em #f00,0 0 1em #f00;
}

Pour plus d'informations sur le plutôt complexe text-shadow style, voir MDN ombre de texte document.

Dégradé de survol

Lorsque le lecteur est chargé pour la première fois et lorsque vous passez la souris sur le lecteur, le titre de la vidéo s'affiche, ainsi qu'un dégradé noir à transparent sur la partie supérieure du lecteur. Cette section vous montrera comment modifier le dégradé.

Le dégradé réel est contrôlé par le CSS linear-gradient fonction dans le vjs-dock-text HTML <div>. La taille du dégradé peut être contrôlée par la hauteur du vjs-dock-text HTML <div>. Voici cet élément, et ses enfants, du joueur:

<div class="vjs-dock-text">
  <h1 class="vjs-dock-title">Tiger</h1>
  <h2 class="vjs-dock-description"></h2>
</div>

Les valeurs par défaut du dégradé utilisent la rgba() (rouge-vert-bleu-alpha), comme illustré ici:

linear-gradient(180deg,rgba(0,0,0,.8) 25%,transparent 100%);

Ces valeurs provoquent un fondu horizontal du dégradé à partir du noir, avec un alpha de .8 , à transparent. La valeur de 25% est une valeur limite, c'est-à-dire la valeur définie dans le rgba La fonction sera utilisée pour les 25 premiers% de l'espace avant que le fondu en transparent ne commence.

À des fins pédagogiques, comme vous n'utiliseriez pas ce dégradé en production, le style suivant crée le dégradé dans la capture d'écran.

.video-js .vjs-dock-text {
  background: linear-gradient(45deg, rgba(0,0,255,.8) 35%, transparent);
  height: 80%;
}
mauvais dégradé bleu

Dans cet exemple, un dégradé bleu avec un alpha de 0,8 est appliqué à un angle de descente de 45 degrés. La couleur / alpha définie dans le dégradé linéaire sera utilisée pour les 35 premiers% du dégradé avant qu'il ne commence à s'estomper. En outre, 80% de la hauteur de l'élément est utilisé.

Le CodePen suivant vous permet d'expérimenter des valeurs. Démarrez la vidéo et la souris pour voir le dégradé subtil utilisé par défaut.

Voir le stylo Peau de Luna dégradée au survol par Brightcove Learning Services (@bcls ) sur CodePen.

Éléments de la liste de légendes

Si vous souhaitez styliser / contrôler les éléments de la liste dans le menu des légendes, les sélecteurs sont affichés ici:

Sélecteurs d'éléments de liste de sous-titres

Vous pouvez styliser tous les éléments à l'aide du sélecteur:

.vjs-subs-caps-button .vjs-menu .vjs-menu-content .vjs-menu-item.

Spécificité CSS

La spécificité CSS fait référence à la façon dont les navigateurs déterminent quelles valeurs de propriétés sont appliquées à un élément en fonction de leur pertinence. Pour plus de détails sur ce concept, consultez le Spécificité article.

Dans Chrome, inspectez le gros bouton de lecture. Notez que la background propriété est définie à l'aide de plusieurs classes. Cela signifie que nous ne pouvons pas utiliser uniquement la .vjs-big-play-button classe unique pour remplacer cette propriété.

play-button-classes

Voici trois approches pour personnaliser le gros bouton de lecture :

  • Référence à un identifiant attribué au joueur.
  • Utilisez plusieurs classes pour augmenter la pertinence des propriétés.
  • Utilisez JavaScript pour définir l'attribut id sur le lecteur, puis le référencer dans le CSS.

Référencement d'un identifiant

Étant donné qu'un id attribut présente une grande pertinence en ce qui concerne la spécificité CSS, l'ajout d'un attribut id au sélecteur CSS remplacera la valeur background-color propriété.

Si ce n'est pas déjà fait, ajoutez un id attribut à l' video élément comme suit :

<video-js id="video_1"
  data-account="1752604059001"
  data-player="68f30408-8fb4-431d-accb-8c5baa8c4790"
  data-embed="default"
  controls=""></video-js>

Dans le CSS, ajoutez la valeur id au sélecteur de .vjs-big-play-button classe. Remplacez la couleur et l'opacité de l'arrière-plan comme suit :

<style>
  #video_1 .vjs-big-play-button {
      background-color: #B37D5B;
      opacity: .6;
    }
    .video-js {
      width: 640px;
      height: 360px;
    }
</style>

Vous devriez voir que le gros bouton de lecture est maintenant orange.

bouton-lecture-orange.png

Utilisation de plusieurs classes

Depuis le background La propriété du gros bouton de lecture est définie à l'aide de deux classes, vous aurez besoin d'au moins deux classes dans le sélecteur CSS pour remplacer cette propriété.

Ajoutez la .video-js classe au sélecteur de .vjs-big-play-button classe. N'oubliez pas que la .video-js classe est définie sur le conteneur vidéo.

Avec ces valeurs, nous disons de sélectionner tous les éléments avec un nom de classe de vjs-big-play-button qui sont des descendants d'éléments avec un nom de classe de .video-js.

<style>
  .video-js .vjs-big-play-button {
    background-color: #B37D5B;
    opacity: .6;
  }
  .video-js {
    width: 640px;
    height: 360px;
  }
</style>

Vous devriez voir que le gros bouton de lecture est maintenant orange. L'utilisation de plusieurs classes peut être délicate et peut affecter plusieurs éléments, alors qu'un identifiant est spécifique à un élément.

Utilisation de JavaScript

Vous pouvez également utiliser JavaScript pour ajouter dynamiquement un identifiant au gros bouton de lecture. Ensuite, vous pouvez référencer cet identifiant à partir du CSS.

Ajoutez du code pour ajouter un identifiant à l'élément gros bouton de lecture.

  • Ligne 173 : Obtient une référence au premier élément ayant une classe de vjs-big-play-button.
  • Ligne 174 : Ajoute un id attribut au grand bouton de lecture.
  <script type="text/JavaScript">

    var playButton = document.getElementsByClassName("vjs-big-play-button")[0];
    playButton.setAttribute("id", "myPlayButton");

  </script>

Dans le CSS, modifiez le sélecteur pour utiliser le nom myPlayButton d'identifiant.

<style>
    #myPlayButton {
      background-color: #B37D5B;
      opacity: .6;
    }
    .video-js {
      width: 640px;
      height: 360px;
    }
  </style>

Vous devriez voir que le gros bouton de lecture est maintenant orange.

Sélecteurs de composants

Ces captures d'écran et le tableau suivant montrent les composants et les sélecteurs CSS nécessaires pour manipuler ce composant. Pour plus d'informations sur les composants eux-mêmes, consultez le Aperçu des composants doc.

Sur la charge et le survol du joueur

composants en charge

Pendant la lecture

lecture des composants

Résumé des sélecteurs de composants

Composante Sélecteur
Bouton de lecture .video-js.vjs-mouse .vjs-big-play-button
Barre de contrôle .video-js .vjs-control-bar(Hérité des icônes dans la ControlBar, mais PAS dans ProgressControl)
    Jouer à bascule .video-js .vjs-play-control
    Bascule Muet .vjs-volume-panel.vjs-control.vjs-volume-panel-horizontal
        VolumeBar .vjs-volume-bar.vjs-slider-bar.vjs-slider.vjs-slider-horizontal
            Niveau de volume .video-js .vjs-volume-level
    Affichage de l'heure actuelle .video-js .vjs-current-time
    Videur de temps .video-js .vjs-time-divider
    Affichage de la durée .video-js .vjs-duration
        Barre de recherche .video-js .vjs-progress-control.vjs-control
        Barre de progression du chargement .video-js .vjs-load-progress
        Barre de progression de lecture .video-js .vjs-play-progress.vjs-slider-bar
    Piste audio .video-js .vjs-control-bar .vjs-audio-button
    Bouton Chapitres .video-js .vjs-chapters-button.vjs-menu-button
    Bouton Légendes .video-js .vjs-captions-button.vjs-menu-button
    Sélecteur de qualité .vjs-quality-menu-wrapper.vjs-menu-button.vjs-menu-button-popup.vjs-control.vjs-button.vjs-quality-menu-button-use-resolution
    Bascule plein écran .video-js .vjs-fullscreen-control.vjs-control
DockText .vjs-dock-text(Hérité de DockTitle et DockDescription)
    Titre du DockTle .vjs-dock-title
    Description du quai .vjs-dock-description

Si le sélecteur que vous recherchez ne figure pas dans le tableau, veuillez nous en informer en envoyant un e-mail au Équipe de connaissances et nous allons le mettre sur la table.

{PLAYER_CLASS}

le {PLAYER_CLASS} est un sélecteur et sera remplacé par le sélecteur spécifique à la classe du joueur, par exemple:

.bc-player-oH9IdGudo_default

{PLAYER_CLASS} vous aide à rendre votre CSS suffisamment spécifique pour écraser les styles intégrés sans avoir à créer du CSS pour chaque lecteur individuellement ou à utiliser quelque chose comme:

.video-js.video-js

Par exemple, disons que vous souhaitez remplacer la flèche de chargement, vous pouvez utiliser:

.video-js.video-js .vjs-loading-spinner {...}

C'est assez spécifique pour remplacer la valeur par défaut, mais si vous avez un deuxième joueur sur la page. L'utilisation de ce qui suit n'affectera aucun autre joueur de la page:

.video-js{PLAYER_CLASS} .vjs-loading-spinner {...}

Notez que le {PLAYER_CLASS} Le sélecteur ne peut être utilisé que dans les fichiers CSS qui sont ajoutés à un tableau de feuilles de style de configuration de lecteur (par exemple, via Studio ou l'API de gestion de lecteur) et intégrés directement dans le lecteur. Ce sélecteur ne fonctionnera pas avec le code d'implémentation avancé CSS inclus séparément via <style></style> ou <link></link> Mots clés.