HTML - track 标签

HTML <track> 标签用于定义媒体文件的基于时间的文本轨道。<audio> 和 <video> 元素必须使用 <track> 标签作为子元素。添加字幕、字幕和其他类型的文本可以使用 <track> 标签添加，并将在播放媒体文件时显示。此标签是 HTML5 中新引入的。轨道的格式为 WebVTT（.vtt 文件）。媒体元素中不能包含具有相同标签、srclang 和 kind 的多个轨道。

语法


<track src=" " kind=" " srclang=" " label=" ">

属性

<track> 标签支持 HTML 的全局属性和事件属性。还有一些特定的属性，这些属性在下面列出。

属性	值	描述
default	default	指定如果用户想要更改轨道，则要启用的轨道。
kind	captions chapters descriptions metadata subtitles	指定要使用的轨道类型。
label	text	显示文本轨道的标题。
src	URL	指定轨道 URL。
srclang	language_code	指定轨道文本数据的语言（如果 kind=“subtitles”，则为必填项）。

HTML 跟踪标签示例

下面的示例将说明<track> 标签的用法。在何处、何时以及如何使用<track> 标签。

创建英语视频轨道

让我们看一下以下示例，我们将在其中使用 <track> 并获取英文字幕。


<!DOCTYPE html>
<html>
<head>
    <title>Video Player</title>
    <style>
       video {
          width: 30%;
          height: 40%;
       }
    </style>
</head>
<body>
    <video controls>
       <source src="https://cdn.pixabay.com/vimeo/830461265/fogging-164360.mp4?width=1280&hash=f05a9cb58caeefbe7afe937ce7f9a00784d5f219" type="video/mp4">
       <track src="ex1.vtt" kind="captions" label="English" srclang="en">
    </video>
</body>
</html>

字幕文件

保存以下标题文件，名称为“ex1.vtt”

WEBVTT

00:00:00.000 --> 00:00:10.000
Tuotorialspoint

00:00:10.000 --> 00:00:20.000
Simply Easy Learning

00:00:20.000 --> 00:00:30.000
Qikepu.com is a dedicated website to provide quality online education

00:00:30.000 --> 00:00:35.000
Global headquarters for QikepuCom is located in Hyderabad,Telangana,India.

00:00:35.000 --> 00:00:41.000
Mohtashim M. is the Founder & Managing Director at QikepuCom .

要执行上述程序，请将“ex1.vtt”（标题）和“index1.html”（HTML 文档）放在一个文件夹中，以查看预期的输出。要查看用户需要在播放器中的字幕上查看输出。

创建韩语视频轨道

考虑另一种情况，我们要用<track> 标签添加韩语字幕。


<!DOCTYPE html>
<html>
<body style="background-color:#D5F5E3 ">
    <video width="300" height="150" controls autoplay>
       <source src="https://cdn.pixabay.com/vimeo/497754241/laptop-61037.mp4?width=640&hash=d25d7f4b8afa862b3252bdaeaf157934ceb1bb72" type="video/mp4">
       <track src="ex2.vtt" kind="captions" label="Korean" srclang="ko">
    </video>
</body>
</html>

字幕文件

保存以下标题文件，名称为“ex2.vtt” -

WEBVTT

00:00:00.000 --> 00:00:02.000
환영

00:00:02.000 --> 00:00:05.000
아름다운 세상으로.!

00:00:05.000 --> 00:00:07.000
많은 생물을 찾을 수 있는 곳

00:00:07.000 --> 00:00:10.000
많은 전통과 많은 종교s

要执行上述程序，请将“ex2.vtt”（标题）和“index2.html”（HTML 文档）放在一个文件夹中，以查看预期的输出。要查看用户需要在播放器中的字幕上查看输出。

支持的浏览器

浏览器
<track>	23.0	10.0	31.0	6.0	12.1

打印本页