::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 nimmt WebVTT-Hinweise innerhalb eines ausgewählten Elements ins Visier. Dies kann verwendet werden, um Untertitel und andere Hinweise in Medien mit VTT-Spuren 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 so angewendet, als ob sie eine einzige Einheit wären. Die einzige Ausnahme ist, dass background und dessen detaillierte Eigenschaften auf jeden einzelnen Hinweis angewendet werden, um zu vermeiden, dass Boxen entstehen und unerwartet große Bereiche des Mediums verdeckt werden.

Im obigen Beispiel wählt der ::cue(u) Selektor alle  Elemente innerhalb des Hinweistextes aus.

Syntax

css

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

Erlaubte Eigenschaften

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

Beispiele

WebVTT-Hinweise als Weiß-auf-Schwarz gestalten

Das folgende CSS setzt den Stil der Hinweise so, dass der Text weiß ist und der Hintergrund eine transparente schwarze Box ist.

css

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

Styling von inneren Knotenelementen in WebVTT

Hinweistext kann interne Knotenelemente enthalten, wie die Tags (ähnlich wie HTML-Elemente) <c>, , , , <ruby>, <rt>, <v> und <lang>. Der ::cue()-Selektor kann verwendet werden, um Stile auf Inhalte innerhalb dieser Tags anzuwenden, um anzupassen, wie die WebVTT-Spur angezeigt wird. Betrachten Sie den folgenden Hinweistext, der das -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 individualisiert den Text innerhalb des -Tags mit einer Farbe und einer text-decoration:

css

::cue(u) {
  color: red;
  text-decoration: wavy overline lime;
}

Spezifikationen

Specification
WebVTT: The Web Video Text Tracks Format # the-cue-pseudo-element