::cue
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Januar 2020.
* Some parts of this feature may have varying levels of support.
Der ::cue CSS Pseudoelement stimmt mit WebVTT Cues innerhalb eines ausgewählten Elements überein.
Dies kann verwendet werden, um Untertitel und andere Cues zu stylen in Medien mit VTT-Tracks.
Probieren Sie es aus
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" />
Sorry, your browser doesn't support embedded videos.
</video>
Die Eigenschaften werden auf die gesamte Menge von Cues angewendet, als ob sie eine einzelne Einheit wären. Die einzige Ausnahme ist, dass background und seine Langschreibweisen auf jeden Cue einzeln angewendet werden, um zu vermeiden, dass Boxen entstehen und unerwartet große Bereiche des Mediums verdeckt werden.
Im obigen Beispiel wählt der ::cue(u)-Selektor alle <u> Elemente innerhalb des Cue-Texts aus.
Syntax
::cue | ::cue(<selector>) {
/* ... */
}
Erlaubte Eigenschaften
Regeln, deren Selektoren dieses Element einschließen, dürfen nur die folgenden CSS-Eigenschaften verwenden:
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
Beispiele
Styling von WebVTT-Cues als Weiß-auf-Schwarz
Das folgende CSS setzt den Cue-Stil so, dass der Text weiß ist und der Hintergrund eine transparente schwarze Box ist.
::cue {
color: white;
background-color: rgb(0 0 0 / 60%);
}
Styling von WebVTT internen Knotenobjekten
Cue-Text kann interne Knotenobjekte als Tags (ähnlich wie HTML-Elemente) <c>, <i>, <b>, <u>, <ruby>, <rt>, <v>, und <lang> enthalten.
Der ::cue()-Selektor kann verwendet werden, um Stile auf den Inhalt innerhalb dieser Tags anzuwenden, um anzupassen, wie der WebVTT-Track dargestellt wird.
Betrachten Sie den folgenden Cue-Text, der das <u>-Tag verwendet, um Text zu unterstreichen:
00:00:01.500 --> 00:00:02.999 line:80% Tell me, is the <u>lord of the universe</u> in?
Die folgende CSS-Regel passt den Text innerhalb des <u>-Tags mit einer Farbe und einer text-decoration an:
::cue(u) {
color: red;
text-decoration: wavy overline lime;
}
Spezifikationen
| Specification |
|---|
| WebVTT: The Web Video Text Tracks Format # the-cue-pseudo-element |