IMSC 基础

IMSC 允许您为在线视频添加字幕或旁白。在本文中，我们将带您了解入门所需的一切，包括基本文档结构以及如何样式化、计时和定位字幕的基础知识。

注意：IMSC 可用于您可能希望在 Web 文档上包含的任何类型的计时文本，而不仅仅是字幕和旁白。但由于字幕和旁白代表 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 属性指定内容的语言。请注意，lang 属性必须带有前缀 xml:，这与 HTML 不同。在 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 中的结束时间不是“包含”的。字幕“你好，我是来自奥克星球的莫克”在达到时间中的秒值时将不再显示。

您也可以使用 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="#FFFFFF"/>
      <style xml:id="titleHeading" tts:fontSize="300%"/>
      <style xml:id="spanDefaultStyle" tts:backgroundColor="#000000" tts:color="#FFFFFF"/>
      <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="#00FFFF" tts:backgroundColor="#000000"/>
      <style xml:id="limeText" tts:color="#00FF00" tts:backgroundColor="#000000"/>
      <style xml:id="fuchsiaText" tts:color="#FF00FF" tts:backgroundColor="#000000"/>
      <style xml:id="yellowText" tts:color="#FFFF00" tts:backgroundColor="#000000"/>
    </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 代码基础速成课程！我们在这里只是触及了表面，您将在随后的文章中更深入地探讨上述主题。