::cue CSS pseudo-element
Baseline
Weitgehend verfügbar
*
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Januar 2020 browserübergreifend verfügbar.
* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.
Das ::cue CSS Pseudoelement entspricht WebVTT Cues innerhalb eines ausgewählten Elements.
Dies kann verwendet werden, um Beschriftungen und andere Cues zu stylen in Medien mit VTT-Spuren.
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 das gesamte Set von Cues angewendet, als ob sie eine einzelne Einheit wären. Die einzige Ausnahme ist, dass background und seine Untereigenschaften auf jeden Cue einzeln angewendet werden, um das Erstellen von Boxen und das unerwartete Verdecken großer Bereiche der Medien zu vermeiden.
Im obigen Beispiel wählt der ::cue(u) Selektor alle <u> Elemente innerhalb des Cue-Textes 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
WebVTT-Cues als weiß-auf-schwarz stylen
Der folgende CSS-Code setzt den Cue-Stil so, dass der Text weiß ist und der Hintergrund eine durchscheinende 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 Inhalte innerhalb dieser Tags anzuwenden und somit das Erscheinungsbild der WebVTT-Spur anzupassen.
Betrachten Sie den folgenden Cue-Text, der das <u> Tag verwendet, um einigen 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 das Erscheinungsbild des Textes innerhalb des <u> Tags mit einer Farbe und einer text-decoration an:
::cue(u) {
color: red;
text-decoration: wavy overline lime;
}
Spezifikationen
| Spezifikation |
|---|
| WebVTT: The Web Video Text Tracks Format # the-cue-pseudo-element |