TTML—让 W3C 获得艾美奖的字幕规范

编者按：本文作者奇舞团前端开发工程师李喆明。

说到视频字幕格式，一般大家都会想到 .srt, .ass 之类大家比较常用的格式。而现在说到 Web 字幕格式，大家第一反应肯定都是 WebVTT。我们知道在或者 标签中要加载字幕的话，需要使用 标签将字幕文件嵌入进来。而在 track 的文档中我们会发现其实还有一种 Web 字幕格式，那就是本文的主角 TTML。

The tracks are formatted in WebVTT format (.vtt files) — Web Video Text Tracks or Timed Text Markup Language (TTML).

via: : The Embed Text Track element

TTML 简介

虽然这个字幕格式标准 2010 年就已经成为正式标准了，但是知道的人其实并不多。TTML 全称是 Timed Text Markup Language，是一种基于 XML 的时序文本标记语言。它旨在用于全球范围内的跨字幕和字幕传递应用程序，从而简化互操作性并保持与其他字幕文件格式的一致性和兼容性。

TTML 提供了一种基于时间的配置文件，用来描述与数字媒体相关的文本、图形、图像等内容的出现、位置、样式以及动效等相关配置。因其基于文本字幕标准的工作让更多数字媒体内容提高了无障碍访问能力，于2016年1月8日，荣获由美国国家电视艺术与科学学院颁发的技术与工程艾美奖。

TTML 兼容性

TTML 目前主要是大部分的广播和电视公司、电影制作公司以及电视流媒体平台等公司在使用，例如大家知道的 BBC、Netflix、HBO甚至还有好莱坞。客户端方面的话 VLC Player 开源播放器已经支持这种格式的字幕文件了。而在 Web 上虽然早已有了 W3C 规范，但是似乎浏览器厂商并不是非常买账，目前仅有 IE10+ 支持该格式，且 IE 上支持的仅仅只是 TTML 规范的一个子集，按照文档(https://docs.microsoft.com/en-us/openspecs/ie_standards/ms-ttml/16bc3854-9a56-48b1-97e5-ae5d41de67d5)描述，包括 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.

via: 《IMSC basics》

虽然 Web 上的兼容性这么惨淡，不过好在有对应的 Polyfill(https://github.com/sandflow/imscJS) 实现可以兼容。使用起来比较简单，调用几个官方 API 方法即可。解析 ttml 字幕内容后调用 getMediaTimeEvents() 方法获得一个包含所有的字幕片段以及每个动画的起始时间的数组，根据对应的起始时间调用 generateISD() 方法获取到对应时间片段的字幕片段数据，最后转换成 DOM 使用 renderHTML() 方法进行渲染即可。

const ttmlObject = imsc.fromXML(ttmlXmlString);

const times = ttmlObject.getMediaTimeEvents();

const snapshot = imsc.generateISD(ttmlObject, times[1]);

imsc.renderHTML(snapshot, document.getElementById('videoContainer'));

Polyfill 的详细文档可以查看 MDN(https://developer.mozilla.org/en-US/docs/Related/IMSC/Using_the_imscJS_polyfill)，同时官方提供了一个 demo(https://mdn.github.io/imsc/imscjs-demo/imscjs-demo.html) 方便大家快速了解。

TTML

标准的 .ttml 文件的基本格式应该如下，整体结构和 HTML 非常类似，有 和 两个标签构成主体内容。 如其名为主体内容标签，而 可以放置如下标签：

• ：用于放置字幕文件的 meta 信息的容器标签

• ：用于放置预定义的