html5的video如何附带字幕？

HTML5 的 <video> 元素可以通过 <track> 元素来添加字幕。<track> 元素允许你指定包含字幕数据的外部文件，并让浏览器根据用户的设置或 JavaScript 代码来控制字幕的显示。

以下是几种添加字幕的方法以及示例：

1. 使用 <track> 元素链接外部字幕文件:

这是最常用的方法，字幕文件可以是 WebVTT (.vtt) 或 SRT (.srt) 格式。

<video width="640" height="360" controls>
  <source src="video.mp4" type="video/mp4">
  <track src="subtitles_zh.vtt" kind="subtitles" srclang="zh" label="中文">
  <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English" default>
  <p>Your browser doesn't support HTML5 video. Here is a <a href="video.mp4">link to the video</a> instead.</p>
</video>

src 属性: 指向字幕文件的 URL。
kind 属性: 指定轨道的类型。常用的值为 subtitles (字幕), captions (隐藏式字幕，包含非对话信息，例如声音描述) 和 descriptions (音频描述)。
srclang 属性: 指定字幕的语言，使用两字母的语言代码 (例如 "en" 表示英语, "zh" 表示中文)。
label 属性: 显示在字幕选择菜单中的名称。
default 属性: 指定默认显示的字幕轨道。

2. WebVTT 文件格式示例 (subtitles_zh.vtt):

WEBVTT

00:00:01.000 --> 00:00:05.000
你好，世界！

00:00:06.000 --> 00:00:10.000
这是 WebVTT 字幕示例。

3. SRT 文件格式示例 (subtitles_en.srt):

1
00:00:01,000 --> 00:00:05,000
Hello, world!

2
00:00:06,000 --> 00:00:10,000
This is an example of SRT subtitles.

4. 使用 JavaScript 动态添加 <track> 元素:

const video = document.querySelector('video');
const track = document.createElement('track');
track.kind = 'subtitles';
track.label = 'English';
track.srclang = 'en';
track.src = 'subtitles_en.vtt';
track.default = true; // 设置为默认字幕
video.appendChild(track);

// 监听字幕加载事件
track.addEventListener('load', () => {
  console.log('Subtitles loaded!');
});