IMSC 基础知识

IMSC 允许您为在线视频添加字幕或隐藏式字幕。本文将引导您了解入门所需知识，包括基本文档结构，以及如何设置字幕的样式、时间轴和位置。

注意： IMSC 可用于您可能想在网页文档中包含的任何类型的带时间文本，而不仅仅是字幕和隐藏式字幕。但由于字幕和隐藏式字幕是 IMSC 最常见的用例，因此我们将重点关注它们。为便于阅读，我们只使用“字幕”一词。在我们将要描述的技术上下文中，“字幕”一词与“隐藏式字幕”可互换使用。

那么，IMSC 是什么？

IMSC 是一种标记语言，可用于定义带时间文本，以便为数字媒体添加字幕。它在 XML 文档中定义您的字幕内容结构。它由一系列元素组成，您可以使用这些元素来包含或包裹字幕内容的各个部分，使其以特定方式显示或在特定时间显示。其中许多功能与 HTML 功能相似或相同。

如果您还不熟悉 XML 或 HTML，请先阅读相关内容，然后再回来。

注意： 如果您想了解 IMSC 在实际场景中的应用，请查看本教程结尾处的扩展示例。

最小 IMSC 文档

IMSC 始终指定为完整的 XML 文档。作为文件，它应具有“ttml”扩展名。

注意： 目前浏览器对 IMSC 没有原生支持，但可以使用 imscJS polyfill 来弥补这一差距。下面的所有示例均通过使用 imscJS 渲染。它从 IMSC XML 文档动态创建 HTML 和 CSS。

让我们来看一个最小的 IMSC 文档以及它的渲染方式。

最重要的特性如下：

<tt></tt> — 您始终以根元素 <tt> 开始一个 IMSC 文档。您还应使用 xmlns 属性指定文档的默认命名空间。现在不用担心命名空间。我们将在单独的指南中介绍。
xml:lang — 您必须使用 xml:lang 属性指定内容的语言。请注意，与 HTML 不同，lang 属性必须带有 xml: 前缀。在 IMSC 中，<tt lang="en"> 是不正确的——您必须始终写成 <tt xml:lang="en">。
<body></body> — 与 HTML 一样，<body> 元素包含您要显示的所有内容。对于 IMSC，这通常是您希望在视频播放期间在特定时间间隔显示的字幕内容。
<div></div> — <div> 元素用作字幕内容的容器；您至少需要有一个。包含实际字幕内容的 <p> 元素始终有一个 <div> 元素作为其父级。
<p></p> — 字幕的文本内容必须始终包含在 <p> 元素中。该元素描述了一个文本段落，与 HTML 类似。主要区别在于它可以是带时间的。

时序

上一个示例中的最小 IMSC 文档没有时间轴。这意味着字幕内容将在视频的整个持续时间内显示。通常您不希望这样。相反，您希望字幕在特定时间出现然后消失。您可以使用 begin、end 和 dur 等时间属性的组合来实现此目的。

考虑以下可编辑示例。

这包括以下新属性：

begin — 指定字幕何时开始显示（在本例中，在视频开始后 1 秒）。
end — 指定字幕何时消失（在本例中，在视频开始后 2 秒）。

尝试更改代码示例中的第二个值，准备好后按下重新加载按钮。

注意： IMSC 中的结束时间不是“包含”的。当字幕“Hello, I am Mork from Ork.”到达时间值时，它将不再显示。

您也可以使用 dur 属性来设置时间轴。

此属性可替代 end 属性使用。它定义了字幕在 begin 时间过去后“显示多长时间”。在示例中，第二个段落应显示 2 秒。由于它在第 2 秒开始，因此将在第 4 秒消失。

注意与上一个示例相比，在第 2 秒发生了什么变化。

颜色

通常，字幕会显示在不透明或半透明的背景上以提高可读性。您可以使用 backgroundColor 和 color 属性来更改颜色，如本可编辑示例所示。

在此我们引入了以下内容：

tts:backgroundColor — 此属性设置应用于该元素的背景色。在这种情况下，它应用于 <p> 元素，或者更确切地说，应用于由 <p> 生成的区域。

元素。默认背景色为 transparent。
tts:color — 此属性设置应用于该元素的文本颜色。默认文本颜色为 white。

尝试为文本和背景颜色设置其他颜色。

