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 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 erstelltes VTTCue-Objekt zurück, das den angegebenen Zeitbereich abdeckt und den angegebenen Text hat.

Instanz-Eigenschaften

Dieses Interface erbt auch Eigenschaften von TextTrackCue.

VTTCue.region: Ein VTTRegion-Objekt, das die Unterregion des Videos beschreibt, auf die die Cue gezeichnet wird, oder null, wenn keine zugewiesen ist.
VTTCue.vertical: Ein Enum, das die Schreibrichtung der Cue darstellt.
VTTCue.snapToLines: true, wenn das VTTCue.line-Attribut eine ganze Anzahl von Zeilen angibt, oder false, wenn es einen Prozentsatz der Videogröße darstellt. Dies ist standardmäßig true.
VTTCue.line: Repräsentiert die Linienpositionierung der Cue. Dies kann der String auto sein oder eine Zahl, deren Interpretation vom Wert von VTTCue.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 String auto, eine Zahl, die den Prozentsatz der VTTCue.region oder der Videogröße darstellt, wenn VTTCue.region null ist.
VTTCue.positionAlign: Ein Enum, das die Ausrichtung der Cue darstellt. Dies wird verwendet, um zu bestimmen, auf was die VTTCue.position verankert ist. Der Standardwert ist auto.
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 als DocumentFragment zurück.

Beispiel

HTML

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

html

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

CSS

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

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