::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 Pseudo-Element wendet sich an WebVTT Anweisungen innerhalb eines ausgewählten Elements. Dies kann verwendet werden, um Untertitel und andere Anweisungen 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="/https/developer.mozilla.org/shared-assets/videos/friday.mp4">
  <track
    default
    kind="captions"
    srclang="en"
    src="/https/developer.mozilla.org/shared-assets/misc/friday.vtt" />
  Sorry, your browser doesn't support embedded videos.
</video>

Die Eigenschaften werden auf die gesamte Gruppe von Anweisungen angewendet, als ob sie eine einzelne Einheit wären. Die einzige Ausnahme ist, dass background und seine Langform-Eigenschaften jeweils auf jede Anweisung einzeln angewendet werden, um das Erstellen von Boxen zu vermeiden und unerwartet große Bereiche der Medien nicht zu verdecken.

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

Syntax

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

Erlaubte Eigenschaften

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

Beispiele

WebVTT-Anweisungen als weiß-auf-schwarz stylen

Das folgende CSS legt den Anweisungsstil so fest, dass der Text weiß ist und der Hintergrund eine durchscheinende schwarze Box ist.

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

WebVTT interne Knotenobjekte stylen

Anweisungstext kann interne Knotenobjekte als Tags (ähnlich wie HTML-Elemente) wie <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 dargestellt wird. Betrachten Sie den folgenden Anweisungstext, 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