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.

Param

startTime
The time, in seconds and fractions of a second, that describes the beginning of the range of the media data to which the cue applies.
endTime
The time, in seconds and fractions of a second, that describes the end of the range of the media data to which the cue applies.
text
The raw text of the cue, and rules for its interpretation.

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. The default is auto.
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

getCueAsHTML()
Returns the cue text as a DocumentFragment.

Example

HTML

<video controls src="https://udn.realityripple.com/samples/c6/f8a3489533.webm"></video>

CSS

video {
  width: 320px;
  height: 180px;
}

JavaScript

let video = document.querySelector('video');
video.addEventListener('loadedmetadata', () => {
  const track = video.addTextTrack("captions", "简体中文Subtitles", "zh_CN");
  track.mode = "showing";

  const cueCn = new VTTCue(0, 2.500, '字幕会在0至2.5秒间显示');
  track.addCue(cueCn);

  const cueEn = new VTTCue(2.6, 4, 'Subtitles will display between 2.6 and 4 seconds');
  track.addCue(cueEn);
});

Result

Chrome: Please Open in JSFiddle to view the live sample. Embed live sample can not show subtitles in Chrome.

Specifications

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

Browser compatibility

DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
VTTCueChrome Full support YesEdge Full support ≤79Firefox Full support 26IE ? Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
VTTCue() constructorChrome Full support YesEdge Full support ≤79Firefox Full support YesIE ? Opera Full support YesSafari ? WebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS ? Samsung Internet Android Full support Yes
alignChrome Full support YesEdge Full support ≤79Firefox Full support YesIE ? Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
getCueAsHTMLChrome Full support YesEdge Full support ≤79Firefox Full support YesIE ? Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
lineChrome Full support YesEdge Full support ≤79Firefox Full support YesIE ? Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
lineAlignChrome No support NoEdge No support NoFirefox Full support YesIE ? Opera No support NoSafari ? WebView Android No support NoChrome Android No support NoFirefox Android Full support YesOpera Android No support NoSafari iOS ? Samsung Internet Android No support No
positionChrome Full support YesEdge Full support ≤79Firefox Full support YesIE ? Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
positionAlignChrome No support NoEdge No support NoFirefox Full support YesIE ? Opera No support NoSafari ? WebView Android No support NoChrome Android No support NoFirefox Android Full support YesOpera Android No support NoSafari iOS ? Samsung Internet Android No support No
regionChrome No support NoEdge No support NoFirefox Full support YesIE ? Opera No support NoSafari ? WebView Android No support NoChrome Android No support NoFirefox Android Full support YesOpera Android No support NoSafari iOS ? Samsung Internet Android No support No
sizeChrome Full support YesEdge Full support ≤79Firefox Full support YesIE ? Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
snapToLinesChrome Full support YesEdge Full support ≤79Firefox Full support YesIE ? Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
textChrome Full support YesEdge Full support ≤79Firefox Full support YesIE ? Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
verticalChrome Full support YesEdge Full support ≤79Firefox Full support YesIE ? Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

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