如何为HTML5 Video载入WebVTT字幕
今天无意看到了一篇关于在H5 video插入字幕的文章,简单做个总结。
前言
网页中使用H5 video播放视频文件,一般而言不外乎是:
字幕嵌在影片里字幕档另外挂上
第 1 种方法很单纯,字幕就是影片的一部份,所以只要能把影片播起来,字幕也会出现,只是这样的方式,如果影片输出后发现有一段字幕打错了,那影片就要重新再输出,又或者想要放上多语系的字幕,N 种语言就要输出 N 部影片,实在相当而且耗费储存空间(有些影片格式可以嵌入多个字幕轨,再由6186.html”>播放器选择使用哪个字幕)。而第 2 种方法也很常见,同一部影片就可以配上不同的字幕档案来播放,就算字幕错了也只需要修改字幕档的内容就可以了。
而在 web 技术上,使用 HTML5 的 来播放影片,也可以使用另外挂上字幕文件的方式来显示字幕,这个功能在目前桌上的主流浏览器都已经支持(参考 Can I Use),主要是支持 WebVTT 及 TTML 两种字幕档格式,而WebVTT,它格式简单、可以用简单的 HTML tag 作格式、与流行的 SubRip (.srt) 档案类似、多数浏览器实作还有多个影音平台(包括 YouTube)支持。
WebVTT 字幕档格式
WebVTT 文件(文字编码使用 UTF-8,文件名为 *.vtt 檔,MIME type 为 text/vtt)的格式很简单,它大概会像是这样:WEBVTT100:00:07.240 –> 00:00:11.130大家好 最近 Visual Studio 2013 做了一些更新
200:00:11.140 –> 00:00:18.110那我们今天请到 twMVC 的 Dino来为我们介绍这个更新里面关于 SASS Editor 的部分
300:00:18.120 –> 00:00:19.280那我们现在交给 Dino
….
这个档案的第一行以 WEBVTT 开头,然后接下来都是用空行来区隔每一段字幕,每一段字幕,在字幕的术语里是称作「Cue」由三个部份组成:
1.Cue identifier
也就是上面例子的 1, 2, 3, ….,作为参考用的部份。它可以是任何单行文字,像是「1 – 开始」这个部份可有可无。
2.Cue timing
字幕出现的时间,时间格式可以是 hh:mm:ss.ttt 或是 mm:ss.ttt,而时间的起始就是以「 –> 」来表示,注意这个箭头的前后都要有空白。
3.Subtitles: 字幕文字
这部份就是字幕的文字内容了,它可以是多行文字,不过只要一有空行就会被视为这部份字幕结束。而字幕可以使用一些简单的 HTML tag 来做格式,详细说明请看参考文件。
字幕檔的使用
有了 WebVTT 档之后,如果要为影片加上字幕,就照着这样的方式加在 标签之中:
所以很清楚地看到,只要使用 标签就可以加上字幕文件,而可以使用 srclang 以及 label 属性来设定字幕的语系,以及字幕在播放器中显示的名称。
大家最常使用的 YouTube,也可以在上传影片后,加上字幕文件的功能上传同样的 webvtt 档案来加入字幕喔!
影片上传后,按下下方的 CC 功能加入字幕
直接加入 vtt 档案即可
字幕的样式控制
CSS中有专门的伪元素::cue可以控制字幕的样式。
可以控制的CSS属性包括:
coloropacityvisibilitytext-decoration及相关属性text-shadowbackground及相关属性outline及相关属性font及相关属性,包括line-heightwhite-spacetext-combine-uprightruby-position
例如: ::cue { background: none; color: #fff; text-shadow: 0 1px #000, 1px 0 #000, -1px 0 #000, 0 -1px #000; font-size: medium;}
【前端交流Q群:659522518】