尝试其他命名颜色，例如 lime 或 aqua。
使用十六进制值，例如 #00ff00 或 #00ffff。
您可以使用其他颜色方案，例如 rgb(0 255 255)。
最后，尝试半透明变体，例如 rgb(0 0 0 / .8)。

注意： 现在不用担心命名空间。我们将在单独的指南中解释 xmlns:tts 和 tts:backgroundColor 的含义。

如 IMSC 样式指南中所述，可以定义一组样式属性，这些属性可以使用任意次数。下面的样式 s1 应用了三次。

xml

<tt xmlns="http://www.w3.org/ns/ttml"
    xmlns:tts="http://www.w3.org/ns/ttml#styling"
    xml:lang="en">
  <head>
   <styling>
     <style xml:id="s1" tts:color="yellow" tts:fontStyle="italic"/>
   </styling>
  </head>
  <body>
    <div>
      <p>
        Hello, I am <span style="s1">Mork</span> from <span style="s1">Ork</span>.<br/>
        I come from another <span style="s1">planet</span>.
      </p>
    </div>
  </body>
  </tt>

位置、宽度和高度

如果您没有明确指定位置，字幕默认会显示在视频的左上角。然而，通常您会希望将字幕定位在其他地方，例如视频的底部中心。您需要指定一个区域来定位字幕。

请参见下方使用区域进行定位的最小文档。

xml

<tt xmlns="http://www.w3.org/ns/ttml"
 xmlns:tts="http://www.w3.org/ns/ttml#styling"
 xml:lang="en">
  <head>
    <layout>
      <region tts:origin="10% 80%"
              tts:extent="80% 20%"
              xml:id="bottom"/>
      <region tts:origin="10% 10%"
              tts:extent="80% 20%"
              xml:id="top"/>
    </layout>
</head>
<body>
    <div>
      <p region="bottom"
          tts:backgroundColor="black">
          Hello, I am Mork from Ork.
      </p>
    </div>
  </body>
</tt>

这包括以下新特性：

<head></head> — 与 HTML 一样，<head> 元素作为您想在 IMSC 文档中包含的所有非字幕内容（最常见的是关于内容或文档的元数据）的容器。您将主要使用它来存储定位和样式信息。
<layout></layout> — 此元素充当定位信息的包装器。它以 <region> 元素作为其子级。
<region></region> — 此元素可用于定义 region（区域），即您可以放置在视频上的矩形区域。它们具有定义的位置、宽度和高度，以及一个 id 来唯一标识它们。您可以将其视为与 HTML 中的 <div> 元素相似，通过 CSS 设置了绝对位置、宽度和高度。如果字幕内容“链接”到一个区域（通过在其 region 属性中指定区域的 id），它将显示在该区域生成的区域内。
xml:id - xml:id 属性。xml:id 属性的值是一个字符串，可用于将字幕内容链接到 region。
tts:origin — 此属性定义了区域左上角的位置。它使用 %（百分比）度量。第一个值定义了区域左上角向右移动的距离——在本例中，值 10% 将区域向右放置了视频宽度的 10%。第二个值定义了区域左上角距离视频底部的位置——在本例中，值 80% 将区域左上角向下移动了视频高度的 80%。
tts:extent — 此属性定义了区域的宽度和高度。在本例中，80% 将宽度设置为视频宽度的 80%，20% 将区域的高度设置为视频高度的 20%。
region — 将此属性设置在某些字幕内容上，然后将其值设置为某个区域的 xml:id，将使其引用该区域，这意味着在指定的时间，它将出现在该区域定义的区域内。所以这里，值 bottom 将此 <p> 元素所代表的字幕内容放置在 xml:id 为 bottom 的区域中。

此示例将按如下所示渲染。尝试一下，并在两个框中的代码中进行尝试。例如，您可以将 tts:origin 属性设置为“0% 0%”。或者看看当您更改 <p> 元素 region 属性的值为“top”时会发生什么。

扩展示例

下方更扩展的示例让您了解在完成我们的教程后可以使用 IMSC 做什么。

xml

