HTML5视频字幕与WebVTT
最后更新于：2022-04-01 19:43:11
译自：[http://html5doctor.com/video-subtitling-and-webvtt/](http://html5doctor.com/video-subtitling-and-webvtt/)
转载请标明出处：蒋宇捷的博客([http://blog.csdn.net/hfahe](http://blog.csdn.net/hfahe))
--------
我们在几年前就已经可以不需要插件在浏览器里播放视频了。但是在编码解码器方面，仍然存在一些困扰。现在问题已经集中在视频本身上面了：下一步将是添加资源到视频里，使其更容易访问并且为观众提供更多选择。
我们目前还没有说到下面的内容，这代表视频还不是非常便利，用户还不能非常轻松的定位到某一个特定的段落。值得庆幸的是，有一个名为[WebVTT（网络视频文本轨道）](http://www.whatwg.org/specs/web-apps/current-work/webvtt.html)的新格式标准正在筹划中。截止目前，它还只是在WHATWG的规范中，但是最近成立的[W3C网络媒体文本轨道社区组](http://www.w3.org/community/texttracks/)将会很快在W3C中引入WebVTT规范。
*“你可能还记得一个类似的名为WebSRT的格式，最近正在讨论中。WebSRT已经被改名并被WebVTT所替代。”*
一个WebVTT（.vtt）文件是一个简单的纯文本，里面包含了几种类型的视频信息：
**字幕**
关于对话的转译或者翻译。
**标题**
类似于标题，但是还包括音响效果和其他音频信息。
**说明**
预期为一个单独的文本文件，通过屏幕阅读器描述视频。
**章节**
旨在帮助用户浏览整个视频。
**元数据**
默认不打算展示给观众的、和视频有关的信息和内容。但是你可以使用Javascript来访问。
本文主要讨论[字幕和标题](http://html5doctor.com/video-subtitling-and-webvtt/#contents)，但是也会简单的提及[章节](http://html5doctor.com/video-subtitling-and-webvtt/#chapters)。
*“超出本文的范围但是值得提到的是[文本轨道API](http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html#text-track-api)，除其他内容外，表示共有多少文本轨道以及已经载入和准备使用多少轨道。如果你已经使用了这个API，[请告诉我们](http://html5doctor.com/ask-the-doctor/)。”*
**如何制作并链接到一个WebVTT文件**
制作一个WebVTT文件所需的只是一个简单的文本编辑器。在文件的第一行输入WEBVTT并且将其保存为一个.vtt格式的文件。未来我们预计现有的字幕工具如[Universal Subtitles](http://www.universalsubtitles.org/)可以导出WebVTT格式。
------------------------------------------------------------------------------------------------------------------------------------------
WEBVTT
这是一个最简单有效的WebVTT文件
------------------------------------------------------------------------------------------------------------------------------------------
这就是所有你需要开始的。下一步，我们要在HTML文档中链接到这个文件。我们通过video元素的子元素[
';