HTML - <track> 标签

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

语法

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

属性

HTML track 标签支持 HTML 的全局和事件属性。以及一些特定的属性，如下所示。

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

HTML track 标签示例

以下示例将说明 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
Tutorialspoint.com is a dedicated website to provide quality online education

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

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

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

创建韩语视频轨道

考虑另一种情况，我们将添加韩语字幕。

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

html_tags_reference.htm

打印页面