IMSC：网络字幕和隐藏字幕 - Web 相关技术

概念与用法

IMSC 由 W3C 标准化，并被全球的内容生产者（例如 20 世纪福克斯）、在线服务（例如 Netflix）和传统广播公司（例如 BBC）使用。许多平台和播放器都支持它，例如 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 是用于网络的另一种字幕和隐藏字幕实现方式。

浏览器对 WebVTT 在一定程度上支持原生支持，而 IMSC 则不支持。

但是，有一个名为 imscJS 的 IMSC polyfill（一种兼容性解决方案），用于渲染本文档中的所有示例。从开发者的角度来看，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: 目前您需要在 Web 上渲染 IMSC 时使用 polyfill。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: DASH Industry Forum 的参考播放器，支持 IMSC。

规范

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。

帮助改进 MDN

了解如何贡献

此页面最后修改于 2025 年 7 月 15 日，由 MDN 贡献者进行修改。

在 GitHub 上查看此页面 • 报告此内容的某个问题