译自:
转载请标明出处:蒋宇捷的博客()
--------
我们在几年前就已经可以不需要插件在浏览器里播放视频了。但是在编码解码器方面,仍然存在一些困扰。现在问题已经集中在视频本身上面了:下一步将是添加资源到视频里,使其更容易访问并且为观众提供更多选择。
我们目前还没有说到下面的内容,这代表视频还不是非常便利,用户还不能非常轻松的定位到某一个特定的段落。值得庆幸的是,有一个名为的新格式标准正在筹划中。截止目前,它还只是在WHATWG的规范中,但是最近成立的将会很快在W3C中引入WebVTT规范。
一个WebVTT(.vtt)文件是一个简单的纯文本,里面包含了几种类型的视频信息:
字幕关于对话的转译或者翻译。
标题
类似于标题,但是还包括音响效果和其他音频信息。
说明
预期为一个单独的文本文件,通过屏幕阅读器描述视频。
章节
旨在帮助用户浏览整个视频。
元数据默认不打算展示给观众的、和视频有关的信息和内容。但是你可以使用Javascript来访问。
本文主要讨论,但是也会简单的提及。
如何制作并链接到一个WebVTT文件
制作一个WebVTT文件所需的只是一个简单的文本编辑器。在文件的第一行输入WEBVTT并且将其保存为一个.vtt格式的文件。未来我们预计现有的字幕工具如 可以导出WebVTT格式。 ------------------------------------------------------------------------------------------------------------------------------------------ WEBVTT在上面的例子中,我们为一个<video>元素使用了两个不同的<src>元素(为了美妙的跨浏览器)。紧跟视频源后的是<track>元素,你可以有多个<track>元素来设置不同语言的字幕、标题和说明。
WebVTT内容
现在我们知道如何创建一个WebVTT文件,以及如何在HTML文档中引用它。但它里面有什么内容?在该文件中,我们列出什么是“索引”。WebVTT文件可能只有一个索引,但它也可以包含任何你想要的个数。每个索引从一个ID开始,紧跟的是时间的设置,然后是文字。每个索引由一个空行分隔。这里有一个标题的示例: ------------------------------------------------------------------------------------------------------------------------------------------ WEBVTT 1 00:00:01.000 --> 00:00:10.000 这是文本的第一行,从第1秒显示到第10秒。 2 00:00:15.000 --> 00:00:20.000 这是文本的第二行 被分割为两行------------------------------------------------------------------------------------------------------------------------------------------
样式选项
前面的例子中指定了字幕和标题所需的最低配置,但你也可以为标题设置样式。让我们从索引的设置开始,可以写在时间设置的同一行:
D:vertical / D:vertical-lr
垂直的显示文本而不是水平的。 它也指定文本是增长到左边( vertical)还是右侧( vertical-lr )。
L:X / L:X%
一个数字或百分比。 如果是一个百分点,那么它指从框架顶部开始的位置。如果是一个数字,它表示会是在多少行。
T:X%
视频上的水平文字位置。T:100% 表示文本会放在视频的右侧。
A:start / A:middle / A:end
文本在盒子内的对齐方式。start是左对齐, middle是居中对齐, end是右对齐。
S:X%文本盒子的宽度,表示为视频宽度的百分比。
要使用这些设置,像下面这样把它们放在时间设置的旁边:
00:00:01.000 --> 00:00:10.000 A:middle T:50%
00:00:01.000 --> 00:00:10.000 A:end D:vertical00:00:01.000 --> 00:00:10.000 A:start T:100% L:0%
这会表现为以下的效果: ------------------------------------------------------------------------------------------------------------------------------------------除了上面的索引设置,你还可以为文本使用内联样式:
粗体文本
<b>Lorem ipsum</b>
斜体文本
<i>dolor sit amet</i>
带下划线的文本
<u>consectetuer adipiscing</u>
Ruby文本(译者注:见我的《 》一文)<ruby>見<rt>み</rt></ruby>
你甚至可以使用 <c.myClass></c>来为一段文字应用CSS样式,给我们更多的样式选择。 最后,您可以添加一个声明,代表声音命名的 <v Tom></v>。本声明完成了三件事情: 1. 标题将在标题文本外展示语音(男声)。 2. 语音的名字可以被一个屏幕阅读器读取,为男性或女性使用不同的声音事件。 3. 它为样式提供了一个勾子,例如,所有男声的标题可以显示为蓝色的。 章节 你可以和提供字幕、标题同样的方式提供一个视频章节的列表。开始同样的使用WEBVTT声明,然后是每个索引、声明的的章节编号,启动和停止时间、章节标题: ------------------------------------------------------------------------------------------------------------------------------------------ < track src=" chapters.vtt" kind=" chapters" srclang=" en" />浏览器支持
关于WebVTT一个小问题:目前没有一个单独的浏览器支持它。 所有主流浏览器实现它的工作已经开始,所以我们应该很快的可以看到一些成果。值得庆幸的是,在此期间,有几个JavaScript polyfills(译者注:术语polyfill来源于一种填补裂缝的黏土的英国品牌 Polyfilla-即美国人熟知的填泥料。这里polyfill用来填补浏览器功能上的漏洞,模拟HTML5相关功能和技术)可用: • • • • 播放器(以及即将到来的 ) •演示
我们发布了一个使用 polyfill的 。我们最开始使用 ,但它不像 那样支持许多特性,例如文本多行分隔和CSS样式。 在演示中,字幕在2秒到15秒间使用了粗体、下划线以及自定义样式。 这里是相关联的 。结论
本文介绍了为视频创建合适的WebVTT文件来添加字幕或者标题的基础知识。我们知道如何添加索引和章节,以及如何添加样式和修改视频上文本出现的方式。 虽然还没有浏览器正式支持它,但是未来会有很多为可访问的视频而支持,所以敬请 。最后,让我们感谢抽出时间来回答有关WebVTT的一些问题,以及她在这一领域的大量工作。
阅读
• 关注 • • • • • • • • • •