<track>:嵌入文本轨道元素
<track>
HTML 元素用作媒体元素 <audio>
和 <video>
的子元素。每个轨道元素允许您指定一个定时文本轨道(或基于时间的的数据),该轨道可以与媒体元素并行显示,例如,在视频上叠加字幕或隐藏式字幕,或与音频轨道一起显示。
可以为媒体元素指定多个轨道,其中包含不同类型的定时文本数据,或已针对不同语言环境翻译的定时文本数据。使用的数据将是已设置为默认值的轨道,或基于用户首选项的类型和翻译。
轨道采用 WebVTT 格式(.vtt
文件)— Web 视频文本轨道。
试一试
属性
此元素包含全局属性。
默认
-
此属性指示应启用该轨道,除非用户的首选项表明另一个轨道更合适。这只能用于每个媒体元素上的一个
track
元素。 kind
-
文本轨道的预期用途。如果省略,则默认的kind为
subtitles
。如果属性包含无效值,则将使用metadata
。允许以下关键字subtitles
- 字幕提供对观看者无法理解的内容的翻译。例如,英语电影中非英语的语音或文本。
- 字幕可能包含其他内容,通常是额外的背景信息。例如,《星球大战》电影开头的文字,或场景的日期、时间和地点。
captions
- 隐藏式字幕提供音频的转录和可能的翻译。
- 它可能包含重要的非语言信息,例如音乐提示或音效。它可能指示提示的来源(例如,音乐、文本、角色)。
- 适用于聋哑用户或声音静音时。
chapters
- 当用户浏览媒体资源时,章节标题用于导航。
metadata
- 脚本使用的轨道。用户不可见。
label
-
文本轨道的用户可读标题,浏览器在列出可用文本轨道时使用。
src
-
轨道的地址(
.vtt
文件)。必须是有效的URL。此属性必须指定,并且其URL值必须与文档具有相同的来源——除非track
元素的<audio>
或<video>
父元素具有crossorigin
属性。 srclang
-
轨道文本数据的语言。它必须是有效的BCP 47语言标签。如果
kind
属性设置为subtitles
,则必须定义srclang
。
用法说明
轨道数据类型
track
添加到媒体的数据类型在kind
属性中设置,该属性可以取subtitles
、captions
、chapters
或metadata
的值。该元素指向一个包含定时文本的源文件,当用户请求其他数据时,浏览器会公开该文件。
媒体元素不能具有多个具有相同kind
、srclang
和label
的track
。
检测提示更改
由TextTrack
(由track
属性指示)表示的基础对象在每次当前显示的提示更改时都会收到cuechange
事件。即使轨道未与媒体元素关联,也会发生这种情况。
如果轨道确实与媒体元素关联,则使用<track>
元素作为<audio>
或<video>
元素的子元素,cuechange
事件也会发送到HTMLTrackElement
。
let textTrackElem = document.getElementById("texttrack");
textTrackElem.addEventListener("cuechange", (event) => {
let cues = event.target.track.activeCues;
});
以编程方式添加文本轨道
表示<track>
元素的JavaScript接口是HTMLTrackElement
。与元素关联的文本轨道可以从HTMLTrackElement.track
属性中获取,并且类型为TextTrack
。
TextTrack
对象也可以使用HTMLMediaElement.addTextTrack()
方法添加到HTMLVideoElement
或HTMLAudioElement
元素。与媒体元素关联的TextTrack
对象存储在TextTrackList
中,可以使用HTMLMediaElement.textTracks
属性检索。
示例
<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="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标准 # the-track-element |
浏览器兼容性
BCD表格仅在浏览器中加载