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

【问题标题】：How to add subtitles to a video in html?如何在html中为视频添加字幕？
【发布时间】：2014-01-29 21:20:03
【问题描述】：

我尝试使用 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

【问题讨论】：

不是 100% 确定，但这可能会对您有所帮助。 storiesinflight.com/js_videosub

标签： html5-video subtitle

【解决方案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：小时标记。
将每个时间戳中毫秒标记之前的逗号转换为小数点（使用查找替换很容易：例如，,7 到 .7）。
（可选）向字幕文本添加样式标记。
使用 .vtt 扩展名保存文件并从 HTML5 页面中的元素链接到该文件。

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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>

【讨论】：

【解决方案4】：

<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>

【讨论】：

你不能只是复制粘贴代码-1。