如何在网页视频中添加字幕(WebVTT)?

6 min read

要给<video>视频添加字幕(WebVTT),需要在<video>标签中添加<track>元素。下面是一个例子:

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

在上面的例子中,我们为<video>标签添加了两个<track>元素。第一个<track>元素是默认的,它的src属性指向了英文字幕文件(english.vtt),label属性用于显示字幕的名称,srclang属性指示字幕所使用的语言。kind属性设置为subtitles表示这是一个字幕轨道。

第二个<track>元素与第一个类似。它的src属性指向了西班牙语字幕文件(spanish.vtt),label属性为“Spanish”,srclang属性指示该字幕文件所使用的语言为西班牙语。

使用<track>元素将字幕添加到视频中是一个标准的方法,目前被大多数浏览器所支持。注意,字幕文件必须符合WebVTT格式。