HTML track标签 HTMLtrack标签|HTML5

本文概述

如何创建WEBVTT文件
属性
支持的浏览器

HTML < track> 标记用于为媒体文件定义基于时间的文本轨道。 < track> 标记必须用作< audio> 和< video> 元素的子元素。
< track> 标记用于添加字幕, 标题或播放媒体文件时显示的任何其他形式的文本。
HTML < track> 是HTML5中的新标记。
句法

< track src="http://img.readke.com/220424/0H43V407-0.jpg" kind=" " srclang=" " label=" ">

以下是有关HTML < track> 标记的一些规范

Display	None
开始日期/结束日期	Only start tag(End tag forbidden)
Usage	HTML媒体

例

< !DOCTYPE html> < html> < head> < title> HTML track Tag< /title> < /head> < body> < h2> Example of track tag< /h2> < video controls="controls"> < source src="http://img.readke.com/220424/0H43V407-0.jpgflower.mp4" type="video/mp4"> < track src="http://img.readke.com/220424/0H43V407-0.jpgflower.vtt" kind="subtitles" srclang="en" label="English"> Sorry!Your browser does not support the track < /video> < /body> < /html>

【HTML track标签】立即测试
在上面的示例中, 我们使用了flower.vtt文件在视频文件中添加字幕。以下是flower.vtt文件：

文章图片
如何创建WEBVTT文件以下是为< track> 标签创建WEBVTT文件的一些基本步骤：

在PC中打开文本编辑器, 例如记事本
将WEBVTT编写为编辑器的第一行
留空行
以正确的格式指定持续时间（你也可以提供编号并添加CSS）。
输入并输入要添加字幕或标题的文本, 然后重复步骤3到5, 直到完成。
使用.vtt扩展名保存。

现在, 你的WEBVTT文件可以使用了。
属性特定于标签的属性：

属性	值	描述
default	default	它指定应该启用该轨道, 除非用户的首选项指示另一个轨道更重要。
kind	字幕章节描述元数据字幕	它指定要添加的文本轨道的类型。
label	text	它指定文本轨道的标题。
src	URL	它定义了跟踪文件的URL。
srclang	language_code	它定义了跟踪文本内容的语言, 例如英语, 德语等。