<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表格仅在浏览器中加载