在 HTML 中添加字幕文件的方法

在制作网页中，如果需要为电影或视频添加字幕，可以使用 HTML5 提供的 <track> 元素来实现。本篇文章将介绍如何在 HTML 中使用 <track> 元素添加字幕文件。

什么是 <track> 元素？

<track> 元素是 HTML5 新增的一个元素，用于为媒体元素（如 <video> 或 <audio>）添加 WebVTT 字幕。WebVTT 是一种用于在 Web 上渲染文本轨道的格式。

如何使用 <track> 元素添加字幕文件？

首先，需要有一个 <video> 元素来承载视频，示例如下：

<video controls>
  <source src="video.mp4" type="video/mp4">
</video>

注意 controls 属性表示显示视频控件，<source> 元素指定视频文件路径和类型。

接下来，在 <video> 元素中添加 <track> 元素。示例如下：

<video controls>
  <source src="video.mp4" type="video/mp4">
  <track src="subtitles.vtt" kind="subtitles" srclang="en" label="English">
</video>

上述示例中，<track> 元素使用了以下属性：

• src：字幕文件路径。
• kind：字幕类型，有 subtitles（字幕）和 captions（字幕及翻译）两种类型。
• srclang：字幕语言，使用 ISO 639-1 代码表示，如 en 表示英文。
• label：字幕显示的标签。

WebVTT 格式的字幕文件如何编写？

WebVTT 格式与 SRT 格式相似，以时间轴为基础，每个字幕条目由一个时间戳和一个文本片段组成。示例如下：

1
00:00:00.000 --> 00:00:05.000
Hello, this is the first line.

2
00:00:05.500 --> 00:00:10.000
This is the second line of the subtitle.

每个字幕条目由以下部分组成：

• 序号，可以是任何数字，但字幕文件中需要唯一。
• 时间轴，格式为 HH:MM:SS.mmm，表示字幕的开始和结束时间。
• 一到多行文本片段，字幕条目的内容。

总结

在 HTML 中使用 <track> 元素添加字幕文件非常简单，只需要定义好字幕文件的路径、类型和语言即可。WebVTT 格式的字幕文件也非常易于编写，制作字幕文件也不再是一件复杂的事情。