引进于 HTML5
HTML <track>
元素 被当作媒体元素—<audio>
和 <video>
的子元素来使用。它允许指定计时字幕(或者基于事件的数据),例如自动处理字幕。
track
给媒体元素添加的数据的类型在 kind
属性中设置,属性值可以是 subtitles
, captions
, descriptions
, chapters
或 metadata
。该元素指向当用户请求额外的数据时浏览器公开的包含定时文本的源文件。
一个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
必须定义。
DOM 接口
该元素实现了 HTMLTrackElement 接口。
示例
<video controls> <source src="sample.ogv" type="video/ogv"> <track kind="captions" src="sampleCaptions.srt" srclang="en"> <track kind="descriptions" src="sampleDesciptions.srt" srclang="en"> <track kind="chapters" src="sampleChapters.srt" srclang="en"> <track kind="subtitles" src="sampleSubtitles_de.srt" srclang="de"> <track kind="subtitles" src="sampleSubtitles_en.srt" srclang="en"> <track kind="subtitles" src="sampleSubtitles_ja.srt" srclang="ja"> <track kind="subtitles" src="sampleSubtitles_oz.srt" srclang="oz"> <track kind="metadata" src="keyStage1.srt" srclang="en" label="Key Stage 1"> <track kind="metadata" src="keyStage2.srt" srclang="en" label="Key Stage 2"> <track kind="metadata" src="keyStage3.srt" srclang="en" label="Key Stage 3"> </video>
浏览器兼容性
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 23 | 31.0 (31.0) | 10 | 12.10 | 6 |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | 25 (see notes) | 31.0 (31.0) | 未实现 | 未实现 | 未实现 |
[1] Chrome和安卓浏览器在视频全屏的情况下,<track>元素会失效