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