首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

track

HTML 元素作为媒体元素的子和。它允许您指定定时文本轨道(或基于时间的数据),例如自动处理字幕。曲目格式为WebVTT格式(文件) - 网络视频文本曲目。<track> <audio><video>.vtt

内容类别

没有

允许的内容

没有,这是一个空的元素。

标记遗漏

由于它是空白元素,所以开始标记必须存在,并且结束标记不得存在。

允许 parents

媒体元素,在任何流内容之前。

允许ARIA角色

没有

DOM界面

HTMLTrackElement

属性

该元素包含全局属性。

default属性表示应该启用该轨道,除非用户的偏好指示另一个轨道更合适。这只能用于track每个媒体元素的一个元素。kind文本轨道是如何使用的。如果省略,则默认类型为subtitles。如果该属性不存在,它将使用属性subtitles。如果属性包含无效值,它将使用metadata。(52之前版本的Chrome将无效值视为subtitles。)允许使用以下关键字:

  • subtitles
    • 字幕提供翻译观众无法理解的内容。例如在英语电影中不是英语的对话或文本。
    • 字幕可能包含额外的内容,通常是额外的背景信息。例如,“星球大战”电影开头的文字,或场景的日期,时间和地点。
  • captions
    • 隐藏式字幕提供了一个转录,可能还包括音频的翻译。
    • 它可能包含重要的非语言信息,如音乐提示或音效。它可能指示提示的来源(例如音乐,文字,字符)。
    • 适用于聋哑人或声音静音的用户。
  • descriptions
    • 视频内容的文字描述。
    • 适合盲人或无法看到视频的用户。
  • chapters
    • 章节标题旨在用户在浏览媒体资源时使用。
  • metadata
    • 脚本使用的轨道。对用户不可见。

label列出可用文本轨道时浏览器使用的文本轨道的用户可读标题。src曲目地址(.vtt文件)。必须是有效的网址。这个属性必须被定义。srclang轨道文本数据的语言。它必须是有效的BCP 47语言标签。如果kind属性设置为subtitles,srclang必须定义。

使用说明

数据的类型 track添加到介质被设置在所述kind属性,这可能需要subtitlescaptionsdescriptionschaptersmetadata的值。元素指向一个源文件,其中包含浏览器在用户请求附加数据时公开的定时文本。

media元素不能有一个以上track具有相同kindsrclanglabel

例子

代码语言:javascript
复制
<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>

规格

规范

状态

评论

WHATWG HTML规范该标准中“轨道元素”的定义。

Living Standard

HTML5规范“轨道元素”的定义。

Recommendation

初始定义

浏览器兼容性

Feature

Chrome

Edge

Firefox (Gecko)

Internet Explorer

Opera

Safari

Basic support

23

(Yes)

24 (24)2

10

12.10

6

src attribute settable

?

(Yes)

50 (50)3

?

?

?

Invalid kind value as metadata

No support

?

No support

No support

No support

No support

Feature

Android

Edge

Firefox Mobile (Gecko)

IE Mobile

Opera Mobile

Safari Mobile

Basic support

251

(Yes)

24.0 (24)2

No support

No support

No support

src attribute settable

?

(Yes)

50.0 (50)3

No support

No support

No support

Invalid kind value as metadata

No support

?

No support

No support

No support

No support

1. 在Chrome for Android中,<track>元素尚不适用于全屏视频。

2 .<track>元素,HTMLTrackElement接口和相关的API在首选项后面的Firefox 24中实现,media.webvtt.enabled默认情况下它是禁用的。要启用WebVTT支持,请将此首选项设置为true。WebVTT在Firefox 31中默认启用,可以通过将首选项设置为禁用false

3. 在Firefox 50之前,src属性是可设置的,但更改无法正确处理。从Firefox 50开始,现有轨道数据已妥善处理,新轨道数据已加载并生效等等。

扫码关注腾讯云开发者

领取腾讯云代金券