HTML5视频字幕与WebVTT.docVIP

HTML5视频字幕与WebVTT 分类： 前端 2011-12-04 23:12 1750人阅读 评论(4) 收藏 举报 ? ? ? ? 译自：/video-subtitling-and-webvtt/ ? ? ? ??转载请标明出处：蒋宇捷的博客(/hfahe) ? ? ? ? -------- ? ? ? ? 我们在几年前就已经可以不需要插件在浏览器里播放视频了。但是在编码解码器方面，仍然存在一些困扰。现在问题已经集中在视频本身上面了：下一步将是添加资源到视频里，使其更容易访问并且为观众提供更多选择。 ? ? ? ? 我们目前还没有说到下面的内容，这代表视频还不是非常便利，用户还不能非常轻松的定位到某一个特定的段落。值得庆幸的是，有一个名为WebVTT（网络视频文本轨道）的新格式标准正在筹划中。截止目前，它还只是在WHATWG的规范中，但是最近成立的W3C网络媒体文本轨道社区组将会很快在W3C中引入WebVTT规范。 “你可能还记得一个类似的名为WebSRT的格式，最近正在讨论中。WebSRT已经被改名并被WebVTT所替代。” ? ? ? ? 一个WebVTT（.vtt）文件是一个简单的纯文本，里面包含了几种类型的视频信息： ? ? ? ??字幕 ? ? ? ??关于对话的转译或者翻译。 ? ? ? ??标题 ? ? ? ??类似于标题，但是还包括音响效果和其他音频信息。 ? ? ? ??说明 ? ? ? ??预期为一个单独的文本文件，通过屏幕阅读器描述视频。 ? ? ? ??章节 ? ? ? ??旨在帮助用户浏览整个视频。 ? ? ? ??元数据 ? ? ? ??默认不打算展示给观众的、和视频有关的信息和内容。但是你可以使用Javascript来访问。 ? ? ? ? 本文主要讨论字幕和标题，但是也会简单的提及章节。 ?“超出本文的范围但是值得提到的是文本轨道API，除其他内容外，表示共有多少文本轨道以及已经载入和准备使用多少轨道。如果你已经使用了这个API，请告诉我们。” 如何制作并链接到一个WebVTT文件 ? ? ? ??制作一个WebVTT文件所需的只是一个简单的文本编辑器。在文件的第一行输入WEBVTT并且将其保存为一个.vtt格式的文件。未来我们预计现有的字幕工具如Universal Subtitles可以导出WebVTT格式。------------------------------------------------------------------------------------------------------------------------------------------WEBVTT 这是一个最简单有效的WebVTT文件 ------------------------------------------------------------------------------------------------------------------------------------------? ? ? ??这就是所有你需要开始的。下一步，我们要在HTML文档中链接到这个文件。我们通过video元素的子元素track来实现这一点。track元素包括一些可选的属性：? 源WebVTT文件（src）? 轨道的语言（srclang）? 用户可读的标签（label）以及? 是什么类型（kind）的轨道。类型属性的值来自于上面的列表（例如subtitles、captions等）。? ? ? ??在下面的例子里，我们使用一个track字幕元素。 view plaincopy to clipboardprint? video?width=640?height=480?controls?? ??source?src=video.mp4?type=video/mp4?/?? ??source?src=video.webm?type=video/webm?/?? ??track?src=subtitles.vtt?kind=subtitles?srclang=en?label=English?/?? ??!--?用于垃圾浏览器的降级?--?? /video?? ? ? ? ??关于属性的一些说明：? 如果没有指定类型，默认为字幕（subtitles）。? 如果类型是字幕（subtitles），需要指定srclang。? 不能有两个相同类型（king）的轨道有同一个标签（label）。 ? ? ? ??在上面的例子中，我们为一个video元素使用了两个不同的src元素（为了美妙的跨浏览器）。紧跟视频源后的是track元素，你可以有多个track元素来设置不同语言的字幕、标题和