html5-video - 如何在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
srt:

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

VT:

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 to .7 很容易)。

(可选)向字幕文本添加样式标记。

使用 .vtt 扩展名保存文件，并从 HTML5 页面中的元素链接到该文件。

也有可能你的网页浏览器不支持视频标签，例如我知道有些手机不播放带有这个标签的视频!

答案的第二部分取自 a post达德利·斯托里。