如何在html视频中添加字幕？

Question

我尝试使用该track元素，但没有用。.能否请您告诉我是否做错了什么？

<video controls="controls" id="video1" width="450">
    <source src="A taste of TED.mp4" type="video/mp4">
    <track src="TED.vtt" kind="subtitles" srclang="en" label="English">
 </video>

字幕文件（TED.vtt）如下所示：

WEBVTT

1
00:00:01.000 --> 00:00:10.000
This is the first line of text, displaying from 1-10 seconds

2
00:00:15.000 --> 00:00:20.000
And the second line of text
separated over two lines

Answer 1

代码：

<video controls="controls" id="video1" width="450">
    <source src="A taste of TED.mp4" type="video/mp4" />
    <track src="TED.vtt" kind="subtitles" srclang="en" label="English" />
</video>

作品。您可能做错了什么，是您使用.srt字幕而不是字幕.vtt

网址：

1
00:01:21,700 --> 00:01:24,675
Life on the road is something 
I was raised to embrace.

vtt：

WEBVTT

01:21.700 --> 01:24.675
Life on the road is something 
I was <i>raised</i> to embrace.

您需要做的是：

• 使用WEBVTT启动文本文件
• 删除每个字幕开头的提示标记，或将其替换为“提示-前缀”。
• （可选）在每个时间戳记的开头删除00：小时标记。
• 将每个时间戳中毫秒标记前的逗号转换为小数点（例如，使用find-replace很容易：，7到.7）。
• （可选）将样式标记添加到字幕文本。
• 保存扩展名为.vtt的文件，并从HTML5页面中的元素链接到该文件。

另外，您的网络Bowser可能不支持video标签，例如，我知道某些手机不播放带有此tag的视频！

• 答案的第二部分摘自Dudley Storey 的帖子。

Answer 2

<video controls="controls" id="video1" width="450">
    <source src="A taste of TED.mp4" type="video/mp4" />
    <track src="TED.vtt" kind="subtitles" srclang="en" label="English" />
</video>