<?xml version="1.0" encoding="UTF-8"?>
<tt
  xmlns="http://www.w3.org/ns/ttml" xmlns:tts="http://www.w3.org/ns/ttml#styling"
  xmlns:ttp="http://www.w3.org/ns/ttml#parameter" xml:lang="en" ttp:timeBase="media">
  <head>
    <styling>
      <style xml:id="defaultStyle" tts:fontFamily="Verdana, Arial" tts:fontSize="100%"
        tts:textAlign="center"/>
      <style xml:id="alignStart" tts:textAlign="start"/>
      <style xml:id="alignCenter" tts:textAlign="center"/>
      <style xml:id="alignEnd" tts:textAlign="end"/>
      <style xml:id="textWhite" tts:color="white"/>
      <style xml:id="titleHeading" tts:fontSize="300%"/>
      <style xml:id="spanDefaultStyle" tts:backgroundColor="black" tts:color="white"/>
      <style xml:id="monoFont" tts:fontFamily="Lucida Console, Monaco, monospace"/>
      <style xml:id="sansserifFont" tts:fontFamily="Impact, Charcoal, sans-serif"/>
      <style xml:id="comicFont" tts:fontFamily="Comic Sans MS, cursive, sans-serif"/>
      <style xml:id="blueText" tts:color="cyan" tts:backgroundColor="black"/>
      <style xml:id="limeText" tts:color="lime" tts:backgroundColor="black"/>
      <style xml:id="fuchsiaText" tts:color="magenta" tts:backgroundColor="black"/>
      <style xml:id="yellowText" tts:color="yellow" tts:backgroundColor="black"/>
    </styling>
    <layout>
      <region xml:id="rTop" tts:origin="10% 10%" tts:extent="80% 80%" tts:displayAlign="before"/>
      <region xml:id="rCenter" tts:origin="10% 10%" tts:extent="80% 80%" tts:displayAlign="center"/>
      <region xml:id="rBottom" tts:origin="10% 10%" tts:extent="80% 80%" tts:displayAlign="after"/>
    </layout>
  </head>
  <body style="defaultStyle">
    <div>
      <p xml:id="p1" begin="00:00:01" end="00:00:03" region="rCenter" style="alignCenter">
        <span style="titleHeading">IMSC Demo</span>
      </p>
      <p xml:id="p2" begin="00:00:03" end="00:00:05" region="rBottom" style="alignCenter">
        <span style="spanDefaultStyle">You </span><span style="blueText">can</span><span
          style="yellowText"> apply</span><span style="fuchsiaText"> different</span><span
          style="limeText"> colors, </span>
      </p>
      <p xml:id="p3" begin="00:00:05" end="00:00:07" region="rBottom" style="alignCenter">
        <span style="monoFont">use</span><span style="sansserifFont"> different</span><span
          style="comicFont"> fonts,</span>
      </p>
      <p xml:id="p4" begin="00:00:07" end="00:00:09" region="rBottom" style="alignCenter">
        <span>set </span><span tts:fontSize="150%">the</span><span tts:fontSize="200%"> font
          size.</span>
      </p>
      <p xml:id="p5" begin="00:00:09" end="00:00:11" region="rBottom" style="alignStart">
        <span style="spanDefaultStyle">Align at the start, </span><br/>
      </p>
      <p xml:id="p6" begin="00:00:11" end="00:00:13" region="rBottom" style="alignCenter">
        <span style="spanDefaultStyle">center and</span>
      </p>
      <p xml:id="p7" begin="00:00:13" end="00:00:15" region="rBottom" style="alignEnd">
        <span style="spanDefaultStyle">end</span><br/>
      </p>
      <p xml:id="p8" begin="00:00:15" end="00:00:17" region="rTop" style="alignCenter">
        <span style="spanDefaultStyle">or vertically at the top, </span><br/>
      </p>
      <p xml:id="p9" begin="00:00:17" end="00:00:19" region="rCenter" style="alignCenter">
        <span style="spanDefaultStyle">center and </span>
      </p>
      <p xml:id="p10" begin="00:00:19" end="00:00:21" region="rBottom" style="alignCenter">
        <span style="spanDefaultStyle">bottom.</span>
      </p>
    </div>
  </body>
</tt>

总结

以上是 IMSC 代码基础的快速入门！我们才刚刚触及皮毛，在接下来的文章中您将更深入地探讨以上主题。

帮助改进 MDN

了解如何贡献

此页面最后修改于 ⁨2025 年 8 月 7 日⁩，作者是 MDN 贡献者。

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