首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

给HTML5 Video 设立多语言字幕文件

2012-08-15 
给HTML5 Video 设置多语言字幕文件现在各种支持HTML5的浏览器都能够播放html5视频了,但是对于字幕的支持却

给HTML5 Video 设置多语言字幕文件

现在各种支持HTML5的浏览器都能够播放html5视频了,但是对于字幕的支持却很少,我们期待像DVD那样强大的字幕。

往往我们还不得不通过js来做,着实是一件痛苦的事情。

现在IE10率先对HTML5 Video 字幕给与内置的支持,而且还支持多语言,可任意切换,真是太给力了。

示例代码如下:

<?xml version='1.0' encoding='UTF-8'?><tt xmlns='http://www.w3.org/ns/ttml' xml:lang='en' ><body><div><p begin="00:00:01.878" end="00:00:05.334" >曾经有一份真诚的爱情放在我面前,</p><p begin="00:00:08.608" end="00:00:15.296" >我没有珍惜,等我失去的时候我才后悔莫及,<br/>人世间最痛苦的事莫过于此。</p></div></body></tt>
结构很明确了,分别是tt标签,body标签,div标签,p标签,br标签,和HTML很像啊!p元素的begin/end属性指定了字幕的起止时间。
TTML文件的MIME类型约定为application/ttml+xml

通过在video标签内使用1个或多个track标签来指定1个或多个语言的字幕文件,每个track元素对应一个字幕文件。

track标签的属性主要有4个,如下表:

属性描述

kind

定义字幕内容类型,只能是这五种之一: subtitlescaptionsdescriptionschaptersmetadata.

src

字幕文件的URL地址

srclang

字幕文件的语言类型,标识信息的作用,播放器不使用这个属性。

label

字幕标签,每个字幕元素必需设置一个唯一不重复的标签,切换字幕时显示的名称。

default

指定是否是默认字幕。如果每个都不指定,将不会自动显示字幕.

 可以通过javascript方式访问每一个字幕元素,甚至其中的每一句台词。这一部分代码比较多,我就不展开了,有兴趣的可以自己看原文。

参考链接: http://msdn.microsoft.com/en-us/library/ie/hh673566(v=vs.85).aspx

--

热点排行