翻译正在进行中。

HTML <track> 元素 被当作媒体元素—<audio><video>的子元素来使用。它允许指定计时字幕(或者基于时间的数据),例如自动处理字幕。

track 给媒体元素添加的数据的类型在 kind 属性中设置,属性值可以是 subtitles, captions, descriptions, chaptersmetadata。该元素指向当用户请求额外的数据时浏览器公开的包含定时文本的源文件。

一个media 元素的任意两个 track 子元素不能有相同的 kind, srclang, 和 label属性。

使用上下文

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 parent elements A media element, before any flow content.
Normative document HTML5, section 4.8.9

属性

该元素包含 全局属性

default
该属性定义了该track应该启用,除非用户首选项指定了更合适一个track。每个媒体元素里面只有一个 track 元素可以有这个属性。
kind
定义了 text track 应该如何使用。如果省略了该属性,默认的 kind 值就是 subtitles。下面是允许的关键字:
  • subtitles
    • 字幕给观影者看不懂的内容提供了翻译。比如英文电影里非英文的对话框或者文字。
    • 字幕可能包含额外的内容,通常有附加的背景信息。比如在电影星球大战开头的文字,或者某个场景的日期,时间,还有地点。
  • captions
    • 隐藏式字幕提供了音频的转录甚至是翻译。
    • 可能包含重要的非言语的信息,比如音乐提示或者音效。可以指定提示音的源文件 (e.g. music, text, character).
    • 适用于耳聋的用户或者当调成静音的时候。
  • descriptions
    • 视频内容的文本描述。
    • 适用于失明用户或者当视频不可见的场景。
  • chapters
    • 章节标题用于用户浏览媒体资源的时候。
  • metadata
    • 脚本使用的track。 对用户不可见。
label
当列出可用的text tracks时,给浏览器使用的text track的标题,这种标题是用户可读的。
src
track的地址。必须是合法的URL。该属性必须定义。
srclang
track文本数据的语言。它必须是合法的 BCP 47 语言标签。如果 kind 属性被设为 subtitles, 那么srclang 必须定义。

Usage notes

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

media element cannot have more than one track with the same kindsrclang, and label.

示例

<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>

规范

规范 状态 注释
HTML Living Standard
track element
Living Standard
HTML5
track element
Recommendation Initial definition

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
trackChrome Full support 23Edge Full support YesFirefox Full support 31
Full support 31
No support 24 — 50
Disabled
Disabled 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.
IE Full support 10Opera Full support 12.1Safari Full support 6WebView Android Full support Yes
Notes
Full support Yes
Notes
Notes Doesn't work for fullscreen video.
Chrome Android Full support 25
Notes
Full support 25
Notes
Notes Doesn't work for fullscreen video.
Firefox Android Full support 31
Full support 31
No support 24 — 50
Disabled
Disabled 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.
Opera Android ? Safari iOS ? Samsung Internet Android Full support Yes
defaultChrome Full support 23Edge Full support YesFirefox Full support 31
Full support 31
No support 24 — 50
Disabled
Disabled 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.
IE Full support 10Opera Full support 12.1Safari Full support 6WebView Android Full support 4.4Chrome Android Full support 25Firefox Android Full support 31
Full support 31
No support 24 — 50
Disabled
Disabled 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.
Opera Android ? Safari iOS ? Samsung Internet Android Full support Yes
kindChrome Full support 23Edge Full support YesFirefox Full support 31
Full support 31
No support 24 — 50
Disabled
Disabled 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.
IE Full support 10Opera Full support 12.1Safari Full support 6WebView Android Full support 4.4Chrome Android Full support 25Firefox Android Full support 31
Full support 31
No support 24 — 50
Disabled
Disabled 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.
Opera Android ? Safari iOS ? Samsung Internet Android Full support Yes
labelChrome Full support 23Edge Full support YesFirefox Full support 31
Full support 31
No support 24 — 50
Disabled
Disabled 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.
IE Full support 10Opera Full support 12.1Safari Full support 6WebView Android Full support 4.4Chrome Android Full support 25Firefox Android Full support 31
Full support 31
No support 24 — 50
Disabled
Disabled 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.
Opera Android ? Safari iOS ? Samsung Internet Android Full support Yes
srcChrome Full support 23Edge Full support YesFirefox Full support 31
Full support 31
No support 24 — 50
Disabled
Disabled 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.
IE Full support 10Opera Full support 12.1Safari Full support 6WebView Android Full support 4.4Chrome Android Full support 25Firefox Android Full support 31
Full support 31
No support 24 — 50
Disabled
Disabled 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.
Opera Android ? Safari iOS ? Samsung Internet Android Full support Yes
srclangChrome Full support 23Edge Full support YesFirefox Full support 31
Full support 31
No support 24 — 50
Disabled
Disabled 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.
IE Full support 10Opera Full support 12.1Safari Full support 6WebView Android Full support 4.4Chrome Android Full support 25Firefox Android Full support 31
Full support 31
No support 24 — 50
Disabled
Disabled 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.
Opera Android ? Safari iOS ? Samsung Internet Android Full support Yes

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.

参阅

文档标签和贡献者

最后编辑者: gafish,