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, ornull
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 ofVTTCue.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 theVTTCue.region
, or the video size ifVTTCue.region
isnull
. 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 isauto
. 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
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.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
VTTCue | Chrome Full support Yes | Edge Full support ≤79 | Firefox Full support 26 | IE ? | 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 ? | 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 ? | 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 ? | 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 ? | 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 ? | 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 ? | 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 ? | 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 ? | 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 ? | 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 ? | 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 ? | 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 ? | 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