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.

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

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

BCD tables only load in the browser