| CARVIEW |
Select Language
HTTP/2 301
content-length: 162
content-type: text/html
date: Wed, 15 Oct 2025 04:58:37 GMT
location: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/addTextTrack
server: nginx
strict-transport-security: max-age=60; includeSubDomains
via: 1.1 google
alt-svc: h3=":443"; ma=2592000,h3-29=":443"; ma=2592000
HTTP/2 200
content-type: text/html
x-guploader-uploadid: AAwnv3IuaFD6pJCsLbVH6Z_n2IvIKHPt-PDX448zXgpazsFIoxK6jXLu8i1OXMZsLyTs6-iHnIseV9E
cache-control: public, max-age=3600
expires: Wed, 15 Oct 2025 05:58:37 GMT
last-modified: Tue, 14 Oct 2025 01:05:58 GMT
etag: W/"e95e36cf821e257d593010b84bb4a85c"
x-goog-generation: 1760403958026865
x-goog-metageneration: 1
x-goog-stored-content-encoding: identity
x-goog-stored-content-length: 152374
x-goog-meta-goog-reserved-file-mtime: 1760402412
x-goog-hash: crc32c=L6JZ5A==, md5=6V42z4IeJX1ZMBC4S7SoXA==
x-goog-storage-class: STANDARD
accept-ranges: none
alt-svc: h3=":443"; ma=2592000,h3-29=":443"; ma=2592000
alt-svc: clear
referrer-policy: strict-origin-when-cross-origin
x-content-type-options: nosniff
strict-transport-security: max-age=63072000
content-security-policy: default-src 'self'; script-src 'report-sample' 'self' 'wasm-unsafe-eval' https://www.google-analytics.com/analytics.js https://www.googletagmanager.com/gtag/js assets.codepen.io production-assets.codepen.io https://js.stripe.com 'sha256-XNBp89FG76amD8BqrJzyflxOF9PaWPqPqvJfKZPCv7M=' 'sha256-YCNoU9DNiinACbd8n6UPyB/8vj0kXvhkOni9/06SuYw=' 'sha256-PZjP7OR6mBEtnvXIZfCZ5PuOlxoDF1LDZL8aj8c42rw='; script-src-elem 'report-sample' 'self' 'wasm-unsafe-eval' https://www.google-analytics.com/analytics.js https://www.googletagmanager.com/gtag/js assets.codepen.io production-assets.codepen.io https://js.stripe.com 'sha256-XNBp89FG76amD8BqrJzyflxOF9PaWPqPqvJfKZPCv7M=' 'sha256-YCNoU9DNiinACbd8n6UPyB/8vj0kXvhkOni9/06SuYw=' 'sha256-PZjP7OR6mBEtnvXIZfCZ5PuOlxoDF1LDZL8aj8c42rw='; style-src 'report-sample' 'self' 'unsafe-inline'; object-src 'none'; base-uri 'self'; connect-src 'self' developer.allizom.org bcd.developer.allizom.org bcd.developer.mozilla.org updates.developer.allizom.org updates.developer.mozilla.org https://*.google-analytics.com https://*.analytics.google.com https://*.googletagmanager.com https://incoming.telemetry.mozilla.org https://observatory-api.mdn.allizom.net https://observatory-api.mdn.mozilla.net https://api.github.com/search/issues stats.g.doubleclick.net https://api.stripe.com; font-src 'self'; frame-src 'self' interactive-examples.mdn.mozilla.net interactive-examples.mdn.allizom.net mdn.github.io live-samples.mdn.mozilla.net live-samples.mdn.allizom.net *.mdnplay.dev *.mdnyalp.dev *.play.test.mdn.allizom.net https://v2.scrimba.com https://scrimba.com jsfiddle.net www.youtube-nocookie.com codepen.io survey.alchemer.com https://js.stripe.com; img-src 'self' data: *.githubusercontent.com *.googleusercontent.com *.gravatar.com mozillausercontent.com firefoxusercontent.com profile.stage.mozaws.net profile.accounts.firefox.com developer.mozilla.org mdn.dev interactive-examples.mdn.mozilla.net interactive-examples.mdn.allizom.net wikipedia.org upload.wikimedia.org https://mdn.github.io/shared-assets/ https://mdn.dev/ https://*.google-analytics.com https://*.googletagmanager.com www.gstatic.com; manifest-src 'self'; media-src 'self' archive.org videos.cdn.mozilla.net https://mdn.github.io/shared-assets/; child-src 'self'; worker-src 'self';
x-frame-options: DENY
origin-trial: AxVILwizhbMjxFeHOn1P3R8niO1RJY/smaK4B4d1rLzc1gTaxtXMSaTi+FoigYgCw40uFRDwFcEAeqDR+vVLOW4AAABfeyJvcmlnaW4iOiJodHRwczovL2RldmVsb3Blci5tb3ppbGxhLm9yZyIsImZlYXR1cmUiOiJQcml2YXRlQXR0cmlidXRpb25WMiIsImV4cGlyeSI6MTc0MjA3OTYwMH0=
x-cloud-trace-context: 50c52856789b4157237c5cc455a1df27
date: Wed, 15 Oct 2025 04:58:38 GMT
server: Google Frontend
via: 1.1 google
vary: Accept-Encoding
content-encoding: gzip
x-cache: miss
HTMLMediaElement: addTextTrack() method - Web APIs | MDN
Toggle sidebar
HTMLMediaElement: addTextTrack() method
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
The addTextTrack() method of the HTMLMediaElement interface creates a new TextTrack object and adds it to the media element. It fires an addtrack event on this media element's textTracks. This method can't be used on a TextTrackList interface, only an HTMLMediaElement.
Syntax
js
addTextTrack(kind)
addTextTrack(kind, label)
addTextTrack(kind, label, language)
Parameters
kind-
A string representing the
TextTrack.kindproperty (subtitles,captions,descriptions,chapters, ormetadata). label-
A string representing the
TextTrack.labelproperty. language-
A string representing the
TextTrack.languageproperty.
Return value
The newly created TextTrack object.
Exceptions
None.
Examples
This example adds a new TextTrack with the kind set to "subtitles", and adds a new VTTCue to that.
js
const video = document.querySelector("video");
const newTrack = video.addTextTrack("subtitles");
newTrack.addCue(new VTTCue(3, 6, "Hello world!"));
console.log(newTrack.cues[0].text);
// "Hello world!"
Specifications
| Specification |
|---|
| HTML # dom-media-addtexttrack-dev |
Browser compatibility
Loading…