HTML 和 JS 中的 Subtitle

在 HTML 和 JS 中，Subtitle 是指嵌入在音视频文件中的文本，用于显示视频/音频内容的字幕。HTML 和 JS 提供了多种方式来处理 subtitle，包括使用 <track> 标签嵌入文字字幕和音频描述。

使用 <track> 标签添加 subtitle

<track> 标签是一种在 HTML 中嵌入文字字幕、章节标题、描述性文字等的方式。以下是一个常见的使用示例：

<video src="video.mp4">
  <track kind="subtitles" src="subtitles.srt" srclang="en" label="English">
  <track kind="subtitles" src="subtitles.zh.srt" srclang="zh" label="中文">
</video>

<track> 标签通常包含以下属性：

1. kind 标记该 track 的类型，例如 subtitles 或 captions。
2. src 该字幕文件的路径。
3. srclang 字幕文件所用语言的 ISO 639-1 代码。
4. label 字幕内容的名称，用于用户选择。

使用 JavaScript 处理 subtitle

与 HTML 结合使用，JavaScript 可以通过 TextTrack 和 TextTrackCue 对象提供更多可视化控制 subtitle 的动态效果。以下是一些常见的示例：

const video = document.querySelector('video');
const track = video.addTextTrack('subtitles', 'English', 'en');
track.mode = 'showing';
const cue = new VTTCue(start, end, text);
track.addCue(cue);

上述代码片段中，addTextTrack() 方法可以在 video 元素中创建一个新的 track 对象，mode 方法表示播放字幕时该如何显示。

另外，VTTCue() 对象可以创建一个新的 cue 对象，表示在播放器控制栏上渲染的字幕文本。我们可以使用 addCue() 方法将 cue 添加到 track 中，从而将 subtitle 播放出来。

Markdown 代码片段

# HTML 和 JS 中的 Subtitle

在 HTML 和 JS 中，Subtitle 是指嵌入在音视频文件中的文本，用于显示视频/音频内容的字幕。HTML 和 JS 提供了多种方式来处理 subtitle，包括使用 `<track>` 标签嵌入文字字幕和音频描述。

## 使用 `<track>` 标签添加 subtitle

`<track>` 标签是一种在 HTML 中嵌入文字字幕、章节标题、描述性文字等的方式。以下是一个常见的使用示例：

```html
<video src="video.mp4">
  <track kind="subtitles" src="subtitles.srt" srclang="en" label="English">
  <track kind="subtitles" src="subtitles.zh.srt" srclang="zh" label="中文">
</video>

<track> 标签通常包含以下属性：

1. kind 标记该 track 的类型，例如 subtitles 或 captions。
2. src 该字幕文件的路径。
3. srclang 字幕文件所用语言的 ISO 639-1 代码。
4. label 字幕内容的名称，用于用户选择。

使用 JavaScript 处理 subtitle

与 HTML 结合使用，JavaScript 可以通过 TextTrack 和 TextTrackCue 对象提供更多可视化控制 subtitle 的动态效果。以下是一些常见的示例：

const video = document.querySelector('video');
const track = video.addTextTrack('subtitles', 'English', 'en');
track.mode = 'showing';
const cue = new VTTCue(start, end, text);
track.addCue(cue);

上述代码片段中，addTextTrack() 方法可以在 video 元素中创建一个新的 track 对象，mode 方法表示播放字幕时该如何显示。

另外，VTTCue() 对象可以创建一个新的 cue 对象，表示在播放器控制栏上渲染的字幕文本。我们可以使用 addCue() 方法将 cue 添加到 track 中，从而将 subtitle 播放出来。