可以使用 track
元素为视频添加字幕和标题。在 video
元素中添加 track
元素,并设置 kind
属性为 subtitles
或 captions
,src
属性指向字幕文件的 URL,srclang
属性指定字幕的语言。例如:
<video controls>
<source src="video.mp4" type="video/mp4">
<track kind="subtitles" src="subtitles_en.vtt" srclang="en" label="English">
<track kind="subtitles" src="subtitles_zh.vtt" srclang="zh" label="中文">
</video>
其中,subtitles
表示字幕类型,captions
表示标题类型。subtitles_en.vtt
和 subtitles_zh.vtt
是字幕文件的 URL,en
和 zh
是字幕的语言代码。label
属性是可选的,表示字幕的标签,用于用户选择字幕时显示。
字幕文件需要使用 WebVTT(Web Video Text Tracks)格式,即以 .vtt
为扩展名的文本文件。WebVTT 是一种用于视频字幕和标题的格式,支持时间轴标记和样式设置。例如:
WEBVTT
1
00:00:00.000 --> 00:00:05.000
Welcome to our video!
2
00:00:05.000 --> 00:00:10.000
This is a demo of using track element to add subtitles and captions to video.
在 WebVTT 文件中,每个字幕或标题都包括一个序号、时间轴标记和文本内容。时间轴标记的格式为 hh:mm:ss.sss
,表示字幕或标题出现和消失的时间点。文本内容可以包含 HTML 标记,用于设置样式。
需要注意的是,不是所有的浏览器都支持 track
元素和 WebVTT 格式。建议在使用前检查浏览器的兼容性。