::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.
Das ::cue CSS Pseudoelement wendet sich an WebVTT Cues innerhalb eines ausgewählten Elements.
Dies kann genutzt werden, um Untertitel und andere Cues zu gestalten 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 an Cues angewendet, als ob sie eine einzige Einheit wären. Die einzige Ausnahme ist, dass background und dessen Langform-Eigenschaften auf jeden Cue individuell angewendet werden, um die Erstellung von Kästchen zu vermeiden, die unerwartet große Bereiche des Mediums verdecken.
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
Styling von WebVTT-Cues als weiß auf schwarz
Das folgende CSS legt den Cue-Stil so fest, dass der Text weiß ist und der Hintergrund eine durchscheinende schwarze Box bildet.
::cue {
color: white;
background-color: rgb(0 0 0 / 60%);
}
Styling von internen WebVTT-Knotenobjekten
Cue-Text kann interne Knotenobjekte wie die Tags (ähnlich wie HTML-Elemente) <c>, <i>, <b>, <u>, <ruby>, <rt>, <v>, und <lang> beinhalten.
Der ::cue() Selektor kann verwendet werden, um Stile auf Inhalte innerhalb dieser Tags anzuwenden, um zu spezifizieren, wie der WebVTT-Track angezeigt wird.
Betrachten Sie den folgenden Cue-Text, der das <u> Tag verwendet, um einige Texte 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 die Farbe und text-decoration des Textes innerhalb des <u> Tags an:
::cue(u) {
color: red;
text-decoration: wavy overline lime;
}
Spezifikationen
| Specification |
|---|
| WebVTT: The Web Video Text Tracks Format # the-cue-pseudo-element |
Browser-Kompatibilität
Loading…