TTML（IMSC）字幕

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 才算是真正意义上的支持了“动画”。通过关键帧我们能更方便的定义一系列的属性变化并进行自动的补间计算。

TTML（IMSC）字幕相关推荐

有哪些能给视频加特效字幕的软件？试试这几种简单方法
什么软件能够给视频添加特效字幕呢?添加字幕可以提高视频的可访问性,使得听力障碍者和非母语者也能够理解视频的内容.此外,字幕也可以让人们更容易地跟上视频的内容,从而提高学习效率和理解度.在一些情况下,字 ...
下载微软虚拟学院视频字幕，解决本地播放没有字幕
1. 视频下载是没有问题的,点击下载就能存储到本地. 2. 问题来了,下载下来的视频是没有字幕的,这对英文本来就不好的程序员来说无疑是一本天书,只能看讲师在上面比划. 3. 通过chrome里的开发者 ...
如何为HTML5 Video载入WebVTT字幕
今天无意看到了一篇关于在H5 video插入字幕的文章,简单做个总结. 前言网页中使用H5 video播放视频文件,一般而言不外乎是: 字幕嵌在影片里字幕档另外挂上第 1 种方法很单纯,字幕就是 ...
给视频加字幕HTML代码,给Html5视频播放器添加字幕
现在各种支持HTML5的浏览器都能够播放html5视频了,但是对于字幕的支持却很少,我们期待像DVD那样强大的字幕. 往往我们还不得不通过js来做,着实是一件痛苦的事情. 现在IE10率先对HTML5 ...
HTML5 ＜track＞给视音频添加字幕
灵感来源:https://www.zhangxinxu.com/wordpress/2018/03/html5-video-webvtt-subtitle/ HTML5 可以用 <track&g ...
HTML5视频字幕与WebVTT
译自:http://html5doctor.com/video-subtitling-and-webvtt/ 转载请标明出处:蒋宇捷的博客(http://blog.csdn.net/hfahe) -- ...
如何给页面加上loding_如何给片头添加字幕？视频剪辑大神们都这样玩
大家在刷视频时,有没有留意到很多正片前还有一段片头,这是为了使视频内容呈现得更完整.有时候,小伙伴们还会给视频加上一段片尾.与正片相比,片头比较单调,但它的作用很重要.为了使人们更加清楚视频内容的表达 ...
深度学习入门Fast.ai 2.0上线！自带中文字幕，所有笔记、资源全部免费！
贾浩楠发自凹非寺量子位报道 | 公众号 QbitAI Fast.ai,最受人们欢迎的MOOC课程和深度学习框架之一. 重代码而非数学,这让不少使用Fast.ai的初学者称霸各种Kaggle比 ...
marquee 滚动字幕
滚动字幕: <!DOCTYPE html> <html><head><meta charset="UTF-8"><title& ...
iOS使用AVFoundation在视频上添加字幕以及控制字幕时间
IOS在视频上添加字幕效果的基本思路是: 使用自定义的CATextLayer文字图层或者CAShapeLayer文字图层,添加到视频的Layer上创建用户自定义的字幕效果.这两者的区别是:CAText ...

TTML（IMSC）字幕

TTML（IMSC）字幕相关推荐

最新文章

热门文章