TTML（IMSC）字幕

最新推荐文章于 2025-03-19 01:28:46 发布

dark_2001

最新推荐文章于 2025-03-19 01:28:46 发布

阅读量3.7k

点赞数 1

文章标签： TTML IMSC 字幕

本文链接：https://blog.csdn.net/dark_2001/article/details/118940869

版权

TTML 全称是 Timed Text Markup Language，是一种基于 XML 的时序文本标记语言。它旨在用于全球范围内的跨字幕和字幕传递应用程序，从而简化互操作性并保持与其他字幕文件格式的一致性和兼容性。
TTML是xml格式的文件,TTML 和SMIL 类似，由于谷歌的去XML计划，Chrome 浏览器的支持性不是很好
标准的 .ttml 文件的基本格式应该如下，整体结构和 HTML 非常类似，有和两个标签构成主体内容。如其名为主体内容标签，而可以放置如下标签：

：用于放置字幕文件的 meta 信息的容器标签
：用于放置预定义的

通过

<?xml version='1.0' encoding='UTF-8'?>
<tt xmlns='http://www.w3.org/ns/ttml' xml:lang='en' >
<head>
    <metadata>
      <ttm:title>Timed Text TTML Example</ttm:title>
      <ttm:copyright>The Authors (c) 2006</ttm:copyright>
    </metadata>
    <styling>
      <style xml:id="default"
        tts:color="white"
        tts:fontFamily="proportionalSansSerif"
        tts:fontSize="100%"
        tts:textAlign="center"
      />
    </styling>
    <layout>
      <region xml:id="area"
        style="default"
        tts:extent="100% 10%"
        tts:origin="0 90%"
        tts:backgroundColor="black"
        tts:displayAlign="after"
      />
    </layout>
  </head>
<body region="area">
<div>
<p begin="00:00:01.878" end="00:00:05.334" >曾经有一份真诚的爱情放在我面前，</p>
<p begin="00:00:08.608" end="00:00:15.296" >我没有珍惜，等我失去的时候我才后悔莫及，<br/>人世间最痛苦的事莫过于此。</p>
</div>
</body>
</tt>

字幕样式
TTML 的字幕样式配置和 CSS 其实整体是十分像的，只是它改成了标签属性的形式。它支持设置字幕的字体、字号、颜色、大小、行高、排列方式等文字样式，以及边框、背景、位置等字幕块的样式。
字幕位置
众多的样式属性中，位置属性是最重要的。TTML 提供了下列三种属性让我们对字幕位置进行自定义。

tts:extent：用于定义字幕的尺寸，例如 tts:extent=“100% 10%” 表示的是字幕宽度为 100%，高度为 10%。
tts:origin：用于定义字幕左上角的绘制原点，例如 tts:origin=“0% 90%” 表示的是以内容左上角为原点，(0, 90%) 的位置开始绘制。
tts:position：该属性是 TTML2 中新增的属性，用于强制定义字幕位置。区别于 origin 是左上角的偏移，position 是根据设置的属性动态原点的偏移。例如 tts:position=“70% 50%” 的话则是相对于字幕块的(70%, 50%)点作为原点整体字幕偏移相对于内容区域的(70%, 50%)。
可以看到，相对于 Web 的盒子布局，我们需要额外的手动定义字幕的尺寸和位置，这对于习惯了浏览器自己绘制渲染的我们来说还是非常不习惯的。特别是文字的布局如果没有 CSS 的自动计算，实际上是非常麻烦的，包括字幕内容的多变以及字号行高样式都需要考虑进去。
字幕动画
相对于其它字幕格式，支持动画是 TTML 的一大特色。它借鉴了 SVG 的 SMIL 动画标签规范，提供了以下下三组标签让我们可以对字幕动画进行描述。
set：用于定义在某段时间内字幕内容的样式变化，例如表示的是 1s 后将字幕颜色设置成红色并在 1s 后取消设置。
animate：TTML2 新增的动画属性，支持使用关键帧的形式定义某段时间内字幕样式变化。例如表示字幕在 0s 的时候为红色，0.2s 后线性转变为绿色，1s 后再线性转变成蓝色。支持多个样式属性变化定义。
animation：多个 animate 或者 set 动画标签的容器标签。
可以看到 set 支持状态的变化但是其实本质是动态的属性修改，直到 TTML2 增加了 animate 标签后 TTML 才算是真正意义上的支持了“动画”。通过关键帧我们能更方便的定义一系列的属性变化并进行自动的补间计算。