Contacter le support | État du système
Contenu de la page

    légendes de style

    Dans cette rubrique, vous apprendrez comment styliser les légendes.

    L'apparence par défaut des sous-titres est sujette à modification ; c'est pourquoi vous pouvez préférer leur donner un style. Il existe plusieurs façons de procéder pour personnaliser le style des sous-titres :

    Ajout d'options de style au fichier WebVTT

    Les options de style peuvent être appliquées directement au fichier WebVTT et vous permettent de modifier l'emplacement et l'orientation des sous-titres ainsi que le texte. Voici quelques exemples :

    • Texte en gras
      <b>Lorem ipsum</b>
    • Texte en italique
      <i>dolor sit amet</i>
    • Texte souligné
      <u>consectetuer adipiscing</u>

    Etant donné que Brightcove Player gère le positionnement des légendes, vous ne pouvez pas utiliser de styles pour modifier l'emplacement ou l'orientation des légendes. Les styles en ligne ne fournissent pas beaucoup d'options de style. Pour une plus grande variété d'options de style, vous pouvez utiliser un fichier CSS comme décrit dans la section suivante.

    Pour plus d'informations sur les styles en ligne, voir ce lien.

    Création d'une classe personnalisée dans un fichier CSS

    Une classe personnalisée peut être incluse dans un fichier CSS puis appliquée aux éléments du fichier WebVTT. Par exemple, la classe ci-dessous change la couleur du texte en blanc, la couleur d'arrière-plan en bleu et met la police en gras.

    
    <style>
       .captionstyle {
          color:white;
          background-color:blue;
          font-weight:bold
        }
    </style>

    Ensuite, le fichier WebVTT peut être modifié pour appliquer le nouveau captionstyle sélecteur. Le c préfixe est utilisé pour indiquer que le style utilisé est un sélecteur de classe (il s'agit d'une norme de format WebVTT).

    WEBVTT 00:00:00.000 --> 00:00:03.530 aligner:ligne médiane:84% 00:00:03.530 --> 00:00:06.510 aligner:ligne médiane:90% <c.captionstyle>Dans cette vidéo, nous allons apprendre à se connecter et à naviguer</c> 00:00:06.510 --> 00:00:09.550 aligner:ligne médiane:84% <c.captionstyle>à l'intérieur de Video Cloud Studio.</c>
                

    Pour plus d'informations sur les options de style des fichiers de sous-titres, consultez le Document de spécification W3C WebVTT ou voir ce lien.

    Guide de style CSS

    Ce tableau montre quelles propriétés CSS sont et ne sont pas prises en charge pour les légendes de style avec Brightcove Player :

    Propriété CSS Prise en charge Non supporté
    font-family  
    font-size  
    font-weight  
    color  
    background  
    background-color  
    opacity  
    visibility  
    text-decoration  
    text-shadow  
    width  
    height  
    line-height  
    white-space  
    word-wrap  
    top  
    left  
    display  
    direction  

    Pour plus d'informations sur les options de style des fichiers de sous-titres, lisez le document des spécifications W3C du WebVTT ou consultez la rubrique Sous-titrage vidéo et WebVTT.

    Paramétrage du style des sous-titres par l'utilisateur

    Pour les utilisateurs sur des dispositifs iOS, le style des sous-titres est accessible dans les paramètres d'iOS. Pour accéder aux paramètres, cliquez sur Paramètres > Général > Accessibilité > Sous-titres > Style. Vous pourrez y sélectionner un style prédéfini ou créer des styles.

    Les visiteurs sur ordinateurs de bureau et dispositifs Android peuvent modifier l'apparence des sous-titres en utilisant le menu des paramètres des sous-titres.

    Cliquez sur le menu des paramètres des sous-titres affichera une superposition qui permettra de définir les propriétés de sous-titres suivantes :

    • Couleur et opacité du premier plan
    • Couleur et opacité de l'arrière-plan
    • Couleur et opacité de la fenêtre
    • Taille de la police
    • Style des contours du texte
    • Famille de la police

    Cliquez sur Defaults pour redonner aux sous-titres leur aspect d'origine.

    Contraintes

    Les sous-titres sont pris en charge sur les types de dispositifs et de systèmes d'exploitation suivants.

    • iOS 10+
    • Android 7+
    • Internet Explorer 11+
    • Les derniers navigateurs Edge, Chrome, Safari et Firefox sur les ordinateurs de bureau

    Dernière mise à jour de la page le 20 Apr 2021