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.

VTT：

WEBVTT

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

您需要做的是：

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

此外，您的网络广告可能不支持视频标记，例如我知道某些手机不播放带有此标记的视频！

答案的第二部分取自Dudley Storey的a post。

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>

Answer 3

当我将站点托管在IIS中时，我也遇到了同样的问题。问题是，我没有在网站支持的MIME类型下添加vtt文件的MIME类型。只需单击站点，然后在支持的MIME类型下添加MIME类型为text / vtt的.vtt扩展名。它对我有用。

如果未添加此字符，则在搜索字幕文件时将在错误控制台中记录404 not found错误。

Answer 4

Adding captions and subtitles to HTML5 video

<video id="video" controls preload="metadata">
           <source src="video/sintel-short.mp4" type="video/mp4">
           <source src="video/sintel-short.webm" type="video/webm">
           <track label="English" kind="subtitles" srclang="en" src="captions/vtt/sintel-en.vtt" default>
           <track label="Deutsch" kind="subtitles" srclang="de" src="captions/vtt/sintel-de.vtt">
           <track label="Español" kind="subtitles" srclang="es" src="captions/vtt/sintel-es.vtt">
        </video>

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

4 个答案: