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

Specification Status Comment
WebVTT: The Web Video Text Tracks Format Candidate Recommendation  

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome Full support YesEdge ? Firefox Full support 26IE ? Opera Full support YesSafari ? WebView Android ? Chrome Android Full support YesEdge Mobile ? Firefox Android Full support YesOpera Android Full support YesSafari iOS ? Samsung Internet Android ?
VTTCue() constructorChrome Full support YesEdge ? Firefox Full support YesIE ? Opera Full support YesSafari ? WebView Android ? Chrome Android Full support YesEdge Mobile ? Firefox Android Full support YesOpera Android Full support YesSafari iOS ? Samsung Internet Android ?
alignChrome Full support YesEdge ? Firefox Full support YesIE ? Opera Full support YesSafari ? WebView Android ? Chrome Android Full support YesEdge Mobile ? Firefox Android Full support YesOpera Android Full support YesSafari iOS ? Samsung Internet Android ?
getCueAsHTMLChrome Full support YesEdge ? Firefox Full support YesIE ? Opera Full support YesSafari ? WebView Android ? Chrome Android Full support YesEdge Mobile ? Firefox Android Full support YesOpera Android Full support YesSafari iOS ? Samsung Internet Android ?
lineChrome Full support YesEdge ? Firefox Full support YesIE ? Opera Full support YesSafari ? WebView Android ? Chrome Android Full support YesEdge Mobile ? Firefox Android Full support YesOpera Android Full support YesSafari iOS ? Samsung Internet Android ?
lineAlignChrome No support NoEdge ? Firefox Full support YesIE ? Opera No support NoSafari ? WebView Android ? Chrome Android No support NoEdge Mobile ? Firefox Android Full support YesOpera Android No support NoSafari iOS ? Samsung Internet Android ?
positionChrome Full support YesEdge ? Firefox Full support YesIE ? Opera Full support YesSafari ? WebView Android ? Chrome Android Full support YesEdge Mobile ? Firefox Android Full support YesOpera Android Full support YesSafari iOS ? Samsung Internet Android ?
positionAlignChrome No support NoEdge ? Firefox Full support YesIE ? Opera No support NoSafari ? WebView Android ? Chrome Android No support NoEdge Mobile ? Firefox Android Full support YesOpera Android No support NoSafari iOS ? Samsung Internet Android ?
regionChrome No support NoEdge ? Firefox Full support YesIE ? Opera No support NoSafari ? WebView Android ? Chrome Android No support NoEdge Mobile ? Firefox Android Full support YesOpera Android No support NoSafari iOS ? Samsung Internet Android ?
sizeChrome Full support YesEdge ? Firefox Full support YesIE ? Opera Full support YesSafari ? WebView Android ? Chrome Android Full support YesEdge Mobile ? Firefox Android Full support YesOpera Android Full support YesSafari iOS ? Samsung Internet Android ?
snapToLinesChrome Full support YesEdge ? Firefox Full support YesIE ? Opera Full support YesSafari ? WebView Android ? Chrome Android Full support YesEdge Mobile ? Firefox Android Full support YesOpera Android Full support YesSafari iOS ? Samsung Internet Android ?
textChrome Full support YesEdge ? Firefox Full support YesIE ? Opera Full support YesSafari ? WebView Android ? Chrome Android Full support YesEdge Mobile ? Firefox Android Full support YesOpera Android Full support YesSafari iOS ? Samsung Internet Android ?
verticalChrome Full support YesEdge ? Firefox Full support YesIE ? Opera Full support YesSafari ? WebView Android ? Chrome Android Full support YesEdge Mobile ? Firefox Android Full support YesOpera Android Full support YesSafari iOS ? Samsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown

Document Tags and Contributors

Contributors to this page: ModMaker, fscholz, jamesdhurd, Abhro, chamb
Last updated by: ModMaker,