在 HTML 中,可以使用 <track>
元素来添加字幕。 <track>
元素是 <video>
或 <audio>
元素的子元素,用于指定与媒体元素一起使用的文本轨道。
以下是添加字幕的基本示例:
<video controls>
<source src="example.mp4" type="video/mp4">
<track src="example.vtt" kind="subtitles" srclang="en" label="English">
</video>
在上面的示例中,我们添加了一个 <track>
元素,其中 src
属性指定字幕文件的 URL,kind
属性指定字幕类型,srclang
属性指定字幕语言,label
属性指定字幕标签,以便显示在用户界面上。
字幕文件通常使用 WebVTT(Web Video Text Tracks)格式编写,文件扩展名为 .vtt
。
在 WebVTT 文件中,字幕文本被包含在 <cues>
元素中,如下所示:
WEBVTT
1
00:00:00.000 --> 00:00:05.000
Welcome to our video!
2
00:00:05.000 --> 00:00:10.000
In this video, we will demonstrate how to add subtitles to your HTML5 video.
在上面的示例中,我们定义了两个字幕文本,每个文本都包含了一个时间戳,指定了何时显示该文本。
需要注意的是,不同的浏览器对字幕支持的程度可能会有所不同。因此,为了确保最佳兼容性,我们应该始终提供默认字幕,以确保所有用户都可以访问视频内容。