DasVTTCue-Interface derWebVTT API repräsentiert eine Cue, die der Textspur zugeordnet werden kann, die mit einem bestimmten Video (oder anderen Medien) verknüpft ist.

Eine 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.

Konstruktor

VTTCue()

Gibt ein neu erstelltesVTTCue-Objekt zurück, das den angegebenen Zeitbereich abdeckt und den angegebenen Text hat.

Instanz-Eigenschaften

Dieses Interface erbt auch Eigenschaften vonTextTrackCue.

VTTCue.region

EinVTTRegion-Objekt, das die Unterregion des Videos beschreibt, auf die die Cue gezeichnet wird, odernull, wenn keine zugewiesen ist.

VTTCue.vertical

Ein Enum, das die Schreibrichtung der Cue darstellt.

VTTCue.snapToLines

true, wenn dasVTTCue.line-Attribut eine ganze Anzahl von Zeilen angibt, oderfalse, wenn es einen Prozentsatz der Videogröße darstellt.Dies ist standardmäßigtrue.

VTTCue.line

Repräsentiert die Linienpositionierung der Cue. Dies kann der Stringauto sein oder eine Zahl, deren Interpretation vom Wert vonVTTCue.snapToLines abhängt.

VTTCue.lineAlign

Ein Enum, das die Ausrichtung der VTT Cue darstellt.

VTTCue.position

Repräsentiert die Einrückung der Cue innerhalb der Linie.Dies kann der Stringauto, eine Zahl, die den Prozentsatz derVTTCue.region oder der Videogröße darstellt, wennVTTCue.regionnull ist.

VTTCue.positionAlign

Ein Enum, das die Ausrichtung der Cue darstellt.Dies wird verwendet, um zu bestimmen, auf was dieVTTCue.position verankert ist.Der Standardwert istauto.

VTTCue.size

Repräsentiert die Größe der Cue, als Prozentsatz der Videogröße.

VTTCue.align

Ein Enum, das die Ausrichtung aller Textzeilen innerhalb des Cue-Feldes darstellt.

VTTCue.text

Ein String, der den Inhalt der Cue repräsentiert.

Instanz-Methoden

getCueAsHTML()

Gibt den Cue-Text alsDocumentFragment zurück.

Beispiel

HTML

Das folgende Beispiel fügt dem Video eine neueTextTrack hinzu und fügt dann Cues mit derTextTrack.addCue()-Methode hinzu, wobei einVTTCue-Objekt als Wert verwendet wird.

<video controls src="/shared-assets/videos/friday.mp4"></video>

CSS

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

JavaScript

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

Browser-Kompatibilität