首页 » 编程语言 » html » 正文

HTML5标签:track元素的使用方法及作用

html元素<track> 标签是html5新增的标签,用于定义媒体资源有关的文本信息,有关<track> 标签的使用方法及作用详细介绍如下:

<track> 标签的定义

<track> 标签可以把外部文本文件链接到<video>或<audio>定义的媒体资源上;

<track>标签为<video>或<audio>提供不同语言的字幕或不同的外部文本文件;

<track>标签是空元素,也是单标签,即只有开始标签,没有结束标签;

<track>标签必须作为子元素写在<audio> 或 <video> 元素的内部;

<track> 标签可以在<audio> 或 <video> 元素内部定义多个 <track> 元素:

<track> 标签是 HTML 5 中的新标签

浏览器支持

<track> 标签已被Internet Explorer 10+, Chrome 以及 Opera 支持 。

但目前为止,仍有不少浏览器对<track> 标签支持不太良好,请慎用!

<track> 标签用法

下面,设置一个带有两个字幕轨道的视频,一个包含汉语字幕和英文字幕的视频的例子,演示代码如下:

<video width="320" height="240" controls="controls">
   <source src="shipin.mp4" type="video/mp4" />
   <source src="shipin.ogg" type="video/ogg" />
   <track kind="subtitles" src="subs_chi.srt" srclang="zh" label="Chinese">
   <track kind="subtitles" src="subs_eng.srt" srclang="en" label="English">
 </video>

<audio> 或 <video>可以包含多个<track>标签 。

<track> 标签的kind属性

kind属性用于指定相关文本字幕信息(即用于存放字幕、章节标题、说明文字或元数据的文件) 的种类;

如果<track> 标签中的kind属性值是 "subtitles",则srclang属性是必需的。kind属性值有以下五种类型:

subtitles:就是字幕了,不一定是翻译,也可能是补充性说明;

captions:报幕内容,可能包含演职员表等元信息,适合听障人士或者没有打开声音的人了解音频内容;

descriptions:视频描述信息,适合视障人士或者没有视频播放功能的终端打开视频时了解视频内容;

chapters:用于浏览器视频内容;

metadata:给代码提供的元信息,对普通用户不可见。

<track> 标签属性

属性描述
default
default规定该轨道是默认的。如果用户没有选择任何轨道,则使用默认轨道。
kind
captions
chapters
descriptions
metadata
subtitles
规定文本轨道的文本类型。
label
text规定文本轨道的标签和标题。
src
URL

必需的。规定轨道文件的 URL。

src属性用于指定字幕文件的存放路径,该属性是一个必须使用的属性。

src属性的属性值可以是一个绝对URL路径,也可以是一个相对URL路径。

srclang
language_code

规定轨道文本数据的语言。

例如,srclang="en" 和srclang="zh-cn"分别表示字幕文件为英语和汉语。

注意:如果 kind 属性值是 "subtitles",则该属性是必需的。



欢迎您发表评论或留言