::cue

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

* Some parts of this feature may have varying levels of support.

Das ::cue CSS Pseudoelement entspricht den WebVTT Cues innerhalb eines ausgewählten Elements. 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 das gesamte Set von Cues angewendet, als ob sie eine einzelne Einheit wären. Die einzige Ausnahme ist, dass background und seine Langformen-Eigenschaften auf jedes Cue einzeln angewendet werden, um das Erstellen von Boxen und das unerwartete Verdecken großer Bereiche des Mediums zu vermeiden.

Im obigen Beispiel wählt der ::cue(u)-Selektor alle <u> Elemente innerhalb des Cue-Textes aus.

Syntax

css
::cue | ::cue(<selector>) {
  /* ... */
}

Erlaubte Eigenschaften

Regeln, deren Selektoren dieses Element enthalten, dürfen nur die folgenden CSS-Eigenschaften verwenden:

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 transluzente schwarze Box.

css
::cue {
  color: #fff;
  background-color: rgb(0 0 0 / 60%);
}

WebVTT-interne Knotenobjekte stylen

Der Cue-Text kann interne Knotenobjekte als Tags (ähnlich wie HTML-Elemente) enthalten: <c>, <i>, <b>, <u>, <ruby>, <rt>, <v>, und <lang>. Der ::cue()-Selektor kann verwendet werden, um Stile auf den Inhalt innerhalb dieser Tags anzuwenden, um anzupassen, wie der WebVTT-Track angezeigt 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:

css
::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

Siehe auch