TheVTTCue interface of theWebVTT API represents a cue that can be added to the text track associated with a particular video (or other media).

A cue defines the text to display in a particular timeslice of a video or audio track, along with display properties such as its size, alignment, and position.

Constructor

VTTCue()

Returns a newly createdVTTCue object that covers the given time range and has the given text.

Instance properties

This interface also inherits properties fromTextTrackCue.

VTTCue.region

AVTTRegion object describing the video's sub-region that the cue will be drawn onto, ornull if none is assigned.

VTTCue.vertical

An enum representing the cue writing direction.

VTTCue.snapToLines

true if theVTTCue.line attribute indicates an integer number of lines orfalse if it represents a percentage of the video size.This istrue by default.

VTTCue.line

Represents the line positioning of the cue. This can be the stringauto or a number whose interpretation depends on the value ofVTTCue.snapToLines.

VTTCue.lineAlign

An enum representing the alignment of the VTT cue.

VTTCue.position

Represents the indentation of the cue within the line.This can be the stringauto, a number representing the percentage of theVTTCue.region, or the video size ifVTTCue.region isnull.

VTTCue.positionAlign

An enum representing the alignment of the cue.This is used to determine what theVTTCue.position is anchored to.The default isauto.

VTTCue.size

Represents the size of the cue, as a percentage of the video size.

VTTCue.align

An enum representing the alignment of all the lines of text within the cue box.

VTTCue.text

A string representing the contents of the cue.

Instance methods

getCueAsHTML()

Returns the cue text as aDocumentFragment.

Example

HTML

The following example adds a newTextTrack to the video, then adds cues using theTextTrack.addCue() method, with aVTTCue object as the value.

<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);

Result

Specifications

Browser compatibility