VTTCue

Baseline Widely available *

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

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

Das VTTCue-Interface der WebVTT-API repräsentiert einen Cue, der der Textspur zugeordnet werden kann, die mit einem bestimmten Video (oder anderem Medium) verbunden ist.

Ein Cue definiert den Text, der in einem bestimmten Zeitabschnitt eines Video- oder Audiotracks angezeigt werden soll, zusammen mit Anzeigeeigenschaften wie Größe, Ausrichtung und Position.

EventTarget TextTrackCue VTTCue

Konstruktor

VTTCue()

Gibt ein neu erstelltes VTTCue-Objekt zurück, das den angegebenen Zeitbereich abdeckt und den angegebenen Text enthält.

Instanz-Eigenschaften

Dieses Interface erbt auch Eigenschaften von TextTrackCue.

VTTCue.region

Ein VTTRegion-Objekt, das den Unterbereich des Videos beschreibt, auf dem der Cue gezeichnet wird, oder null, wenn keiner zugewiesen ist.

VTTCue.vertical

Ein Enum, das die Schreibrichtung des Cues darstellt.

VTTCue.snapToLines

true, wenn das VTTCue.line-Attribut eine Ganzzahl der Linienzahl angibt, oder false, wenn es einen Prozentwert der Videogröße darstellt. Standardmäßig ist dies true.

VTTCue.line

Repräsentiert die Linienpositionierung des Cues. Dies kann der String auto oder eine Zahl sein, deren Bedeutung vom Wert von VTTCue.snapToLines abhängt.

VTTCue.lineAlign

Ein Enum, das die Ausrichtung des VTT-Cues darstellt.

VTTCue.position

Repräsentiert die Einrückung des Cues innerhalb der Linie. Dies kann der String auto, eine Zahl, die den Prozentsatz der VTTCue.region oder die Videogröße darstellt, falls VTTCue.region null ist.

VTTCue.positionAlign

Ein Enum, das die Ausrichtung des Cues darstellt. Dies wird verwendet, um zu bestimmen, woran die VTTCue.position verankert ist. Der Standardwert ist auto.

VTTCue.size

Repräsentiert die Größe des Cues als Prozentsatz der Videogröße.

VTTCue.align

Ein Enum, das die Ausrichtung aller Zeilen des Textes innerhalb des Cue-Kastens darstellt.

VTTCue.text

Ein String, der den Inhalt des Cues darstellt.

Instanz-Methoden

getCueAsHTML()

Gibt den Cue-Text als DocumentFragment zurück.

Beispiel

HTML

Das folgende Beispiel fügt dem Video eine neue TextTrack hinzu und fügt dann Cues mit der Methode TextTrack.addCue() hinzu, wobei ein VTTCue-Objekt als Wert verwendet wird.

html
<video
  controls
  src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/friday.mp4"></video>

CSS

css
video {
  width: 420px;
  height: 300px;
}

JavaScript

js
let video = document.querySelector("video");
let track = video.addTextTrack("captions", "Captions", "en");
track.mode = "showing";
track.addCue(new VTTCue(0, 0.9, "Hildy!"));
track.addCue(new VTTCue(1, 1.4, "How are you?"));
track.addCue(new VTTCue(1.5, 2.9, "Tell me, is the lord of the universe in?"));
track.addCue(new VTTCue(3, 4.2, "Yes, he's in - in a bad humor"));
track.addCue(new VTTCue(4.3, 6, "Somebody must've stolen the crown jewels"));
console.log(track.cues);

Ergebnis

Spezifikationen

Specification
WebVTT: The Web Video Text Tracks Format
# the-vttcue-interface

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
VTTCue
VTTCue() constructor
align
getCueAsHTML
line
lineAlign
position
positionAlign
region
size
snapToLines
text
All HTML character references allowed.
vertical

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.