::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 stimmt mit WebVTT-Hinweisen innerhalb eines ausgewählten Elements überein. Dies kann verwendet werden, um Beschriftungen und andere Hinweise in Medien mit VTT-Tracks zu gestalten.
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 Hinweisen angewendet, als ob sie eine einzige Einheit wären. Die einzige Ausnahme ist, dass background und seine Einzel-Eigenschaften auf jeden Hinweis einzeln angewendet werden, um das Erstellen von Kästen und das unerwartet große Bereiche der Medien verdecken zu vermeiden.
Im obigen Beispiel wählt der ::cue(u)-Selektor alle <u>-Elemente innerhalb des Hinweistextes 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
Gestaltung von WebVTT-Hinweisen als Weiß-auf-Schwarz
Der folgende CSS-Code setzt den Stil der Hinweise so, dass der Text weiß ist und der Hintergrund ein durchsichtiges schwarzes Feld ist.
::cue {
color: white;
background-color: rgb(0 0 0 / 60%);
}
Styling von internen WebVTT-Knotenobjekten
Hinweistext kann interne Knotenobjekte wie die Tags (ähnlich zu 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, um anzupassen, wie der WebVTT-Track angezeigt wird. Betrachten Sie den folgenden Hinweistext, 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 den Text innerhalb des <u>-Tags mit einer Farbe und einer Textdekoration an:
::cue(u) {
color: red;
text-decoration: wavy overline lime;
}
Spezifikationen
| Specification |
|---|
| WebVTT: The Web Video Text Tracks Format # the-cue-pseudo-element |