<track>

HTML <track> 元素 被当作媒体元素—<audio><video>的子元素来使用。它允许指定时序文本字幕(或者基于时间的数据),例如自动处理字幕。字幕格式有 WebVTT 格式.vtt格式文件)— Web 视频文本字幕格式,以及指时序文本标记语言(TTML)格式。

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

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

使用上下文

内容分类
允许的内容 无, 它是一个 空元素
标签省略 允许省略,因为他是一个空元素,所以开始标签必须存在,结束标记可以省略。
允许的父元素 媒体元素,流内容之前。
允许的ARIA角色
DOM接口 HTMLTrackElement

属性

该元素包含 全局属性

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 必须定义。

用法说明

轨道数据类型

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

一个media 元素的任意两个 track 子元素不能有相同的 kindsrclang, 和 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 Full support 6Samsung Internet Android Full support Yes
cuechange eventChrome Full support YesEdge ? Firefox Full support 68IE No support NoOpera ? Safari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 68Opera Android ? Safari iOS Full support YesSamsung Internet Android ?
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
No support  
No support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.

参阅