VTTCue

The VTTCue interface—part of the API for handling WebVTT (text tracks on media presentations)—describes and controls the text track associated with a particular <track> element.

Constructor

VTTCue(startTime, endTime, text)

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

Properties

This interface also inherits properties from TextTrackCue.

VTTCue.region

A VTTRegion object describing the video's sub-region that the cue will be drawn onto, or null if none is assigned.

VTTCue.vertical

Returns an enum representing the cue writing direction.

VTTCue.snapToLines

Returns true if the VTTCue.line attribute is an integer number of lines or a percentage of the video size.

VTTCue.line

Returns the line positioning of the cue. This can be the string auto or a number whose interpretation depends on the value of VTTCue.snapToLines.

VTTCue.lineAlign

Returns an enum representing the alignment of the VTTCue.line.

VTTCue.position

Returns the indentation of the cue within the line. This can be the string auto or a number representing the percentage of the VTTCue.region, or the video size if VTTCue.region is null.

VTTCue.positionAlign

Returns an enum representing the alignment of the cue. This is used to determine what the VTTCue.position is anchored to.

VTTCue.size

Returns a double representing the size of the cue, as a percentage of the video size.

VTTCue.textAlign

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

VTTCue.text

Returns a DOMString with the contents of the cue.

Methods

VTTCue.getCueAsHTML

Returns the cue text as a DocumentFragment.

Examples

var cue = new VTTCue(2, 3, 'Cool text to be displayed');
var tracks = document.querySelector('video').textTracks;
tracks[0].addCue(cue);

Once the new cue is created, it needs to be added to a TextTrack. Once added, this cue will be drawn from seconds 2 to 3 and will show the text Cool text to be displayed.

Specifications

Browser compatibilityUpdate compatibility data on GitHub