Web/API/VTTCue

VTTCue<track>

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://interactive-examples.mdn.mozilla.net/media/examples/flower.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

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
VTTCue	Chrome Full support Yes	Edge Full support ≤79	Firefox Full support 26	IE No support No	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support Yes	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes
VTTCue() constructor	Chrome Full support Yes	Edge Full support ≤79	Firefox Full support Yes	IE No support No	Opera Full support Yes	Safari ?	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support Yes	Opera Android Full support Yes	Safari iOS ?	Samsung Internet Android Full support Yes
align	Chrome Full support Yes	Edge Full support ≤79	Firefox Full support Yes	IE No support No	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support Yes	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes
getCueAsHTML	Chrome Full support Yes	Edge Full support ≤79	Firefox Full support Yes	IE No support No	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support Yes	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes
line	Chrome Full support Yes	Edge Full support ≤79	Firefox Full support Yes	IE No support No	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support Yes	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes
lineAlign	Chrome No support No	Edge No support No	Firefox Full support Yes	IE No support No	Opera No support No	Safari ?	WebView Android No support No	Chrome Android No support No	Firefox Android Full support Yes	Opera Android No support No	Safari iOS ?	Samsung Internet Android No support No
position	Chrome Full support Yes	Edge Full support ≤79	Firefox Full support Yes	IE No support No	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support Yes	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes
positionAlign	Chrome No support No	Edge No support No	Firefox Full support Yes	IE No support No	Opera No support No	Safari ?	WebView Android No support No	Chrome Android No support No	Firefox Android Full support Yes	Opera Android No support No	Safari iOS ?	Samsung Internet Android No support No
region	Chrome No support No	Edge No support No	Firefox Full support Yes	IE No support No	Opera No support No	Safari ?	WebView Android No support No	Chrome Android No support No	Firefox Android Full support Yes	Opera Android No support No	Safari iOS ?	Samsung Internet Android No support No
size	Chrome Full support Yes	Edge Full support ≤79	Firefox Full support Yes	IE No support No	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support Yes	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes
snapToLines	Chrome Full support Yes	Edge Full support ≤79	Firefox Full support Yes	IE No support No	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support Yes	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes
text	Chrome Full support Yes	Edge Full support ≤79	Firefox Full support Yes	IE No support No	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support Yes	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes
vertical	Chrome Full support Yes	Edge Full support ≤79	Firefox Full support Yes	IE No support No	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support Yes	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes

Legend

Full support  

Full support

No support  

No support

Compatibility unknown  

Compatibility unknown

VTTCue by Mozilla Contributors is licensed under CC-BY-SA 2.5.