::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 Pseudo-Element selektiert WebVTT Cues innerhalb eines ausgewählten Elements. Dies kann verwendet werden, um Untertitel und andere Cues in Medien mit VTT-Tracks zu stylen.
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 angewandt, als ob sie eine einzige Einheit wären. Die einzige Ausnahme besteht darin, dass background und seine spezifischen Eigenschaften auf jeden Cue individuell angewandt werden, um das Erstellen von Boxen zu vermeiden, die unerwartet große Bereiche der Medien verdecken.
Im obigen Beispiel selektiert der ::cue(u) Selektor alle <u> Elemente innerhalb des Cue-Textes.
Syntax
::cue | ::cue(<selector>) { /* ... */ } Erlaubte Eigenschaften
Regeln mit Selektoren, die 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-Style 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 internen Knotenobjekten in WebVTT
Cue-Text kann interne Knotenobjekte wie die Tags (ähnlich den HTML-Elementen) <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 die Darstellung des WebVTT-Tracks anzupassen. 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 die Textfarbe und die Textdekoration 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…