html5的video如何附带字幕？

13 min read

HTML5的视频标签可以使用track元素来附带字幕。

下面是一个示例，演示如何使用VTT格式的字幕文件（WebVTT格式是HTML5 video默认支持的格式）：

<!DOCTYPE html>
<html>
  <head>
    <title>带字幕的HTML5视频</title>
  </head>
  <body>
    <video width="640" height="360" controls>
      <source src="video.mp4" type="video/mp4">
      <track src="subtitles.vtt" kind="subtitles" srclang="en" label="English">
    </video>
  </body>
</html>

在这个示例中，video元素中添加了一个track子元素，用于加载字幕文件。其中，src属性指定了字幕文件的URL，kind属性指定了字幕的类型，srclang属性指定了字幕的语言，label属性则指定了字幕显示在用户界面上的标签名称。

VTT格式的字幕文件可以使用任何文本编辑器创建。以下是一个例子：

WEBVTT

1
00:00:10.000 --> 00:00:13.000
This is the first line of the subtitle.

2
00:00:14.000 --> 00:00:17.000
This is the second line of the subtitle.

VTT文件必须以WEBVTT开头，然后是每个字幕的时间码和内容。时间码必须采用HH:MM:SS.MMM或SS.MMM格式（其中HH表示小时，MM表示分钟，SS表示秒，MMM表示毫秒）。