我們的志工尚未將本文翻譯為 正體中文 (繁體) 版本。加入我們,幫忙翻譯!
您也可以閱讀本文的 English (US) 版本。

The HTML <track> element is used as a child of the media elements <audio> and <video>. It lets you specify timed text tracks (or time-based data), for example to automatically handle subtitles. The tracks are formatted in WebVTT format (.vtt files) — Web Video Text Tracks.

Content categories None
Permitted content None, it is an empty element.
Tag omission As it is a void element, the start tag must be present and the end tag must not be present.
Permitted parents A media element, before any flow content.
Permitted ARIA roles None
DOM interface HTMLTrackElement

Attributes

This element includes the global attributes.

default
This attribute indicates that the track should be enabled unless the user's preferences indicate that another track is more appropriate. This may only be used on one track element per media element.
kind
How the text track is meant to be used. If omitted the default kind is subtitles. If the attribute is not present, it will use the subtitles. If the attribute contains an invalid value, it will use metadata. (Versions of Chrome earlier than 52 treated an invalid value as subtitles.) The following keywords are allowed:
  • subtitles
    • Subtitles provide translation of content that cannot be understood by the viewer. For example dialogue or text that is not English in an English language film.
    • Subtitles may contain additional content, usually extra background information. For example the text at the beginning of the Star Wars films, or the date, time, and location of a scene.
  • captions
    • Closed captions provide a transcription and possibly a translation of audio.
    • It may include important non-verbal information such as music cues or sound effects. It may indicate the cue's source (e.g. music, text, character).
    • Suitable for users who are deaf or when the sound is muted.
  • descriptions
    • Textual description of the video content.
    • Suitable for users who are blind or where the video cannot be seen.
  • chapters
    • Chapter titles are intended to be used when the user is navigating the media resource.
  • metadata
    • Tracks used by scripts. Not visible to the user.
label
A user-readable title of the text track which is used by the browser when listing available text tracks.
src
Address of the track (.vtt file). Must be a valid URL. This attribute must be defined.
srclang
Language of the track text data. It must be a valid BCP 47 language tag. If the kind attribute is set to subtitles, then srclang must be defined.

Usage notes

The type of data that track adds to the media is set in the kind attribute, which can take values of subtitles, captions, descriptions, chapters or metadata. The element points to a source file containing timed text that the browser exposes when the user requests additional data.

A media element cannot have more than one track with the same kind, srclang, and label.

Examples

<video controls poster="/images/sample.gif">
   <source src="sample.mp4" type="video/mp4">
   <source src="sample.ogv" type="video/ogv">
   <track kind="captions" src="sampleCaptions.vtt" srclang="en">
   <track kind="descriptions"
     src="sampleDescriptions.vtt" srclang="en">
   <track kind="chapters" src="sampleChapters.vtt" srclang="en">
   <track kind="subtitles" src="sampleSubtitles_de.vtt" srclang="de">
   <track kind="subtitles" src="sampleSubtitles_en.vtt" srclang="en">
   <track kind="subtitles" src="sampleSubtitles_ja.vtt" srclang="ja">
   <track kind="subtitles" src="sampleSubtitles_oz.vtt" srclang="oz">
   <track kind="metadata" src="keyStage1.vtt" srclang="en"
     label="Key Stage 1">
   <track kind="metadata" src="keyStage2.vtt" srclang="en"
     label="Key Stage 2">
   <track kind="metadata" src="keyStage3.vtt" srclang="en"
     label="Key Stage 3">
   <!-- Fallback -->
   ...
</video>

Specifications

Specification Status Comment
HTML Living Standard
The definition of 'track element' in that specification.
Living Standard  
HTML5
The definition of 'track element' in that specification.
Recommendation Initial definition

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support23 Yes

31

24 — 502

1012.16
default23 Yes

31

24 — 502

1012.16
kind23 Yes

31

24 — 502

1012.16
label23 Yes

31

24 — 502

1012.16
src23 Yes

31

24 — 502

1012.16
srclang23 Yes

31

24 — 502

1012.16
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
Basic support251251 Yes

31

24 — 502

? ? ?
default2525 Yes

31

24 — 502

? ? ?
kind2525 Yes

31

24 — 502

? ? ?
label2525 Yes

31

24 — 502

? ? ?
src2525 Yes

31

24 — 502

? ? ?
srclang2525 Yes

31

24 — 502

? ? ?

1. Doesn’t work for fullscreen video.

2. From version 24 until version 50 (exclusive): this feature is behind the media.webvtt.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

See also