Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
::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::cueCSS-Pseudoelement stimmt mitWebVTT-Hinweisen innerhalb eines ausgewählten Elements überein. Dies kann verwendet werden, umBeschriftungen 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, dassbackground 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 innerhalbdes 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 kanninterne 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 einerTextdekoration an:
::cue(u) { color: red; text-decoration: wavy overline lime;}Spezifikationen
| Specification |
|---|
| WebVTT: The Web Video Text Tracks Format # the-cue-pseudo-element |