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 上檢視此頁面 • 報告此內容的問題