IMSC：网页字幕和隐藏字幕

IMSC（用于互联网媒体字幕和隐藏字幕的 TTML 配置文件）是一种用于表示字幕和隐藏字幕的文件格式。它使用 XML 来描述内容、时间、布局和样式。IMSC 在概念上与 HTML 和 CSS 非常相似——事实上，大多数 IMSC 样式在 CSS 中都有直接等效项。

概念和用法

IMSC 由 W3C 标准化，并被全球内容制作商（例如 20 世纪福克斯）、在线服务（例如 Netflix）和传统广播公司（例如英国广播公司）使用。许多平台和播放器都支持它，例如 iOS 设备和 dashJS 播放器。

IMSC 支持各种世界语言和脚本，以及丰富的样式。除了基于文本的字幕外，IMSC 还支持 PNG 字幕。

每个 IMSC 文档都是自包含的，并结合了内容、时间、布局和样式信息。文档的内容使用类似于 HTML 中使用的标签进行结构化，例如<body>、<div>、<p>、<span>和<br>。时间和样式使用属性表示，例如begin、end、color、tts:backgroundColor、tts:fontSize、tts:fontFamily——对于任何熟悉 CSS 的人来说，这些都是非常熟悉的概念。

IMSC、HTML 和 CSS 之间的区别

IMSC 在许多方面与 HTML 不同

IMSC 使用命名空间，因此tts:fontSize与fontSize不同，并且需要命名空间声明，例如<tt xmlns="http://www.w3.org/ns/ttml" xmlns:tts="http://www.w3.org/ns/ttml#styling" …>
IMSC 具有更严格的规则，例如<p>元素只能存在于<div>元素内，不能是<body>元素的直接子元素。

虽然属性名称和语法相似，但样式在几个方面与 CSS 不同

CSS 属性使用连字符，例如font-size，而 IMSC 使用驼峰式大小写，例如tts:fontSize。
IMSC 不使用外部样式表。

IMSC 和 WebVTT 之间的区别

IMSC 与WebVTT无关，WebVTT 是另一种为 Web 制作字幕和隐藏字幕的方法。

WebVTT 在某种程度上受到浏览器的原生支持，而 IMSC 则没有。

但是，有一个 IMSC polyfill，称为 imscJS，它用于呈现此文档中的所有示例。从开发人员的角度来看，imscJS 允许跨浏览器提供一致的体验。

IMSC 还支持样式，例如tts:linePadding和tts:fillLineGap，以及功能，例如对 HDR 和立体 3D 的支持，这些对于字幕和隐藏字幕很有用，但在 WebVTT 中不可用。

以下是一个使用tts:fillLineGap的示例

xml

<tt xmlns="http://www.w3.org/ns/ttml"
    xmlns:tts="http://www.w3.org/ns/ttml#styling"
    xmlns:itts="http://www.w3.org/ns/ttml/profile/imsc1#styling"
    xml:lang="en">
    <head>
      <styling>
       <style xml:id="defaultStyle"
              tts:fontSize="125%"
              tts:lineHeight="120%"/>
       <style xml:id="spanStyle"
              tts:backgroundColor="black"
              tts:color="white"/>
       <style xml:id="fillGap"
             itts:fillLineGap="true"/>
      </styling>
     <layout>
     <region xml:id="top"
             tts:origin="5% 5%"
             tts:extent="90% 40%"
             tts:textAlign="center"
             tts:displayAlign="before"/>
     <region xml:id="bottom"
            tts:origin="5% 55%"
            tts:extent="90% 40%"
            tts:textAlign="center"
            tts:displayAlign="after"/>
    </layout>
  </head>
 <body style="defaultStyle">
  <div>
    <p region="top">
      <span style="spanStyle">Without itts:fillLineGap<br/>
      Gaps between lines appear.</span>
    </p>
    <p region="bottom" style="fillGap">
      <span style="spanStyle">With itts:fillLineGap<br/>
      Gaps between lines are "filled".<br/></span>
    </p>
    </div>
 </body>
</tt>

…以及一个使用ebutts:linePadding的示例

最后但并非最不重要的是，IMSC 与 SMPTE-TT 和 EBU-TT-D 兼容，后者在美国和欧洲广泛使用。IMSC 也被积极用于电视和电影内容的创作。因此，实现 IMSC 支持无需转换为 WebVTT。

与使用标记的 IMSC 相比，WebVTT 使用 CSS 和纯文本的组合。

教程

IMSC 基础知识: 这将引导您了解开始使用 IMSC 所需的信息，包括基本文档结构以及如何设置字幕样式、时间和位置的基本知识。这些主题将在以后的教程中详细介绍。
使用 imscJS polyfill: 您目前需要一个 polyfill 来在 Web 上呈现 IMSC。imscJS 是一个不错的选择，因为它得到了积极维护并且几乎涵盖了 IMSC 的所有功能。本文介绍了如何使用 imscJS 以及如何在您自己的网站上集成它。
IMSC 文档样式: IMSC 提供了许多文档样式选项，并且大多数 IMSC 样式属性都有直接的 CSS 等效项，使它们对 Web 开发人员来说很熟悉。在本指南中，您将了解有关 IMSC 样式的更多信息，包括内联样式和参考样式之间的区别，以及使用继承和区域样式进行有效样式。
IMSC 中的字幕位置: IMSC 允许作者精确控制字幕的位置，以便文本位于说话者旁边或避免遮挡视频中的重要内容。了解如何定义字幕区域以及如何定义其宽度和高度。
IMSC 中的命名空间: 本文介绍了 XML 命名空间主题，为您提供了足够的信息来识别它们在 IMSC 中的用法，并能够有效地使用它。
IMSC 中的时间: 在构建 IMSC 文档时，每个定义的文本片段都必须包含时间信息以指定它应该何时显示。有多种方法可以描述字幕何时开始和停止显示，每种方法都有其优缺点。
将视频时间码映射到 IMSC: 将视频轨道或视频编辑器时间轴中看到的时间或时间码值映射到 IMSC 文档可能有点棘手。您需要注意一些不同的问题，我们将在本文中介绍。
IMSC 和其他标准: IMSC 是国际努力的结果，旨在将流行的TTML配置文件整合在一起，例如EBU-TT-D和SMPTE-TT。本文概述了 IMSC 与这些其他字幕标准的关系，并解释了 IMSC 版本之间的差异。

参考

用于互联网媒体字幕和隐藏字幕的 TTML 配置文件

工具

imscJS polyfill: IMSC 文档可以使用imscJS polyfill 在浏览器中呈现。
dash.js: 支持 IMSC 的 DASH 行业论坛参考播放器。

规范

用于互联网媒体字幕和隐藏字幕的 TTML 配置文件 1.2

浏览器兼容性

IMSC 目前在浏览器中没有原生支持，但可以通过imscJS polyfill 有效地渲染 Web 文档中的定时文本。

另请参阅

定时文本工作组: IMSC 标准由 W3C 定时文本组开发，如果您希望直接为该标准做出贡献，我们鼓励您加入该组。
IMSC 标准存储库: 在 IMSC GitHub 存储库中，您可以提供有关规范的反馈并提交问题
Web 视频文本轨道格式 (WebVTT): WebVTT 是在 Web 上实现隐藏字幕和字幕的另一种机制，它在浏览器中具有一些原生支持以及一些有用的功能。

文档项目团队

团队

Dave Kneeland
Pierre-Anthony Lemieux
Andreas Tai

如果您想参与 IMSC 文档编制，请联系Andreas Tai。