HTML track 标签

🌙
手机阅读
本文目录结构
axihe

HTML <track> 元素

HTML <track> 元素 被当作媒体元素 <audio><video>的子元素来使用。

它允许指定时序文本字幕(或者基于时间的数据),例如自动处理字幕。

字幕格式有 WebVTT 格式(.vtt 格式文件) Web 视频文本字幕格式,以及指时序文本标记语言(TTML)格式。

track 给媒体元素添加的数据的类型在 kind 属性中设置,属性值可以是 subtitles, captions, descriptions, chaptersmetadata

该元素指向当用户请求额外的数据时浏览器公开的包含定时文本的源文件。

一个 media 元素的任意两个 track 子元素不能有相同的 kind, srclang, 和 label 属性。

本页介绍的内容,源码托管在 Github 上:https://github.com/axihe/api-html/blob/master/audio-video/tag-track.html

HTML <track> 标签功能

<track> 标签为媒体元素(比如 <audio> and <video>)规定外部文本轨道,也就是我们常说的歌词和字幕

这个元素用于规定字幕文件或其他包含文本的文件,当媒体播放时,这些文件是可见的。

HTML <track> 标签用法

带有两个字幕轨道的视频:

<video width="320" height="240" controls>
    <source src="forrest_gump.mp4" type="video/mp4">
    <source src="forrest_gump.ogg" type="video/ogg">
    <track src="subtitles_en.vtt" kind="subtitles" srclang="en"
    label="English">
    <track src="subtitles_no.vtt" kind="subtitles" srclang="no"
    label="Norwegian">
</video>

又一个例子

<video controls width="250"
       src="/media/examples/friday.mp4">
    <track default kind="captions"
           srclang="en"
           src="/media/examples/friday.vtt"/>
    Sorry, your browser doesn't support embedded videos.
</video>

https://a.axihe.com/api/html/chrome_RRxAuLX8Sj.png

上面的friday.vtt内容如下

WEBVTT

00:00:00.000 --> 00:00:00.999  line:80%
Hildy!

00:00:01.000 --> 00:00:01.499 line:80%
How are you?

00:00:01.500 --> 00:00:02.999 line:80%
Tell me, is the lord of the universe in?

00:00:03.000 --> 00:00:04.299 line:80%
Yes, he's in - in a bad humor

00:00:04.300 --> 00:00:06.000 line:80%
Somebody must've stolen the crown jewels

用法说明

轨道数据类型

track 给媒体元素添加的数据的类型在 kind 属性中设置,属性值可以是 subtitles, captions, descriptions, chapters 或 metadata。该元素指向当用户请求额外的数据时浏览器公开的包含定时文本的源文件。

一个 media 元素的任意两个 track 子元素不能有相同的 kind, srclang, 和 label 属性。

<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>

浏览器支持

IE 10、Opera 和 Chrome 浏览器支持 标签。


HTML4 与 HTML5 之间的差异

<track> 标签是 HTML5 中的新标签。


可选的属性

New :HTML5 中的新属性。

属性描述
default Newdefault规定该轨道是默认的。如果用户没有选择任何轨道,则使用默认轨道。
kind Newcaptions
chapters
descriptions
metadata
subtitles
规定文本轨道的文本类型。
label Newtext规定文本轨道的标签和标题。
src NewURL必需的。规定轨道文件的 URL。
srclang Newlanguage_code规定轨道文本数据的语言。如果 kind 属性值是 “subtitles”,则该属性是必需的。
subtitles New———————-字幕给观影者看不懂的内容提供了翻译。
captions New———————-隐藏式字幕提供了音频的转录甚至是翻译。
descriptions New———————-视频内容的文本描述。
chapters New———————-章节标题用于用户浏览媒体资源的时候。
metadata New———————-脚本使用的 track。 对用户不可见。

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

全局属性

<track> 标签支持 HTML 全局属性


事件属性

<track> 标签支持 HTML 事件属性


AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili 和抖音。

关注我: Github / 知乎

如果你加我的私人微信,麻烦写上您的 称呼,所在地区,职业,方便我备注,谢谢


本站的微信公众号

阿西河前端教程

Anbang

安邦的私人微信

微信号: yaolushan

Anbang

Bilibili(B站)

朱安邦

Anbang