如何给`<video>`视频添加字幕(WebVTT)？

使用 WebVTT (Web Video Text Tracks) 格式给 video 视频添加字幕，主要有两种方法：

1. <track> 元素:

这是推荐的方法，因为它直接在 HTML 中关联字幕文件，更语义化，也更易于维护。

<!DOCTYPE html>
<html>
<head>
<title>Video with subtitles</title>
</head>
<body>

<video controls width="640" height="360">
  <source src="video.mp4" type="video/mp4">
  <track src="subtitles.vtt" kind="subtitles" label="English" srclang="en" default>
  <track src="subtitles_zh.vtt" kind="subtitles" label="中文" srclang="zh">
</video>

</body>
</html>

解释：

  • <track> 元素: 用于指定字幕文件。必须放在 <video> 元素内部。
  • src 属性: 字幕文件的 URL。
  • kind 属性: 字幕的类型。 subtitles 表示字幕，captions 表示对视频中声音和非对话音频的描述，descriptions 表示对视频内容的描述，chapters 表示章节标记，metadata 表示元数据 (通常不用于直接显示)。
  • label 属性: 字幕的名称，显示在字幕选择菜单中。
  • srclang 属性: 字幕的语言代码 (例如 en 表示英语，zh 表示中文)。
  • default 属性: 指定默认显示的字幕。

subtitles.vtt 文件示例:

WEBVTT

00:00:05.000 --> 00:00:10.000
Hello, world!

00:00:12.000 --> 00:00:17.000
This is a subtitle example.

2. JavaScript 的 Track API:

这种方法更灵活，可以在运行时动态添加或修改字幕。

const video = document.querySelector('video');
const track = video.addTextTrack('subtitles', 'English', 'en');

track.mode = 'showing'; // 设置字幕显示

const cue1 = new VTTCue(5, 10, 'Hello, world!');
const cue2 = new VTTCue(12, 17, 'This is a subtitle example.');

track.addCue(cue1);
track.addCue(cue2);

解释：

  • addTextTrack() 方法: 创建一个新的 TextTrack 对象。参数分别为 kind、label 和 srclang。
  • mode 属性: 设置字幕的显示模式。 showing 表示显示，hidden 表示隐藏，disabled 表示禁用。
  • VTTCue 对象: 表示一个字幕片段。构造函数的参数分别为起始时间 (秒)、结束时间 (秒) 和字幕文本。
  • addCue() 方法: 将字幕片段添加到 TextTrack 对象中。

选择哪种方法:

  • 对于简单的字幕添加，<track> 元素更简单易用。
  • 对于需要动态控制字幕的场景，例如根据用户交互或其他条件显示不同字幕，可以使用 JavaScript 的 Track API。

跨域问题:

如果字幕文件和 HTML 文件不在同一个域，需要在字幕文件服务器上设置 CORS (Cross-Origin Resource Sharing) 头信息，允许跨域访问。

浏览器兼容性:

WebVTT 格式在现代浏览器中得到广泛支持。 对于旧版浏览器，可能需要使用 polyfill 或其他解决方案。

posted @ 2024-12-14 06:16  王铁柱6  阅读(186)  评论(0)    收藏  举报