1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
|
---
title: <track>
slug: Web/HTML/Element/track
translation_of: Web/HTML/Element/track
---
<p><strong>HTML <code><track></code> 元素</strong> 被当作媒体元素—{{HTMLElement("audio")}} 和 {{HTMLElement("video")}}的子元素来使用。它允许指定时序文本字幕（或者基于时间的数据），例如自动处理字幕。字幕格式有 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Video_Text_Tracks_Format">WebVTT 格式</a>（<code>.vtt</code>格式文件）— Web 视频文本字幕格式，以及指<a href="https://w3c.github.io/ttml2/index.html">时序文本标记语言（TTML）</a>格式。</p>
<p><code>track</code> 给媒体元素添加的数据的类型在 <code>kind</code> 属性中设置，属性值可以是 <code>subtitles</code>, <code>captions</code>, <code>descriptions</code>, <code>chapters</code> 或 <code>metadata</code>。该元素指向当用户请求额外的数据时浏览器公开的包含定时文本的源文件。</p>
<p>一个<code>media</code> 元素的任意两个 <code>track</code> 子元素不能有相同的 <code>kind</code>, <code>srclang</code>, 和 <code>label</code>属性。</p>
<p>{{EmbedInteractiveExample("pages/tabbed/track.html", "tabbed-standard")}}</p>
<h2 id="使用上下文">使用上下文</h2>
<table class="standard-table">
<tbody>
<tr>
<td><strong><a href="https://developer.mozilla.org/zh-cn/docs/Web/HTML/Content_categories" rel="nofollow">内容分类</a></strong></td>
<td>无</td>
</tr>
<tr>
<td><strong>允许的内容</strong></td>
<td><span style="background-color: rgba(212, 221, 228, 0.14902);">无, 它是一个 {{Glossary("空元素")}}。</span></td>
</tr>
<tr>
<td><strong>标签省略</strong></td>
<td>允许省略，因为他是一个空元素，所以开始标签必须存在，结束标记可以省略。</td>
</tr>
<tr>
<td><strong>允许的父元素</strong></td>
<td>媒体元素，<a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Flow_content">流内容</a>之前。</td>
</tr>
<tr>
<td><strong>允许的ARIA角色</strong></td>
<td>无</td>
</tr>
<tr>
<td><strong>DOM接口</strong></td>
<td>{{domxref("HTMLTrackElement")}}</td>
</tr>
</tbody>
</table>
<h2 id="属性">属性</h2>
<p><span style="line-height: 21px;">该元素包含 </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">全局属性</a><span style="line-height: 21px;">。</span></p>
<dl>
<dt>{{htmlattrdef("default")}}</dt>
<dd>该属性定义了该track应该启用，除非用户首选项指定了更合适一个track。每个媒体元素里面只有一个 <code>track</code> 元素可以有这个属性。</dd>
<dt>{{htmlattrdef("kind")}}</dt>
<dd>定义了 text track 应该如何使用。如果省略了该属性，默认的 kind 值就是 <code>subtitles</code>。下面是允许的关键字：
<ul>
<li><code>subtitles</code>
<ul>
<li>字幕给观影者看不懂的内容提供了翻译。比如英文电影里非英文的对话框或者文字。</li>
<li>字幕可能包含额外的内容，通常有附加的背景信息。比如在电影星球大战开头的文字，或者某个场景的日期，时间，还有地点。</li>
</ul>
</li>
<li><font face="Consolas, Liberation Mono, Courier, monospace">captions</font>
<ul>
<li>隐藏式字幕提供了音频的转录甚至是翻译。</li>
<li>可能包含重要的非言语的信息，比如音乐提示或者音效。可以指定提示音的源文件 (e.g. music, text, character).</li>
<li>适用于耳聋的用户或者当调成静音的时候。</li>
</ul>
</li>
<li><code>descriptions</code>
<ul>
<li>视频内容的文本描述。</li>
<li>适用于失明用户或者当视频不可见的场景。</li>
</ul>
</li>
<li><code>chapters</code>
<ul>
<li>章节标题用于用户浏览媒体资源的时候。</li>
</ul>
</li>
<li><code>metadata</code>
<ul>
<li>脚本使用的track。 对用户不可见。</li>
</ul>
</li>
</ul>
</dd>
<dt>{{htmlattrdef("label")}}</dt>
<dd>当列出可用的text tracks时，给浏览器使用的text track的标题，这种标题是用户可读的。</dd>
<dt>{{htmlattrdef("src")}}</dt>
<dd>track的地址。必须是合法的URL。该属性必须定义。</dd>
<dt>{{htmlattrdef("srclang")}}</dt>
<dd>track文本数据的语言。它必须是合法的 <a href="http://people.w3.org/rishida/utils/subtags/" title="http://people.w3.org/rishida/utils/subtags/">BCP 47</a> 语言标签。如果 <code>kind</code> 属性被设为 <code>subtitles,</code> 那么<code>srclang</code> 必须定义。</dd>
</dl>
<h2 id="用法说明">用法说明</h2>
<h3 id="轨道数据类型">轨道数据类型</h3>
<p><code>track</code> 给媒体元素添加的数据的类型在 <code>kind</code> 属性中设置，属性值可以是 <code>subtitles</code>, <code>captions</code>, <code>descriptions</code>, <code>chapters</code> 或 <code>metadata</code>。该元素指向当用户请求额外的数据时浏览器公开的包含定时文本的源文件。</p>
<p>一个<code>media</code> 元素的任意两个 <code>track</code> 子元素不能有相同的 <code>kind</code>, <code>srclang</code>, 和 <code>label</code>属性。</p>
<h2 id="示例">示例</h2>
<pre><code><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></code>
</pre>
<h2 id="规范">规范</h2>
<table>
<thead>
<tr>
<th scope="col">规范</th>
<th scope="col">状态</th>
<th scope="col">注释</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG','embedded-content.html#the-track-element','track element')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName("HTML5 W3C", "embedded-content-0.html#the-track-element", "track element")}}</td>
<td>{{Spec2("HTML5 W3C")}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性"><span style="font-size: 2.143rem; line-height: 1;">浏览器兼容性</span></h2>
<p>{{Compat("html.elements.track")}}</p>
<h2 id="参阅">参阅</h2>
<ul>
<li><a href="/en-US/docs/HTML/WebVTT" title="HTML/WebVTT">WebVTT text track format</a></li>
</ul>
<p>{{HTMLRef}}</p>
|
