1. 准备字幕文件
假设我们有一个名为subtitle.vtt的字幕文件，内容如下：
WEBVTT
00:00:01.000 --> 00:00:03.000
Hello, welcome to this video.
00:00:04.000 --> 00:00:06.000
I hope you enjoy it.
2. 创建HTML文件
在HTML文件中，使用<video>元素和<track>元素来嵌入视频和字幕：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video with Subtitles</title>
</head>
<body>
<video width="640" height="360" controls>
<source src="example.mp4" type="video/mp4">
<track src="subtitle.vtt" kind="subtitles" srclang="en" label="English">
Your browser does not support the video tag.
</video>
</body>
</html>
解释
<video>元素：
width和height属性用于设置视频的尺寸。
controls属性用于显示播放控件（如播放、暂停、音量等）。
<source>元素：
src属性指定视频文件的路径。
type属性指定视频文件的MIME类型。
<track>元素：
src属性指定字幕文件的路径。
kind属性指定轨道的类型，subtitles表示字幕。
srclang属性指定字幕的语言代码，例如en表示英语。
label属性提供一个可读的标签，用于在用户界面中显示。
多语言字幕
如果你有多种语言的字幕文件，可以添加多个元素：
<video width="640" height="360" controls>
<source src="example.mp4" type="video/mp4">
<track src="subtitle_en.vtt" kind="subtitles" srclang="en" label="English">
<track src="subtitle_es.vtt" kind="subtitles" srclang="es" label="Spanish">
<track src="subtitle_fr.vtt" kind="subtitles" srclang="fr" label="French">
Your browser does not support the video tag.
</video>
扫一扫
1727
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
