::cue
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since janvier 2020.
* Some parts of this feature may have varying levels of support.
Le pseudo-élément CSS ::cue permet de cibler les indications textuelles WebVTT d'un élément. Ce pseudo-élément peut être utilisé afin de mettre en forme les légendes et autres indications textuelles pour les médias avec des pistes VTT.
Exemple interactif
video {
width: 100%;
}
video::cue {
font-size: 1rem;
color: yellow;
}
::cue(u) {
color: red;
}
<video controls src="/shared-assets/videos/friday.mp4">
<track
default
kind="captions"
srclang="en"
src="/shared-assets/misc/friday.vtt" />
Désolé, votre navigateur ne prend pas en charge les vidéos intégrées.
</video>
Les propriétés sont appliquées à l'ensemble des indications (comme si celles-ci formaient un seul ensemble). Seule background (ou les propriétés raccourcies associées) s'appliquent à chaque indication séparément (afin d'éviter de créer des boîtes qui masqueraient de grandes zones sur le média).
Dans l'exemple ci-dessus, le sélecteur ::cue(u) sélectionne tous les éléments <u> à l'intérieur du texte de l'indication.
Syntaxe
::cue | ::cue(<selector>) {
/* ... */
}
Propriétés autorisées
Les règles dont les sélecteurs incluent cet élément ne peuvent utiliser que les propriétés CSS suivantes :
backgroundbackground-attachmentbackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizecolorfontfont-familyfont-sizefont-stretchfont-stylefont-variantfont-weightline-heightopacityoutlineoutline-coloroutline-styleoutline-widthruby-positiontext-combine-uprighttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-decoration-thicknesstext-shadowvisibilitywhite-space
Exemples
Mettre en forme les repères WebVTT en blanc sur fond noir
Le CSS suivant définit le style de la repère afin que le texte soit blanc et que l'arrière-plan soit une boîte noire translucide.
::cue {
color: white;
background-color: rgb(0 0 0 / 60%);
}
Mettre en forme les objets de nœud internes WebVTT
Le texte des repères peut inclure des objets de nœud internes sous forme de balises (similaires aux éléments HTML) <c>, <i>, <b>, <u>, <ruby>, <rt>, <v>, et <lang>.
Le sélecteur ::cue() peut être utilisé pour appliquer des styles au contenu à l'intérieur de ces balises afin de personnaliser l'affichage de la piste WebVTT.
Considérons le texte de repère suivant qui utilise la balise <u> pour souligner un texte :
00:00:01.500 --> 00:00:02.999 line:80% Dites-moi, le <u>seigneur de l'univers</u> est ici ?
La règle CSS suivante personnalise le texte à l'intérieur de la balise <u> avec une couleur et un text-decoration :
::cue(u) {
color: red;
text-decoration: wavy overline lime;
}
Spécifications
| Specification |
|---|
| WebVTT: The Web Video Text Tracks Format # the-cue-pseudo-element |
Compatibilité des navigateurs
Loading…
Voir aussi
- Format des pistes vidéo Web (WebVTT)
- Les éléments
<track>,<video>