<track>

引进于 HTML5

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

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>元素会失效

参阅

文档标签和贡献者