Définition de styles pour les lecteurs

Product
Video Cloud
S'applique aux utilisateurs
Éditeur
Version
Brightcove 5
Modules
Module d'édition
Édition
Tous

Vous pouvez personnaliser l’apparence de votre lecteur de plusieurs façons différentes pour qu’il corresponde à la stratégie de marque de votre entreprise, au contenu qu’il diffuse, au style de la page ou à tout autre facteur qui influence vos besoins de conception. La vue Editer les styles permet de personnaliser chaque composant de votre lecteur. Les combinaisons de couleurs et de styles sont presque infinies. Vous pouvez également personnaliser les composants à image, les images d’arrière-plan, les labels et les URL de redirection.

Si vous êtes un client Brightcove Pro ou Enterprise, vous pouvez également créer des modèles de lecteur personnalisés avec BEML, la fonctionnalité de modèle de lecteur XML de Brightcove.

Définition de styles

Pour définir ou modifier l’apparence d’un lecteur :

  1. Dans le module d’édition, sélectionnez le lecteur.
  2. Cliquez sur Styles dans la barre d’outils d’actions. La vue Editer les styles s’affiche :

    Modifier les styles

  3. Sélectionnez les composants à modifier. Vous pouvez sélectionner un composant soit en cliquant dessus dans l’affichage principal, soit en cliquant sur son nom dans le volet Zones modifiables à droite. Lorsque vous sélectionnez un composant, il est surligné dans l’affichage principal.
  4. Modifiez les composants sélectionnés. Les propriétés modifiables dépendent du composant, comme décrit ci-dessous.
  5. Cliquez sur Enregistrer et fermer lorsque vous avez terminé.

Définition de styles généraux

La définition de styles généraux pour votre lecteur permet de sélectionner une image d'arrière-plan, un jeu de couleurs et un thème généraux.

Définition de la couleur et du thème général

Procédez comme suit :

  1. Dans Zones modifiables, sélectionnez Général.
  2. Sous Modifier, cliquez sur l’onglet Couleurs et thèmes.
  3. Dans les menus déroulants, sélectionnez le thème et le jeu de couleurs à utiliser. Vous pouvez sélectionner un ou deux jeux de couleurs (clair et sombre) et un thème parmi trois (de luxe, simple ou minimal) pour personnaliser votre lecteur.

Définition de l’image d’arrière-plan général

Pour sélectionner une image d’arrière-plan :

  1. Sous Zones modifiables, sélectionnez Général.
  2. Sous Modifier, cliquez sur l’onglet Sélection d’image.
    • Cliquez sur Charger pour charger une nouvelle image. L’image chargée devient alors disponible dans votre médiathèque.
    • Cliquez sur Changer pour passer de l’image actuelle à une autre image de la médiathèque.
    • Cliquez sur X pour désélectionner l’image actuelle.

Sélection d’images pour les composants à image

Vous pouvez sélectionner des propriétés d'images pour votre lecteur. Dans certains lecteurs, vous pouvez définir une image d’arrière-plan et des images pour les différents composants. Par exemple, les lecteurs Navigation par onglets et Navigation par onglets compacts peuvent intégrer des images dans les composants suivants :

  • Image supérieure
  • Image inférieure

Vous pouvez également définir les URL cibles de l’image cliquable et le texte de l’info-bulle pour les composants à image. Tous les modèles de lecteurs ne prennent pas en charge les composants à image ; consultez la rubrique Modèles de lecteurs pour plus d’informations, comme notamment les dimensions des composants à image.

Pour définir les propriétés d’image :

  1. Sous Zones modifiables, sélectionnez le composant à image à modifier.
  2. Sous Modifier de l’onglet Sélection d’image :
    • Cliquez sur Charger pour charger une nouvelle image.
    • Cliquez sur Sélectionner pour passer de l'image actuelle à une autre image de la médiathèque.
    • Cliquez sur X pour désélectionner l’image actuelle.
  3. Si vous le désirez, vous pouvez entrer dans le champ Cible de l'image cliquable l'URL sur laquelle seront redirigés les spectateurs lorsqu'ils cliqueront sur l'image. Un contrôle de validation s’ensuit ; si l’une de vos URL est incorrecte, vous ne pourrez pas la sauvegarder.
  4. Dans le champ Info-bulle, vous pouvez entrer le texte qui s’affichera lorsque l’utilisateur passe le curseur sur l’image.

Pour des performances optimales, les images ne doivent pas dépasser 1 Mo. Elles doivent également avoir une taille appropriée pour son emplacement dans le modèle de lecteur ; consultez la rubrique Modèles de lecteurs pour plus d’informations.

Définition des couleurs des composants

La plupart des composants des lecteurs acceptent des couleurs personnalisées. Le nombre de paramètres de couleur modifiables d'un composant varie selon sa fonction et le thème ou jeu de couleurs sélectionné. Par exemple, le lecteur vidéo: Le composant vidéo possède un seul paramètre de couleur, Arrière-plan, qui permet de définir la couleur d’arrière-plan affichée par l’écran vidéo lorsqu’il n’affiche pas de contenu. D’autres composants peuvent par contre avoir une conception et un comportement plus complexe ; par exemple, le composant Liste vidéo : icônes d’éléments de liste possède 10 paramètres de couleur différents :

  • Dégradé supérieur
  • Dégradé central
  • Dégradé inférieur
  • Dégradé supérieur au passage du curseur
  • Dégradé central au passage du curseur
  • Dégradé inférieur au passage du curseur
  • Dégradé supérieur de sélection
  • Dégradé central de sélection
  • Dégradé inférieur de sélection
  • Bordure

Vous pouvez ainsi personnaliser chaque aspect d'une icône d'élément de liste, avec différents paramètres de couleur pour les éléments visuels (bordure) et les divers états (normal, passage du curseur, sélectionné). Remarque : en choisissant un thème ou un jeu de couleurs général pour un lecteur, toutes les propriétés de couleur de tous les composants du lecteur sont remises à leur valeur par défaut pour ce thème ou jeu de couleurs.

Pour sélectionner une couleur :

  1. Dans la page Modifier les styles, sous Zones modifiables, sélectionnez le composant dont vous voulez modifier le style.
  2. Sous Modifier, cliquez sur l’onglet Couleurs et thèmes.
  3. Développez le nom du composant et cliquez sur le cadre de couleur :

    Une palette de couleurs s’affiche :

    Sélectionnez la couleur désirée en cliquant sur le carré de couleur correspondant ou en entrant le code hexadécimal de la couleur dans le champ de texte et en appuyant sur Entrée. Le cadre de couleur affiche maintenant la couleur choisie.

Utilisation des dégradés

Certains composants et thèmes acceptent l’utilisation de dégradés de couleur dans les parties supérieure, centrale et inférieure du composant. Si vous ne voulez pas de dégradé, définissez les dégradés supérieur, central et inférieur sur la même valeur. Sinon, vous pouvez utiliser un thème qui ne prend pas en charge les dégradés.

Remarque : en choisissant un thème ou un jeu de couleurs général pour un lecteur, toutes les propriétés de couleur de tous les composants du lecteur sont remises à leur valeur par défaut pour ce thème ou jeu de couleurs.

Balises
couleurs, apparences, styles