HTML5视频字幕与WebVTT

HTML5 视频字幕与视频字幕与 WebVTT 分类 前端 2011 12 04 23 12 1750 人阅读 评论 4 收藏 举报 译自 转载请标明出处 蒋宇捷的博客 我们在几年前就已经可以不需要插件在浏览器里播放视频了 但是在编码解码器方面 仍然存在一些困扰 现在问题已经集中在视频本身上面了 下一步将是添加资源到视频里 使其更容易访问并且为观众提供更多选择 我们目前还没有说到下面的内容 这代表视频还不是非常便利 用户还不能非常轻松 的定位到某一个特定的段落 值得庆幸的是 有一个名为 WebVTT 网络视频文本轨道 的新格式标准正在筹划中 截止目前 它还只是在 WHATWG 的规范中 但是最近成立的 W3C 网络媒体文本轨道社区组将会很快在 W3C 中引入 WebVTT 规范 你可能还记得一个类似的名为WebSRT的格式 最近正在讨论中 WebSRT已经被改名 并被WebVTT所替代 一个 WebVTT vtt 文件是一个简单的纯文本 里面包含了几种类型的视频信息 字幕字幕 关于对话的转译或者翻译 标题标题 类似于标题 但是还包括音响效果和其他音频信息 说明说明 预期为一个单独的文本文件 通过屏幕阅读器描述视频 章节章节 旨在帮助用户浏览整个视频 元数据元数据 默认不打算展示给观众的 和视频有关的信息和内容 但是你可以使用 Javascript 来 访问 本文主要讨论字幕和标题 但是也会简单的提及章节 超出本文的范围但是值得提到的是文本轨道API 除其他内容外 表示共有多少文本轨道 以及已经载入和准备使用多少轨道 如果你已经使用了这个API 请告诉我们 如何制作并链接到一个如何制作并链接到一个 WebVTT 文件文件 制作一个 WebVTT 文件所需的只是一个简单的文本编辑器 在文件的第一行输入 WEBVTT 并且将其保存为一个 vtt 格式的文件 未来我们预计现有的字幕工具如 Universal Subtitles 可以导出 WebVTT 格式 WEBVTT 这是一个最简单有效的 WebVTT 文件 这就是所有你需要开始的 下一步 我们要在 HTML 文档中链接到这个文件 我们通 过 video 元素的子元素来实现这一点 元素包括一些可选的属性 源 WebVTT 文件 src 轨道的语言 srclang 用户可读的标签 label 以及 是什么类型 kind 的轨道 类型属性的值来自于上面的列表 例如 subtitles captions 等 在下面的例子里 我们使用一个字幕元素 view plaincopy to clipboardprint 1 2 3 4 5 6 关于属性的一些说明 如果没有指定类型 默认为字幕 subtitles 如果类型是字幕 subtitles 需要指定 srclang 不能有两个相同类型 king 的轨道有同一个标签 label 在上面的例子中 我们为一个元素使用了两个不同的元素 为了美妙的 跨浏览器 紧跟视频源后的是元素 你可以有多个元素来设置不同语言 的字幕 标题和说明 并没有预设成一种特定的文件格式 微软支持TTML格式 但是这种格式不会被 其他浏览器厂商所支持 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 这是文本的第二行 被分割为两行 WebVTT 示例内容 上面的例子有两个索引 时间必须写成 hh mm ss mmm 格式 所以在这个例子中 时间发生在 20 秒内 第二个索引会自动的被分成两行文字 如果你有一段文本 需要以卡拉 OK 彩绘标题的样式显示 那么你可以将计时器与文 本内联 1 00 00 01 000 00 00 10 000 Never gonna give you up Never gonna let you down Never gonna run around and desert you 卡拉 OK 风格的标题 译者注 以上歌词来自于歌曲 never gonna give you up 样式选项样式选项 前面的例子中指定了字幕和标题所需的最低配置 但你也可以为标题设置样式 让我 们从索引的设置开始 可以写在时间设置的同一行 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 vertical 00 00 01 000 00 00 10 000 A start T 100 L 0 这会表现为以下的效果 字幕显示和对齐的例子 除了上面的索引设置 你还可以为文本使用内联样式 粗体文本粗体文本 Lorem ipsum 斜体文本斜体文本 dolor sit amet 带下划线的文本带下划线的文本 consectetuer adipiscing Ruby 文本文本 译者注 见我的 谈 HTML5 和 CSS3 的国际化支持 一文 見 你甚至可以使用来为一段文字应用 CSS 样式 给我们更多的样式选 择 最后 您可以添加一个声明 代表声音命名的 本声明完成了三件事情 1 标题将在标题文本外展示语音 男声 2 语音的名字可以被一个屏幕阅读器读取 为男性或女性使用不同的声音事件 3 它为样式提供了一个勾子 例如 所有男声的标题可以显示为蓝色的 章节章节 你可以和提供字幕 标题同样的方式提供一个视频章节的列表 开始同样的使用 WEBVTT 声明 然后是每个索引 声明的的章节编号 启动和停止时间 章节标题 HTML元素为视频提供章节设置 WEBVTT Chapter 1 00 00 01 000 00 00 10 000 Introductionto HTML5 WebVTT 文件包含视频章节标记 浏览器支持浏览器支持 关于 WebVTT 一个小问题 目前没有一个单独的浏览器支持它 所有主流浏览器实 现它的工作已经开始 所以我们应该很快的可以看到一些成果 值得庆幸的是 在此期间 有几个 JavaScript polyfills 译者注 术语 polyfill 来源于一种填补裂缝的黏土的英国品牌 Polyfilla 即美国人熟知的填泥料 这里 polyfill 用来填补浏览器功能上的漏洞 模拟 HTML5 相关功能和技术 可用 js videosub Playr MediaElementJS LeanBack 播放器 以及即将到来的新版本 Captionator 演示演示 我们发布了一个使用 Playr polyfill 的快速演示 我们最开始使用 MediaElementJS 但它不像 Playr 那样支持许多特性 例如文本多行分隔和 CSS 样式 在演示中 字幕在 2 秒到 15 秒间使用了粗体 下划线以及自定义样式 这里是相关联的 WebVTT 文件 结论结论 本文介绍了为视频创建合适的 We