HTML track 标签
HTML <track> 元素
HTML <track> 元素 被当作媒体元素 <audio> 和 <video>的子元素来使用。
它允许指定时序文本字幕（或者基于时间的数据），例如自动处理字幕。
字幕格式有 WebVTT 格式（.vtt 格式文件） Web 视频文本字幕格式，以及指时序文本标记语言（TTML）格式。
track 给媒体元素添加的数据的类型在 kind 属性中设置，属性值可以是 subtitles, captions, descriptions, chapters 或 metadata 。
该元素指向当用户请求额外的数据时浏览器公开的包含定时文本的源文件。
一个 media 元素的任意两个 track 子元素不能有相同的 kind, srclang, 和 label 属性。
本页介绍的内容，源码托管在 Github 上：https://github.com/axihe/api-html/blob/master/audio-video/tag-track.html
HTML <track> 标签功能
<track> 标签为媒体元素（比如 <audio> and <video>）规定外部文本轨道，也就是我们常说的歌词和字幕。
这个元素用于规定字幕文件或其他包含文本的文件，当媒体播放时，这些文件是可见的。
HTML <track> 标签用法
带有两个字幕轨道的视频：
<video width="320" height="240" controls>
<source src="forrest_gump.mp4" type="video/mp4">
<source src="forrest_gump.ogg" type="video/ogg">
<track src="subtitles_en.vtt" kind="subtitles" srclang="en"
label="English">
<track src="subtitles_no.vtt" kind="subtitles" srclang="no"
label="Norwegian">
</video>
又一个例子
<video controls width="250"
src="/media/examples/friday.mp4">
<track default kind="captions"
srclang="en"
src="/media/examples/friday.vtt"/>
Sorry, your browser doesn't support embedded videos.
</video>
上面的friday.vtt内容如下
WEBVTT
00:00:00.000 --> 00:00:00.999 line:80%
Hildy!
00:00:01.000 --> 00:00:01.499 line:80%
How are you?
00:00:01.500 --> 00:00:02.999 line:80%
Tell me, is the lord of the universe in?
00:00:03.000 --> 00:00:04.299 line:80%
Yes, he's in - in a bad humor
00:00:04.300 --> 00:00:06.000 line:80%
Somebody must've stolen the crown jewels
用法说明
轨道数据类型
track 给媒体元素添加的数据的类型在 kind 属性中设置，属性值可以是 subtitles, captions, descriptions, chapters 或 metadata。该元素指向当用户请求额外的数据时浏览器公开的包含定时文本的源文件。
一个 media 元素的任意两个 track 子元素不能有相同的 kind, srclang, 和 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>
浏览器支持
IE 10、Opera 和 Chrome 浏览器支持 标签。
HTML4 与 HTML5 之间的差异
<track> 标签是 HTML5 中的新标签。
可选的属性
New ：HTML5 中的新属性。
| 属性 | 值 | 描述 |
|---|---|---|
default New |
default | 规定该轨道是默认的。如果用户没有选择任何轨道，则使用默认轨道。 |
kind New |
captions chapters descriptions metadata subtitles |
规定文本轨道的文本类型。 |
label New |
text | 规定文本轨道的标签和标题。 |
src New |
URL | 必需的。规定轨道文件的 URL。 |
srclang New |
language_code | 规定轨道文本数据的语言。如果 kind 属性值是 “subtitles”，则该属性是必需的。 |
subtitles New |
———————- | 字幕给观影者看不懂的内容提供了翻译。 |
captions New |
———————- | 隐藏式字幕提供了音频的转录甚至是翻译。 |
descriptions New |
———————- | 视频内容的文本描述。 |
chapters New |
———————- | 章节标题用于用户浏览媒体资源的时候。 |
metadata New |
———————- | 脚本使用的 track。 对用户不可见。 |
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> 标签支持 HTML 全局属性。
事件属性
<track> 标签支持 HTML 事件属性
