第 6 章 smil 语言

第 6 章 SMIL 语言

本章结构

学习目标

1. 知识目标：了解同步多媒体集成语言的特点，掌握 SMIL 语言的基本语法。

2. 技能目标：较熟练使用 SMIL 控制、组合多媒体，制作多媒体演示。

3. 素质目标：培养学生网络程序制作能力。

6.1 SMIL 基础

6.1.1 SMIL 的发展6.1.2 SMIL 的特性6.1.3 SMIL 的基本语法规则

6.1.1 SMIL 的发展

1 ．初识 SMIL

SMIL （ Synchronized Multimedia Integration Language ，同步多媒体集成语言）是由 W3C （ World Wide Web Consortium ，万维网协会）制定的多媒体操作语言，是 XML 的一个子集。在网络应用中， SMIL 是用来集成多媒体节目的工具。


1 ．初识 SMIL

SMIL 播放如需播放 SMIL 呈现，你需要一个 SMIL 播放器。可以

在因特网上找到不同的 SMIL 播放器：•RealNetworks 的 RealOne 平台提供了对 SMIL 2.0 的

充分支持 •Oratrix 的 GRiNS for SMIL-2.0 提供了一款 SMIL 2.0

播放器 •InterObject 的 SMIL 播放器支持 SMIL 2.0 的基础框架


1 ．初识 SMIL

SMIL 播放在 Internet Explorer 中播放 SMIL 呈现通过 Internet Explorer 5.5 或更新的版本，能够把

SMIL 元素插入 HTML 文件中。通过这种方式，任何 SMIL 呈现都能作为标准的

HTML 文件运行在因特网上。


SMIL 播放 - 案例在 real player 中播放：

<smil><body> <seq> <img src="img1.jpg" dur="3s" /> <img src="img2.jpg" dur="3s" /> </seq></body></smil>


SMIL 播放 - 案例在浏览器中播放：

