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.

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

Ein Untertitel definiert den anzuzeigenden Text in einem bestimmten Zeitabschnitt einer Video- oder Audiospur 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.

Instanzeigenschaften

Dieses Interface erbt auch Eigenschaften von TextTrackCue.

VTTCue.region: Ein VTTRegion-Objekt, das die Unterregion des Videos beschreibt, auf die der Untertitel gezeichnet wird, oder null, wenn keine zugewiesen ist.
VTTCue.vertical: Ein Enum, das die Schreibrichtung des Untertitels darstellt.
VTTCue.snapToLines: true, wenn das Attribut VTTCue.line eine ganze Anzahl von Zeilen angibt oder false, wenn es einen Prozentsatz der Videogröße darstellt. Standardmäßig ist dies true.
VTTCue.line: Repräsentiert die Linienpositionierung des Untertitels. Dies kann die Zeichenkette auto oder eine Zahl sein, deren Interpretation von dem Wert von VTTCue.snapToLines abhängt.
VTTCue.lineAlign: Ein Enum, das die Ausrichtung der VTTCue.line darstellt.
VTTCue.position: Repräsentiert die Einrückung des Untertitels innerhalb der Zeile. Dies kann die Zeichenkette auto, eine Zahl, die den Prozentsatz der VTTCue.region oder der Video-Größe darstellt, wenn VTTCue.region null ist.
VTTCue.positionAlign: Ein Enum, das die Ausrichtung des Untertitels darstellt. Dies wird verwendet, um zu bestimmen, woran VTTCue.position angebunden ist. Der Standardwert ist auto.
VTTCue.size: Repräsentiert die Größe des Untertitels als Prozentsatz der Video-Größe.
VTTCue.align: Ein Enum, das die Ausrichtung aller Textzeilen innerhalb des Untertitelrahmens darstellt.
VTTCue.text: Eine Zeichenkette, die den Inhalt des Untertitels repräsentiert.

Instanzmethoden

getCueAsHTML(): Gibt den Untertiteltext als DocumentFragment zurück.

Beispiel

HTML

Das folgende Beispiel fügt dem Video eine neue TextTrack hinzu, dann Untertitel mit der Methode TextTrack.addCue(), 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