现在各种支持HTML5的浏览器都能够播放html5视频了,但是对于字幕的支持却很少,我们期待像DVD那样强大的字幕。
往往我们还不得不通过js来做,着实是一件痛苦的事情。
现在IE10率先对HTML5 Video 字幕给与内置的支持,而且还支持多语言,可任意切换,真是太给力了。
示例代码如下:
通过两个
WebVTT是UTF-8编码格式的文本文件,内容示例如下:
第一行必需是WEBVTT,接着空行,接下来是一行时间范围+一行或多行字幕内容+空行,一行时间范围+一行或多行字幕内容+空行,……
时间格式是HH:MM:SS.sss,时:分:秒.毫秒, 开始时间 --> 结束时间,-->的两边各有一个空格,这两个时间必需写在同一行。
时间都是相对于视频开始的时间间隔。
时间之后是字幕文本,时间和字幕文本之间不能有空行,字幕文本可以是一行或多行,字幕文本中不能有空行。WebVTT字幕文件的MIME类型约定是"text/vtt",需要在IIS或者Apache等Web服务器中配置.
TTML是xml格式的文件,内容示例如下:
结构很明确了,分别是tt标签,body标签,div标签,p标签,br标签,和HTML很像啊!p元素的begin/end属性指定了字幕的起止时间。
TTML文件的MIME类型约定为application/ttml+xml
通过在video标签内使用1个或多个track标签来指定1个或多个语言的字幕文件,每个track元素对应一个字幕文件。
track标签的属性主要有4个,如下表:
属性
描述
kind
定义字幕内容类型,只能是这五种之一: subtitles, captions, descriptions, chapters, metadata.
src
字幕文件的URL地址
srclang
字幕文件的语言类型,标识信息的作用,播放器不使用这个属性。
label
字幕标签,每个字幕元素必需设置一个唯一不重复的标签,切换字幕时显示的名称。
default
指定是否是默认字幕。如果每个都不指定,将不会自动显示字幕.
可以通过javascript方式访问每一个字幕元素,甚至其中的每一句台词。这一部分代码比较多,我就不展开了,有兴趣的可以自己看原文。
参考链接: http://msdn.microsoft.com/en-us/library/ie/hh673566(v=vs.85).aspx
手机扫一扫
移动阅读更方便
你可能感兴趣的文章