TTML 兼容性
TTML 目前主要是大部分的广播和电视公司、电影制作公司以及电视流媒体平台等公司在使用,例如大家知道的 BBC、Netflix、HBO甚至还有好莱坞。客户端方面的话 VLC Player 开源播放器已经支持这种格式的字幕文件了。而在 Web 上虽然早已有了 W3C 规范,但是似乎浏览器厂商并不是非常买账,目前仅有 IE10+ 支持该格式,且IE 上支持的仅仅只是 TTML 规范的一个子集,按照文档描述,包括 Animation 在内的一些特性都不太支持,更不用提之后 TTML2 中新增的一些特性了。
Note: IMSC does not have native support in browsers at this current moment, but the imscJS polyfill can be used to bridge this gap. All the examples below are rendered by using imscJS. It creates dynamically HTML and CSS from an IMSC XML document.
虽然 Web 上的兼容性这么惨淡,不过好在有对应的Polyfill 实现可以兼容。使用起来比较简单,调用几个官方 API 方法即可。解析 ttml 字幕内容后调用getMediaTimeEvents()方法获得一个包含所有的字幕片段以及每个动画的起始时间的数组,根据对应的起始时间调用generateISD()方法获取到对应时间片段的字幕片段数据,最后转换成 DOM 使用renderHTML()方法进行渲染即可。
constttmlObject=imsc.fromXML(ttmlXmlString);consttimes=ttmlObject.getMediaTimeEvents();constsnapshot=imsc.generateISD(ttmlObject,times[1]);imsc.renderHTML(snapshot,document.getElementById('videoContainer'));
Polyfill 的详细文档可以查看MDN,同时官方提供了一个 demo 方便大家快速了解。
TTML