<html xmlns:time="urn:schemas-microsoft-com:time"><head> <?import namespace="time" implementation="#default#time2"> <style>.time {behavior: url(#default#time2)}</style></head><body> <time:seq> <img class="time" src="img1.jpg" dur="3s" /> <img class="time" src="img2.jpg" dur="3s" /> </time:seq></body></html>


浏览器嵌入 Real 播放器进行 SMIL 播放 - 案例

WIN7 、 IE9 开始已不支持 SMIL ，故目前通用的方法是：在浏览器中嵌入播放器进行播放：

<html><head> </head><body><object classid=clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA id=video1 style=LEFT:0px;TOP:0px width=800 height=600>...<param name=SRC value=first-smil.smi><param name=CONTROLS value=Imagewindow,ControlPanel,StatusBar>...</object></body></html>


2 ． SMIL 的发展1997 年 3 月， W3C 万维网协会建立了关于同步多媒体的工

作组，开始了 SMIL 的开发。1997 年 11 月 SMIL 作为工作草案被提交，获得了

RealNetworks 、 Microsoft 等公司的支持。1998 年 6 月， W3C 正式推荐了 SMIL1.0 。 1999 年 8 月， W3C 推出了 SMIL Boston 版本，在功能上有

许多重要的扩展。2001 年 8 月， SMIL 2.0 成为官方建议标准。2005 年 12 月， SMIL 2.1 正式成为官方建议标准。

6.1.2 SMIL 的特性

1 ．同时播放多种格式媒体2 ．同时播存储在不同地方（服务器上）的多媒体片段3 ．灵活控制媒体播放4 ．可进行页面布局5 ．多语言选择支持6 ．多带宽选择支持7 ．编辑方便


多语言选择支持分析这样一个实际例子：我们要为某种产品作宣传，其宣传对

象是多个国家的人，有英语国家的、有法语国家的、有德语国家的等等。当然最主要是讲中文的国家的人（我是中国人！）。如果我们想要所有的人都可以听懂、看懂我们的介绍，那么我们就的准备不同语言版本的媒体文件。传统的方法是让用户来选择，然后从服务器上下载相应的版本。麻烦就不用讲了。万一我们的选择老外都看不懂 ( 有时候，我到德文、日文、朝鲜文的站点上，就不知道他们讲些什么东西 L), 这怎么办？如果把他们用 SMIL 来组织起来、规定好，那么 SMIL 语言将根据具体的语言设置来播放相应版本的演示。就是方便！


多带宽选择支持由于各个用户连接到 Internet 的方式不尽相同，所以其连接的

速度差别也较大。为了让他们都能够看到我们的演示，我们可以制作适应不同传输速度的演示。在传统的方法中，往往要用户自己选择他的机器连接所对应的传输速度，然后播放相应得演示文件。这确实解决了一些问题。实际上，并不是所有的用户都知道自己的连接速度，就是知道了，还得选择不也是非常麻烦吗？ SMIL 解决这个问题如同吹灰！播放器检测出用户的连接速度后，就同服务器“协商”，要求传输并播放相应的演示文件。

6.1.3 SMIL 的基本语法规则

SMIL 作为一种标记语言，其格式类似于 HTML ，主要通过各种标记来表示和组织各种对象，通常标记由符号“ <”“>” 以及其中所包含的标记元素组成。

SMIL采用简捷的语法命令，设置各种标记、元素及属性，建立与各种媒体文件的关联和播放设置。


1. SMIL 的结构

SMILSMIL只包含结构和指向内容的只包含结构和指向内容的 URLURL ，不会将结构和内，不会将结构和内容混杂在同一个文档中。容混杂在同一个文档中。

-- 例如， SMIL 文档只会包含指向相应文本文件的 URL ，而 HTML 通常将文本包含在文档的 body 中。

Smil 文件的基本结构 <smil> <head> <layout>  </layout> </head> <body>  </body> </smil>


2. SMIL 的格式要求1 ） SMIL 程序以 <smil> 开始，以 </smil>结束2 ）整个程序由 body 和 head两个部分组成3 ）基于 XML,属性和标记一般要求小写，属性值不分大小写属性值不分大小写4 ）在 SMIL 中，所有的标识都必须有明显的结束符5 ）属性值必须用双引号括起来6 ） SMIL 文件必须以 .smil .smil 或者或者 .smi.smi 为扩展名来保存 7 ）附加信息写在 <head></head>之间8 ）用 < !-- … --> 进行注释


标记名称作用<animation…/> 定义动画文件，如 GIF动画等<brush…/> 定义一个刷子<param…/> 定义一个参数<text…/> 定义文本文件 (.txt文件 )

<textstream…/> 定义 RealText 的流式文本文件 (.rt 文件 )

<img…/> 定义图片文件，如 JPEG 、 GIF 、 PNG

<audio…/> 定义声音文件，如 .ra文件、 mp3文件、 wav文件<video…/> 定义视频文件，如 .rm文件、 .mov文件、 mpeg文件<ref…/> 定义引用，适用于所有格式，尤其是其他媒体标记无法描述的格式，如

RealPix文件 (.rp)

3. Media 媒体元素1 ）媒体元素的类型


属性作用说明

erase 定义计时完成后该元素的行为擦除、清洗、抹除

src 定义媒体对象的源必须使用其属性中的 URL来包括 SMIL中的各个媒体对象

type 定义媒体类型如 type=“wav”;如果被忽略，则应用程序依赖由服务器告知的类型信息，开发者不应依靠文件类型扩展名来定义文件类型。

2 ）媒体元素的常用属性 (erase, src, type, dur, begin, end, repeat,...)


标记名称作用<seq…/> 按顺序显示多个媒体元素<par…/> 并行显示多个媒体元素<excl…/> 单独显示某个媒体元素

4. Timing 时间元素1 ）时间元素的类型


2 ）时间元素的常用属性 (begin, dur, repeatCount,...)


3 ）媒体元素的使用在 SMIL 中，媒体元素的使用与 HTML略有相同，但所有

XML 标记符不需要第二个结束标记符，因而需要一个反斜线放在结尾。

--HTML 格式： <img src="http://www.cis.edu.cn/images/think.jpg">

--SMIL 格式： <img src="http:

//www.cis.edu.cn/images/think.jpg " />

6.2 SMIL 的详解和应用

6.2.1 组合媒体文件6.2.2 时间控制6.2.3 布局设计6.2.4 链接制作6.2.5 动画效果6.2.6 转场效果6.2.7 字幕制作

6.2.1 组合媒体文件

SMIL 的核心功能基于 <par> 和 <seq> 这两个元素：

--<par> 是“ parallel” （并行）的缩写--<seq> 是“ sequence” （序列）的缩写。这两个元素可以嵌套，可以在子序列中同时

开始几个媒体对象，也可以在一个序列中同时播放几个对象。


1. <seq> </seq> 标记位于 <seq> 和 </seq> 标识之间之间的代码称之为序

列。

序列中的媒体元素将会被依次地表示——即在前一个元素表示完成之后才开始当前元素的表示。

有多种不同的方法可以确定一个媒体元素应该在什么时候表示结束。

<smil> <head> </head> <body> <seq> <audio src="sample1.mp3" /> <audio src="sample2.mp3 " /> <audio src="sample3.mp3" /> </seq> </body> </smil>


该序列在一行中播放 3 个音频文件。每个元素在音频信号播放完成的时候结束，一旦当前的元素播放结束了，下一个就开始播放。


第一个图像在显示 5秒之后就停止，然后出现视频，并播放 50秒。

<smil> <head> </head> <body> <seq> <img src=“Koala.jpg" dur=“5s” /> <video src=“sample1.rv" dur=“50s" /> </seq> </body> </smil>


2. <par> < /par> 标记使用并行组合标记 <par> 和 </par> ，可以同时播放

多个媒体对象。并行元素的表示会同时进行，但不一定是同时结束。

<par> <audio src=“sample3.mp3" /> <img src=“img1.jpg" region="images" dur="30s"/> <text src="zimu.txt" region="text" dur="30s"/> </par>


3. 组合序列和并行可以将一组并行的媒体元素组合为一个序列。在序列中，并行组被处理为一个单独的整体元素。

并行组中的所有元素在序列中的某个合适时间点上同时开始表示，当并行组中的最后一个元素结束时，序列就往下继续。


<seq> <img src="img1.jpg" region="image" dur= "5s" /> <par> <audio src="sample1.mp3" /> <video src="sample2.rv" region="video" /> </par> <text src="zimu.txt" dur="10s" region="text" /> </seq>

img1.jpg首先被播放。 sample1.mp3 和sample2.rv部分在 img1.jpg结束之后同时开始，当这两部分表示结束后， zimu.txt部分才开始显示。


如果将两种组合标记互换，大家将看到完全不同的播放时间效果。

<par> <img src=“img1.jpg" region="image" dur=“5s" /> <seq> <audio src=“sample1.mp3" /> <video src=“sample2.rv" region="video" /> </seq> <text src="zimu.txt" dur="10s" region="text" /> </par>

img1.jpg 、 sample1.mp3 和 zimu.txt部分同时开始播放，当 sample1.mp3结束之后 sample2.rv 开始播放。


4. 使用简单的结构可以以不同的方式组合并行元素和序列元素，来达

到同样的效果。

导入 SMIL结构的每个元素都需要时间开销，从而轻微地延迟演示开始的时间。在可能的情况下，应该尽量在可能的情况下，应该尽量选择需要创建的媒体元素最少的结构。选择需要创建的媒体元素最少的结构。


创建一个并行元素组成的序列，假设有 20 个图像对，这需要创建一个含有 20 个并行元素的元素序列，每个并行元素带有 2 个媒体元素。

这样文件就包含 21 个结构化的元素，如下所示。


类似地，创建一个单独的带有 2 个序列并行元素，一个是上序列，一个是下序列，每个系列带有 20 个媒体元素，如下所示。

<par> <seq> <img src=" img1.jpg" region="image" dur=“5s" /> <img src=“img2.jpg" region="image" dur=“5s" /> … … … </seq>


<seq> <text src=" zimu1.txt" region="text" dur=“5s" /> <text src=" zimu2.txt" region="text" dur=“5s" /> > … … … </seq> </par> 这需要为各个媒体元素提供相同的设置，虽然在最终的文件中

只需 3 个结构化的元素，但在打开速度上如何？

6.2.2 时间控制

时间控制用来规定媒体对象或是媒体文件组合：-- 在何时播放-- 播放多长时间它的建立是通过 SMIL 中各个相关的媒体标记或是组

合标记的时间属性来实现的。所有的时间属性都是可选的，如果在相应标记中不

设置它们，媒体对象播放的开始和终止时间就取决于各自的内部时间线以及它们在 <par> 或者 <seq> 组合中的位置。

6.2.2 时间控制

1. 时间值的表示在 SMIL 中，时间属性的取值可以有两种表示方法。

一种是归一表示法，即使用小时、分等某一个时间单位表示时间，如 1.5h 、 3.25 min 、 20s 。

另一种是时钟表示法，即采用“ hh ： mm ： ss” 的格式，即小时：分：秒：毫秒。

6.2.2 时间控制

2. 设置播放的持续时间媒体标记和组合标记的 dur属性定义了对应的媒体对象或是文

件组合从开始播放起，到播放结束的时间。

<seq>

<video src="sample1.rv" dur="00:00:20" />

<video src="sample2.rv" dur="3s" />

</seq>

这里使用“ dur” 对 sample1.rv 和 sample2.rv 的持续时间做了规定， sample1.rv 持续时间 20 秒， sample2.rv 持续时间 3 秒。

6.2.2 时间控制

3. begin 和 end 属性通过 begin 和 end参数，可以为媒体元素指定一个

明确的起始时间和结束时间，或指定一个表示开始或结束的触发器。

指定的时间值是相对于元素正常开始时刻的时间，该时间值所表达的确切含义要根据该视频媒体在 SMIL文件中所处的位置来决定。

6.2.2 时间控制

<img src=“img1.jpg" begin=“3s“ dur=“3s”/> <img src=“img1.jpg" begin=“3s“ dur=“3s”/>

如果指定一个结束时间，则元素的表示会在自然开始的一定时间后结束。

<img src=“img2.jpg“ begin="5s" end=“10s" /><img src=“img2.jpg“ begin="5s" end=“10s" />

上述语句可以得到的时间点为：①如果该元素是 <seq></seq>序列的一部分，则会在前一个元素结束 3秒钟后开始；②如果该元素是 <par></par> 组的一部分，则会在整个组开始 3秒钟后开始。

图像在整个演示进行 5秒钟后开始，并在整个演示的 10秒后结束，播放时长是 5秒。元素的时长等于其起始时间减去结束时间。

6.2.2 时间控制

如果没有指定 begin参数的值， end参数的值就等于 dur参数的值。

< img src=“img1.jpg" end="10s"/>

如果播放的视频在一个组中，它就得服从组的时间。 <smil> <body> <seq dur="10s"> <img src="img1.jpg" begin="5s" dur="20s"/> </seq> </body></smil> img1.jpg 所在的组的持续时间为 10 秒，而 img1 .jpg

自己要求持续 15 秒，这是不行的。实际上 img1 .jpg 的显示时间只有 10-5=5 秒。

6.2.2 时间控制

4. clip-begin 和 clip-end 属性可以通过 clip-begin 和 clip-end属性在媒体元素中指

定一个片段。注意与注意与 begin/endbegin/end 的区别的区别。

该特性可使用户从一个较长的文件或流中播放选定的部分。它不能应用于通过 HTTP 发布的文件，因为即使实际播放的只是一个小片段， HTTP 文件也总是完全下载。

6.2.2 时间控制

播放 sample1.rv 中的片段，从第 5秒开始，在 60秒结束<smil> <body> <video src=" sample1.rv" clip-begin="5s" clip-end="60s"/><video src=" sample1.rv" clip-begin="5s" clip-end="60s"/> </body> </smil>

clip-begin 和 clip-end 属性是用内部时间控制的属性。内部是指媒体片段自己的时间线（ timeline ）。 clip-begin 规定在何处开始播放， clip-end 规定放到何处结束。

6.2.2 时间控制

<smil>

<body>

<par>

<video src="sample1.rv" clip-begin="5s" dur="20s"/>

<video src="sample2.rv" begin="5s" clip-begin="5s" clip-end="20s"/>

</par>

</body>

</smil>

首先 sample1.rv 从 5 秒处开始播放，播放持续 5 秒以后， sample2.rv 从自己的 5秒处开始与sample1.rv 一起播放， sample1.rv 播放到自己的 25 秒处停止播放， sample1.rv 播放了 25-5=20 秒。

sample2.rv 播放到自己的 20 秒处停止播放， sample2.rv 播放了 20-5=15 秒。

6.2.2 时间控制

5. fill 属性当演示中的某个片段播放完成后，可以用 fill属性来规定

它的显示状态。Fill常用属性值有“ remove” 、“ freeze” 、“ transition” 。--remove 是 fill属性的默认值，定义的行为是媒体对象播

放结束后，将从播放区域中消失，显示区域默认的背景色--freeze表示，结束时保留显示最后一帧画面，直到有效

时间结束--transition表示，场景转换效果

6.2.2 时间控制

<smil>

<body>

<video src= “sample2.rv" region="video" dur= " 35s" <video src= “sample2.rv" region="video" dur= " 35s" fill="freeze"/>fill="freeze"/>

</body>

</smil>

假设 sample2.rv 的长度是 30 秒，那么在这里规定的就是：在 sample2.rv 播放终了以后，屏幕上显示的是 sample2.rv 的最后一帧画面，显示的时间是 35-30=5 秒。

6.2.2 时间控制

6 ． repeat 属性如果希望某个片段或者全部的片段重复播放若干次，可使用

repeat 属性来实现该效果。

<smil> <body> <video src= "sample2.rv" dur="13s" repeat="3"/><video src= "sample2.rv" dur="13s" repeat="3"/> </body> </smil>

上述实例是使 sample2.rv 播放 3次。如果想让某个片段一直播放下去，则 repeat=“indefinite” 。

6.2.3 布局设计

布局就是在屏幕上规定各个媒体片段显示的位置。如果使媒体播放器的主窗口在播放不同的媒体对象

时都保持同样的大小 ;

或者在同一时间内要同时播放多个可视媒体对象，就必须通过 SMIL 文件窗口布局的设置，来定义媒体播放器的主窗口大小以及各播放区域的大小和位置，并在各播放区域中放置相应的媒体对象。

窗口布局需要 <layout> 和 </layout> 标记。

6.2.3 布局设计

1 ．定义主窗口区域SMIL 的布局必须在 < layout>和 < /layout> 中以 <root-

layout/> 标记开始，因为它给出显示区域的像素尺寸，并分配一个背景颜色。 ① 布局标记必须以 < layout> 开头，以 <

/layout>结束，其他具体的标记都在这中间。<layout>< /layout>必须放在 < head>< /head>之间。

② root-layout 标记表明的是规定最基本的、最底层的窗口。其他一切窗口都在它的基础上划分出来。

③width=“300” 表明窗口宽为 300 个像素点； height=“200”表明窗口高为 200 个像素点； background-color=“white”表明窗口的背景颜色为白色。 ④ 背景颜色可用十六进制值（ #FF0000 ）或名称（ red ）来定义。

<smil> <head> <layout><layout> <root-layout width="320" <root-layout width="320" height="240"height="240" background-color="white" />background-color="white" /> </layout></layout> </head> <body> </body> </smil>

6.2.3 布局设计

设置播放窗口布局的 SMIL 文件常见结构 :<smil> <head> <layout> <root-layout ... 定义主窗口的大小 ... /> <region id="name1" ... 在主窗口中定义一个播放区域

... /> <region id="name2" ... 在主窗口中定义一个播放区域

... /> ... </layout> </head>

6.2.3 布局设计

<body> <ref src="..." region="name1" ... 在播放区域中放置媒体对象 ... /> <ref src="..." region="name2" ... 在播放区域中放置媒体对象 ... /> ... </body></smil>

6.2.3 布局设计

2. 定义多媒体片段显示窗口 <region/> 标记用来定义多媒体片段的播放区域，具体参数为：--Id ：给每个区一个名称，很象 HTML 的帧（ frame ）名称。 --height ：设置播放区域的高度，单位为像素或百分比。--width ：设置播放区域的宽度，单位为像素或百分比。--left ：设置播放区域左边缘与主窗口左边缘的距离，单位为像

素或百分比。--top ：设置播放区域上边缘与主窗口上边缘的距离，单位为像

素或百分比。

通常情况下，区域的位置是从显示区域的左上角向右下方向扩展，可通过指定相对于左边和顶边的偏移量来进行调整。

6.2.3 布局设计

<smil> <head> <layout> <root-layout id="main" width=“800" height=“600"

background-color="white"/> <region id="video" width=“600" height=“400" /><region id="video" width=“600" height=“400" /> <region id="zimu“ height="20%" top="200" /><region id="zimu“ height="20%" top="200" /> </layout> </head>

6.2.3 布局设计

< body> < par> <video src= "sample1.rv" region="video" /><video src= "sample1.rv" region="video" /> <text src= " zimu.txt" region="zimu"/><text src= " zimu.txt" region="zimu"/> < /par> < /body> </smil>

6.2.3 布局设计

此程序定义了一个名为“main” 、大小为 800 ×600像素、背景为白色的主窗口显示区域；

定义了一个名为“ video” 的区域，用来播放视频；定义了第二个播放区域“ zimu” ，它的宽度是默认主区域宽度，

高度为 120像素（ height=“20%”*600=120 ）， zimu 区的上边界位于显示区域的下方（ top=“200” ）。

6.2.3 布局设计

3. fit 属性当媒体元素的像素尺寸和它们显示区的尺寸不同时，

fit属性定义了裁剪或缩放的方法。

在实际制作中，显示窗口的大小与多媒体片段的尺寸大小可能不一致，理想的解决办法是，使用“ fit”属性来使多媒体片段与窗口匹配。“ fit”属性的属性值有以下5 个。

6.2.3 布局设计

(1) fit=“hidden” （缺省），表示保持多媒体片段的尺寸不变，从窗口的左上角开始显示，图像不进行缩放。

当图像尺寸比所在区大时，图像将会被裁减；当图像尺寸小于所在区时，部分区就会空白。

(2) fit=“fill” ，缩放图像以填充所在区的高度和宽度，比例失衡。

(3) fit=“meet” ，在保持多媒体片段宽 /高比例不变的情况下，对其尺寸进行缩放。这样，图像可能不能完全填充整个区，但有可能会充满区的宽或高，图像不会被裁减或扭曲。

6.2.3 布局设计

<region id=“video " width="75%" height="75%" fit="meet"/>表示媒体片段会在 75%限制的方框内进行等比例缩放

(4) fit=“slice” ，图像会被缩放，在完全充满整个区完全充满整个区的同时保持图像的长宽比例，必要时对会裁减图像。如果图像的长宽比例和所在的区不同，会将延伸到区域外的部分裁减。

(5) fit=“scroll” ，会相应出现水平或垂直滚动条。

6.2.3 布局设计

fit 属性

6.2.3 布局设计

案例：<layout>

<root-layout width="360" height="320" background-color="white"/>

<region id="Image" width="100%" height="75%" left="0%" top="0%" fit="scroll"/>

<region id="Text" width="100%" height="25%" left="0%" top="75%" />

</layout>

</head>

...

6.2.3 布局设计

4. z-index 属性z-index 为可选属性，用来指定互相重叠区的分层信

息，该属性可用来制作画中画效果。值大的在最上层。

当不同的区域发生重叠时，一个会在另一个的上面。缺省情况下，布局中后定义的区位于先定义的上方。

可以通过 z-index参数来显式设置分层信息， z-index值越高的层越靠上面。

6.2.3 布局设计

<region id="img1" width=“800" height=“600" z-index="1" /><region id="img1" width=“800" height=“600" z-index="1" />



上面的三个区完全重合在一起， image3 在最上面， image2在中间， image1 在最底下。如果没有指定 z-index值的话，最后定义的区位于最上面。

root 层窗口总是在最后一层，并且不用 z-index 属性； z-index 属性值可以是负数。当然它就的排在 0 以后；没有重叠的窗口可以使用同一 z-index 属性值。

6.2.4链接制作

1. <a> 与 </a> 标记 <a></a> 属性用于链接标记， href 表示所要链接的

文件。 <smil> <head> <layout> <root-layout width="320" height="240"/> <region id="video" width="320" height="240"/> </layout> </head>

6.2.4链接制作

<body> <a href="sample2.rv"><a href="sample2.rv"> <video src="sample1.rv" region="video"/><video src="sample1.rv" region="video"/> </a></a> </body></smil>

正常情况下，如果把鼠标放到正在播放的 sample1.rv 上面，鼠标将有指针形状变为小手形状。

单击鼠标左键，播放器播放将停止播放 sample1.rv 而播放 sample2.rv 。

6.2.4链接制作

2. <anchor> 属性<anchor>属性可以创建更复杂的链接，与 <a> 标记

不同的是， <anchor/> 不是成对的封闭型标记，而是通过“ /” 来表示结束。

因此，它就不能像因此，它就不能像 <a><a> 标记一样，将源媒体标记包标记一样，将源媒体标记包含在含在 <a></a><a></a> 内，而是它被源媒体标记包含在内内，而是它被源媒体标记包含在内。因此源媒体标记的表示方法也发生了变化。

6.2.4链接制作

将上例中的 < body>…< /body>部分换成下面这段代码，效果完全一样

<body>

<video src= " sample1.rv" region="video">

<anchor href= “ sample2.rv”/>

</video>

</body>

6.2.4链接制作

1 ）分时段链接分时段链接可以在不同的时间段播放不同的文件，例如在

0~10 秒单击鼠标将链到一个文件， 10~20秒将链到另一个文件。

<smil> <head> <layout> <root-layout width="320" height="240"/> <region id="video" width="320" height="240"/> </layout> </head>

6.2.4链接制作

<body> <video src= " sample1.rv" region="video"><video src= " sample1.rv" region="video"> <anchor href="img1.jpg" begin="0s" end=<anchor href="img1.jpg" begin="0s" end= " 3s"/>3s"/> <anchor href=<anchor href= " sample2.rv" begin=sample2.rv" begin= " 4s" end=4s" end= " 10s"/>10s"/> </video></video> </body></smil>

播放器播放 sample1.rv ，在 0~3 秒单击鼠标链到 img1.jpg ，在 4~10 秒链到 sample2.rm 。这里不支持 dur 、 clip-begin 和 clip-end 。

6.2.4链接制作

3 ） coords 属性coords属性可以规定坐标链接区

coords 属性值的第 1 、 2 个参数分别表示链接区左上角点的水平（ left ）和垂直（ top ）坐标；

第 3 、 4 个参数分别表示链接区右下角点的水平（ left ）和垂直 (top) 坐标。坐标可以采用像素点的绝对定义方法，也可以采用

相对定义方法。

6.2.4链接制作

采用绝对定义法修改 <anchor href=“sample1.rv"/>

< anchor href=“ sample1.rv ” coords=“100 ， 100 ， 280 ， 280"/>

采用相对定义法修改 <anchor href="demo.rm"/>

< anchor href="demo.rm" coords="25％， 25％， 75％， 75 ％ "/>

运行后，可以看到中间部分有链接效果，而边缘部分却没有。

6.2.4链接制作

4 ）链接文件地址在前边介绍的示例代码中，假定流媒体文件都存储

在本地计算机上，并与 SMIL 文件都放在同一个文件夹中，因此链接地址非常简单，使用相对路径即可，如“ href="sample1.rv"” 。

但在实际应用中，大多数都是存储在流媒体服务器中，因此 SMIL代码中媒体文件的链接地址就相对复杂，要符合流媒体系统的规定。

6.2.4链接制作

(1) 创建基地址若流媒体文件在同一个服务器中，可创建一个基地址，并需要

在 head 中创建。 <head>

<meta name="base" content="rtsp://www.tute.edu.cn/"/>

</head>

上面就是在 < head>…< /head> 中用附加信息的方式规定了 SMIL 文件的基地址为 rtsp ： // www.tute.edu.cn/ 。其中 www.tute.edu.cn 是一个流媒体服务器的根地址（根地址也可以是 IP 地址，可写成 < meta name="base" content="rtsp:// 202.99.66.68"/> ）。

6.2.4链接制作

(2) 链接流媒体服务器上的文件规定了基地址以后，在用该地址下的文件时，只需要给出相对

路径即可。 <body> <video src="video/first.rm"/> <video src=" video/second.rm"/> <audio src="rtsp://

www.tute.edu.cn:558/audio/bkmusic.mp3"/> <img src="http://www.bnu.edu.cn/image/welcome.jpg"/> </body>

6.2.4链接制作

（ 3 ）链接本地文件如果用的是本地硬盘上的文件，可用绝对路径 src=“file:/c:\video\

first.rm” 或者 src=“file:///c:\video\first.rm” 进行读取；或相对路径src=“video\first.rm”

该例中的前两个文件用的是该流媒体服务器上根地址下“ video” 文件夹下的文件，因格式为 rm 文件，可以用相对路径。

但是后面的两个文件，一个是 MP3 文件，由于指出要使用558端口，所以不能使用基地址；另一个用的是其他服务器上的文件，因此必须给出绝对地址。

6.2.5动画效果

1. 动画缩放 1使用“ animateMotion 标记”可以缩放动画或图片，一般右下右下

角不动，左上角移动角不动，左上角移动

animateMotion 标记放在其他媒体元素中。最常用的属性有from 、 to 、 dur 、 values 、 begin 和 calcMode属性。可以使用以下结构定义运动动画：

<img ……><img ……> <animateMotion ……/> <animateMotion ……/> 注意大小写！！！注意大小写！！！ </img></img>

6.2.5动画效果

1 ） from 和 to 设定片段移动的起始和终点坐标， dur 设定执行动画的时间，一定要加 xmlns!!!

<smil xmlns="http://www.w3.org/2000/SMIL20/CR/Language"xmlns="http://www.w3.org/2000/SMIL20/CR/Language"> <head> <layout> <root-layout id="main" width="800" height="600"

background-color="white"/> <region id="video" height="60%" width="60%" fit="fill"/> </layout> </head>

6.2.5动画效果

<body> <video region="video" src="sample1.rv" dur="6s"> <video region="video" src="sample1.rv" dur="6s">

<animateMotion from="0 0" to=" 400 328 " begin="1s" <animateMotion from="0 0" to=" 400 328 " begin="1s" dur="4s"/>dur="4s"/>

</video> </video> </body></smil>

From 不能少，否则不移动！！

6.2.5动画效果

2 ） values属性values属性可以设定一个坐标列表，使媒体片段按列表中坐标

的顺序移动。

<animateMotion values=“ 0,0;400 328;400,100 " />

在此例中，媒体片段将从坐标 (0 ， 0)移动到 (400 ， 328), 再移动到 (400,100) 。

6.2.5动画效果

2. 动画缩放 2更灵活的变化：设置 animate 标记的

attributeName属性可实现缩放动画效果， attributeName 具有height 、 left 、 right 、 top 、 width 等属性值，缩放效果如图所示。

6.2.5动画效果

使用 height/width ：<video region="video" src="sample1.rv" dur="10s">

<animate attributeName="height" from="240" to="20" <animate attributeName="height" from="240" to="20" begin="1s" dur="10s" />begin="1s" dur="10s" />

<animate attributeName="width" from="320" to="20" <animate attributeName="width" from="320" to="20" begin="1s" dur="10s" />begin="1s" dur="10s" />

</video>

在此例中， “ animate attributeName=”height“”和“ animate attributeName=”width“” 分别声明了动画的类型，该动画可以使视频sample1.rv 的高度（ height ）和宽度（ width ）从 1秒开始同时减少，经过 10秒后画面缩小。

6.2.5动画效果

使用 top/bottom/right/left ：<video region="video" src="sample1.rv" dur="10s">

<animate attributeName="left" from="0" to="220" <animate attributeName="left" from="0" to="220" begin="1s" dur="10s" />begin="1s" dur="10s" />

<animate attributeName="bottom" from="0" to="220" <animate attributeName="bottom" from="0" to="220" begin="1s" dur="10s" />begin="1s" dur="10s" />

<animate attributeName="top" from="0" to="120" <animate attributeName="top" from="0" to="120" begin="5s" dur="10s" />begin="5s" dur="10s" />

</video>

6.2.6转场效果

转场用来实现两个片段之间的切换，例如一个图片演示完了，该接着演示下一个图片，在两图片中间添加一个过渡的效果，可以使多媒体内容更加丰富，如图所示。

设置转场效果要用 transition 标记 ( 放在 head 中 ) ，转场效果大致分为 fade （淡入淡出）和 wipe （划像） 2类。

<transition id="fromBlack" type="fade" subtype="fadeFromColor" fadeColor="black" dur="5s"/>

6.2.6转场效果

1. Fade Fade类型提供了淡入淡出的效果。Fade 有 3 个 subtype 子类型： crossfade 、 fadeToColor 和

fadeFromColor 。--Crossfade 的效果是“ X切换” ，第一个画面逐渐消失的同时，

第二个画面逐渐出现

--fadeToColor 的效果是“渐隐”，第一个片段的画面逐渐消失的同时，背景画面逐渐出现

--fadeFromColor 的效果是“渐显”，第一个片段的画面逐渐出现的同时，背景画面逐渐消失；

6.2.6转场效果

在 fadeToColor 和 adeFromColor 中，背景画面的颜色可以由fadeColor属性设置，例如 fadeColor="white" 。

用法：<img src="img2.jpg" region="img" transIn="xFade"

dur="5s" fill="transition"/>

在 SMIL 中，颜色值可以用三种方法表示：（ 1 ）用系统规定的颜色名称，如白色用“ white”；（ 2 ）使用 rgb （）函数，如白色为rgb （ 255 ， 255 ， 255 ）；（ 3 ）使用十六进制的颜色常数表示，如白色为 #FFFFFF 。

6.2.6转场效果

<smil xmlns="http://www.w3.org/2001/SMIL20/Language"> <head> <layout> <root-layout width="800" height="600"

backgroundColor="white"/> <region id="img" width="800" height="600"/> </layout> <transition <transition id="fromBlack" id="fromBlack" type="fade" type="fade"

subtype="fadeFromColor" fadeColor="black" dur="5s"/>subtype="fadeFromColor" fadeColor="black" dur="5s"/><transition <transition id="toBlack" id="toBlack" type="fade" subtype="fadeToColor" type="fade" subtype="fadeToColor"

fadeColor="black" dur="5s"/>fadeColor="black" dur="5s"/><transition <transition id="xFade" id="xFade" type="fade" subtype="crossfade" type="fade" subtype="crossfade"

dur="5s"/>dur="5s"/> </head>

6.2.6转场效果

<body> <seq> <img src="img1.jpg" region="img" dur="5s"

fill="transition"/><img src="img2.jpg" region="img" transIn="xFade"

dur="5s" fill="transition"/> </seq> </body></smil>

6.2.6转场效果

2. Wipe

Wipe即为扫换 /划像，它提供了一种分画面的效果，前一个片段的画面逐渐减少，后一个片段逐渐增多直至充满整个画面。

该类型的效果很多，但不管哪一种效果，画面上都会同时出现两个片段的内容。划像包括 2 种：

SMPTE类和非 SMPTE类，它们的使用方法相似。

6.2.6转场效果

1 ） SMPTE类

SMPTE （ Society of Motion Picture and Television Engineers ，美国电影与电视工程师学会）给影视节目制作中各种特技效果（主要就是划像效果）作了编号（ SMPTE Code ），可根据这个编号设置节目中的特效。

SMPTESMPTE类包括类包括 barWipebarWipe 、、 boxWipeboxWipe 、、 fourBoxWipe fourBoxWipe 等等 36 36 个大类数百个子类。个大类数百个子类。 SMILSMIL 使用使用 SMPTESMPTE 定义的这些效果，但不使定义的这些效果，但不使用用 SMPTE SMPTE 编号。编号。

6.2.6转场效果

2 ）非 SMPTE类非 SMPTE类划像是在数字化视频制作中新出现的划像效果，它包括 Push 和 Slide 等 2大类 8 子类，下表列出了两个子类。

类子类类子类pushWipe fromLeft slideWipe fromLeft

fromRight fromRight

fromTop fromTop

fromBottom fromBottom

6.2.6转场效果

非 SMPTE类划像与传统的 SMPTE类一样都可以实现分画面效果，但又有所不同。例如，

--“slideWipe”类型中的子类“ fromLeft” 的效果是第 2 个片段从屏幕左边“滑”进画面左边“滑”进画面，从左至右逐渐覆盖第 1 个片段，如图 6-3 所示；

-- 而 barWipe类型中的子类 leftToRight 则是从左向右擦去从左向右擦去第 1个片段的画面，同时第同时第 22 个片段的画面逐渐出现个片段的画面逐渐出现在屏幕上，如图 6-4 所示。

6.2.6转场效果

图 6-3 slideWipe fromLeft效果图 6-4 barWipe leftToRight效果

6.2.6转场效果

3 ） Wipe 实现 Wipe 实现的方法与 fade 相似。<smil xmlns="http://www.w3.org/2001/SMIL20/Language"> <head> <layout> <root-layout width="800" height="600"

backgroundColor="white"/> <region id="img" width="800" height="600"/> </layout> <transition id="wipeIn" type="slideWipe" <transition id="wipeIn" type="slideWipe"

subtype="subtype="fromTopfromTop"/>"/> <transition id="wipeOut" type="waterfallWipe"/><transition id="wipeOut" type="waterfallWipe"/> </head>

6.2.6转场效果

< body> <seq> <img src="img1.jpg" region="img" dur="5s" <img src="img1.jpg" region="img" dur="5s"

fill="transition"/>fill="transition"/><img src="img2.jpg" region="img" transIn="wipeIn" <img src="img2.jpg" region="img" transIn="wipeIn"

transOut="wipeOut" dur="5s" fill="transition"/> transOut="wipeOut" dur="5s" fill="transition"/> </seq>< /body>< /smil>

此例与前面 fade 实现的方法过程基本相同，不同之处就是类型和子类型都是 Wipe效果。 type="waterfallWipe" 后面没有子类型，表示使用的是 waterfallWipe 类型的默认子类型。

6.2.6转场效果

3. 综合应用综合应用主要解决如何在多个多媒体片段上设置转场效果。 <smil xmlns="http://www.w3.org/2001/Smil20/Language"> <head> <layout> <root-layout width="800" height="600"

backgroundColor="white"/> <region id="img" width="800" height="600"/> </layout> <transition id="fromBlack" type="fade" subtype="fadeFromColor"

fadeColor="black"/> <transition id="xFade" type="fade" subtype="crossfade"/><transition id="wipeIn" type="slideWipe"/>

<transition id="push" type="snakeWipe"/>

6.2.6转场效果

</head>

<body>

<seq>

<img src="img1.jpg" transIn="fromBlack" dur="5s" fill="transition"/ >

<img src="img2.jpg" transIn="xFade" dur="5s" fill="transition"/>

<img src="img3.jpg" transIn="wipeIn" transOut="push" fill="transition" dur="8s"/>

</seq>

</body>

</smil>在此例中，设置了图片 img1.jpg 以淡入方式显示； img1 和 img2.jpg 的过渡采用了淡出淡入的效果（ transIn="xFade" ）；最后的图片 img3.jpg采用划像的方式（ transIn=" wipeIn" ）显示，结束时采用淡出的方式（ transOut="push " ）。

6.2.7字幕制作

RealText 是 RealNetworks 开发的、专门用于编写流媒体文本文件的标记性语言，可以为 SMIL 文件制作字幕， realtext 文件的后缀名是： .rt; .rt .rt; .rt 文件文件可由 smil 文件来调用。

破阵子•为陈同甫赋壮词以寄之醉里挑灯看剑，梦回吹角连营。八百里分麾下炙，五十弦翻塞外声，沙场秋点兵。马作的卢飞快，弓如霹雳弦惊。了却君王天下事，赢得生前身后名，可怜白发生。

6.2.7字幕制作

<window duration="30" bgcolor="yellow"> <window duration="30" bgcolor="yellow">

破阵子破阵子••为陈同甫赋壮词以寄之为陈同甫赋壮词以寄之 <br/><time begin="5"/><br/><time begin="5"/>醉里挑灯看剑，梦回吹角连营。醉里挑灯看剑，梦回吹角连营。 <br/><time begin="10"/><br/><time begin="10"/>八百里分麾下炙，五十弦翻塞外声，沙场秋八百里分麾下炙，五十弦翻塞外声，沙场秋

点兵。点兵。<br/><time begin="15"/><br/><time begin="15"/>马作的卢飞快，弓如霹雳弦惊。马作的卢飞快，弓如霹雳弦惊。<br/><time begin="20"/><br/><time begin="20"/> 了却君王天下事，赢得生前身后名，可怜白了却君王天下事，赢得生前身后名，可怜白

发生。发生。</window></window>

上面的代码第一行说明了采用的是通用窗口，持续时间是 30秒，背景颜色是黄色；文件开始播放后每隔 5秒，窗口中会显示一行新的文字，如图 6-5 所示；到播放持续时间 30秒结束时，如图 6-6 所示。

6.2.7字幕制作

图 6-5 第 1行文字图 6-6 30秒时的文字

6.2.7字幕制作

1. RealText 的窗口类型RealText 提供了一系列的播放窗口风格，创作者可以根据自己

的需要和使用流式文本的场合来做出选择。窗口类型通常是通过设置 <window> 标签中的 type属性来指定。

1 ）滚动窗口类型文本从下向上滚动， type="scrollingnews" ，并用 scrollrate属

性指定文本的卷动速度，默认值是 10 。2 ）提词器窗口类型当达到窗口底部时，文本会自动上移， type="teleprompter" 。

6.2.7字幕制作

3 ）纸带窗口类型纸带窗口仅包括两行文本，上面一行，下面一行，都是

从右边卷向左边， type="tickertape" 。

4 ）字幕窗口类型字幕窗口与纸带窗口相似，但只有一行在窗口中央，并

从右向左卷动， type="marquee" 。

5 ）通用窗口类型通用窗口是最灵活的窗口类型，它可以卷动，慢慢出现

并接受定时、定位或定时标签。如果窗口类型没有定制，就被定为窗口类型， type="generic" 。

6.2.7字幕制作

2. RealText 的语法1 ）窗口属性RealText 文件必须以 <windows> 标签开始，以 </windows> 标签来结束。

在 <windows> 标签可以设置相关属性，每个属性有一个值。如：<window duration="30" width="320" height="240">

如果不设置属性值，则使用默认值。其属性主要有：类型 (type) 、持续时间 (duration) 、宽度 (width) 、高度 (height) 、

背景颜色 (bgcolor) 、卷动速率 (scrollrate) 、渐出速率 (crawlrate) 、链接 (link) 、下划线 _超链接 (under_link) 、字词绕回 (wordwrap) 、循环 (loop) 、额外的空格 (extraspace) 、版本 (version) 。

6.2.7字幕制作

2 ）外观标签（ 1 ） <font> 标签<font> 标签用于设置字体，其属性包括 Color （文字颜

色）、 Bgcolor （背景颜色）、 Face （字体）、 Size （字号）、 Charset （字符集）。

<font color=“white” face=“arial” bgcolor=“black”>white Arial text on a black background.</font>

6.2.7字幕制作

（ 2 ）位置标签标签作用<br> 使后续文字换行排列<p> </p> 在文字中插入空行<ol> <ol/> 有序列表<ul> <ul/> 无序列表<li> </li> 在显示时独立成一行<hr/> 水平规则标签，但不绘制水平线<center></center> 使包含其中的文字居中排列<pre> </pre> 预定义文本格式<pos/> 定义了其后面的文字段显示的起始点，它有 x 和 y两个属

性<hr/> 相当于 2 个 <br/>标记，其作用是使其后面的文字下移 2

行

6.2.7字幕制作

（ 3 ） <time/> 标签<time/> （定时）标签用于建立 RealText 文件的时间线，即定义

文字显示开始和结束的时间。 <time/> 具有“ begin”和“ end”2 个属性，前者指定文本显示开始的时间，后者指定文本显示结束或清除文本的时间。

“begin”和“ end” 的值采用 dd:hh:mm:ss.xyz 格式，即天：小时：分：秒：毫秒。

（ 4 ） <clear/> 标签<clear/> 标签用于清除当前时间留存在用户系统缓存和窗口中所

有的文字，然后显示该标记以后的文字内容。对于没定义横向或纵向移动的文字，可在定义其开始显示的时间标记之后加上 <clear/> 标签。

6.2.7字幕制作

3. 制作带字幕的视频

制作一个简短的字幕，视频内容是 4 个动物的图片，字幕显示对应的动物名。

1 ）制作 REALTEXT 文本制作字幕的 REALTEXT 文本时，需要考虑字幕的字体、显示

区域大小、显示位置、播放时间。字幕通常都是在屏幕下边、居中显示，但是在制作

REALTEXT 文本时，只需设置居中显示，显示的高低位置在SMIL 中设置。

6.2.7字幕制作

<window type="generic" height="68" width="248" duration="12" bgcolor="white">

<center> <font face="arial" color="black" size="5"

charset="gb2312"> 狗 1

<time begin="3"/><clear/> 狗 2 <time begin="6"/><clear/> 狗 3

<time begin="9"/><clear/> 狗 4 </font>

</center></window>

REALTEXT 文件扩展名为“ .rt” ，在此例中保存为“ 4dog.rt” 。在字体设置中， charset="gb2312"表明字符集采用中文，这一点很重要，如果不设置此属性，中文文字显示将会乱码。

6.2.7字幕制作

2 ）在 SMIL 文件中打开字幕文件

REALTEXT 文件可以使用 SMIL 的“ textstream” 元素打开，其基本操作为：

（ 1 ）设置文本显示区域；（ 2 ）在 SMIL 中打开字幕文件，格式为：<textstream src="<textstream src=" 文件名文件名 " region="" region=" 文本显示区域名文本显示区域名 " " 其他属其他属

性性 />/> 。

6.2.7字幕制作

<smil xmlns="http://www.w3.org/2001/SMIL20/Language"><head><meta name="title" content="狗狗世界 "/><layout>

<root-layout width="1000" height="900" backgroundColor="white"/>

<region id="images" width="1000" height="800"/><region id="text" width="1000" height="200"

top="800" backgroundColor="white"/></layout>

注意控制字幕的位置，否则可能被图片遮挡

6.2.7字幕制作

<transition id="fadein" type="fade" subtype="fadeFromColor"

fadeColor="white"/>

<transition id="smpte1" type="barWipe" subtype="leftToRight"/><transition id="smpte2" type="barWipe"

subtype="topToBottom"/>

<transition id="smpte3" type="boxWipe" subtype="topLeft"/> </head>

6.2.7字幕制作

<body><par><par>

<textstream src="4dog.rt" region="text"/><textstream src="4dog.rt" region="text"/> <seq fillDefault="transition"><seq fillDefault="transition"> <img src="dog1.jpg" region="images" transIn="fadein" dur="4s"/><img src="dog1.jpg" region="images" transIn="fadein" dur="4s"/> <img src="dog2.jpg" region="images" transIn="smpte1" dur="4s"/><img src="dog2.jpg" region="images" transIn="smpte1" dur="4s"/> <img src="dog3.jpg" region="images" transIn="smpte2" dur="4s"/><img src="dog3.jpg" region="images" transIn="smpte2" dur="4s"/> <img src="dog4.jpg" region="images" transIn="smpte3" dur="4s"/><img src="dog4.jpg" region="images" transIn="smpte3" dur="4s"/>

</seq></seq></par></par>

</body></smil>

6.2.7字幕制作

6.3 HTML 中的 SMIL

6.3.1 添加引用

6.3.2添加 SMIL 元素

6.3.1 HTML 中添加引用

在 HTML 中使用 SMIL 标记，必须为 IE 定义一个“ time”命名空间，这样才能识别 SMIL 标记。

1. 向 <html> 标签添加命名空间定义 SMIL 使用 XML 编写，所以添加命名空间定义需要遵循

XML 的标准。命名空间属性一般放置在元素的开始标记处，其使用语法为：

xmlns:namespace-prefix="namespace“

xmlns:xhtml=http://www.w3.org/1999/xhtml

使用 SMIL 时命名空间的定义为： <html xmlns:time="urn:schemas-microsoft-com:time">

6.3.1 添加引用

2. 添加一个 <?import> 元素，以导入“ time” 命名空间

如果向标准的 HTML 元素添加 SMIL 属性，必须为 IE定义“ time”类，才能识别其属性。具体工作是添加一个定义 “ time” 类的 <style> 元素。

6.3.1 添加引用

完整代码：<html xmlns:time="urn:schemas-microsoft-com:time">

<head>

<?import namespace="time" implementation="#default#time2">

<style>.time {behavior: url(#default#time2)}</style>

</head>


在 HTML 中运行 SMIL 内容，只需为 SMIL 元素添加前缀和class 属性。

<time:seq repeatCount="indefinite">

<img class="time" src="image1.jpg" dur="4s" />

<img class="time" src="image2.jpg" dur="4s" />

</time:seq>

为“ seq” 标记添加了一个“ time”前缀，为“ imp” 元素添加了“ class="time"”属性。


编写一个 html 文件，能在 IE 中以时钟擦除（ clockWipe ）方式打开图片<html xmlns:time="urn:schemas-microsoft-com:time"><head> <?import namespace="time" implementation="#default#time2"> <style>.time {behavior: url(#default#time2)}</style></head><body> <time:transitionfilter targetelement="keyb" type="clockWipe" begin="keyb.begin" dur="4s" /> <img id="keyb" class="time" src="img1.jpg"/> </body></html>

6.4 拓展学习

贺雪晨 . 多媒体技术实用教程（第 2 版）实验指导：实验 5　使用 SMIL 实现同步流媒体课件制作，清华大学出版社， 2008 。

贺雪晨 . 多媒体技术实用教程（第 2 版）：第 4章基于流媒体的多媒体项目开发，清华大学出版社， 2008 。

SMIL 教程， http://www.w3school.com.cn/smil/index.asp 。

第 6 章 smil 语言

Documents