[精华] “笑”傲流媒体―SMIL基础教程

Fri, 19 May 2006 07:04:00 GMT

一、简介

随着流技术的成熟和广泛的应用，其优点我们有了深深的体会。但是，其不足之处也逐渐体现出来。问题的出现，就要求我们想办法来解决。SMIL正是针对目前流技术中的问题而提出来的。下面让我们来仔细看看SMIL。

1、SMIL简历

   SMIL是同步多媒体集成语言（Synchronized Multimedia Integration Language）的缩写,念做smile(呵呵，这名字不错吧)。它是由3W(World Wide Web Consortium)组织规定的多媒体操纵语言。最新的SMIL版本是2001年8月推出的SMIL 2.0版本(参与制定该标准的公司奇多，J 有Compaq、Gateway、IBM、Microsoft、RealNetworks、Oratrix等等。太多了,一口气都下不来！！！)。SMIL与我们网页上用的HTML（超文本传输语言）的语法格式非常相似。后者主要针对普通的网络媒体文件进行操纵（文字、图片、声音、动画、视频的机械堆砌），而前者则操纵多媒体片断（对多媒体片断的有机的、智能的组合）。J 看来这东西真的不错！

2、SMIL的优点？

    SMIL语言是一套已经规定好的而且非常简单的标记。它用来规定多媒体片断(这里多媒体的包括的范围有：声音文件、视频文件、动画、图片、文字等)在什么时候、在什么地方、以什么样的方式播放。糊涂了吗？J 我们下面一起来看看SMIL的优点（与众不同的地方！）：

为了方便起见,我们把我们想要完成的作品称之为演示（presentation）。

(1)  避免使用统一的包容文件格式

因为我们的多媒体文件的格式的时非常多的，例如：像声音就有*.mp3、*.wav、*.ra等等；视频的格式更是多的出奇：*.mpg、*.avi、*.mov、*.rm等等；图片的格式就更加不用说了。J 如果我们想在本地机器上直接播放或者在网络上用流式播放的方式来播放若干个文件。当然我们希望的是不要总让我们自己打开文件。而是，在上一个文件播放完成以后，就播放下一个。播放列表是个办法。但是，如果格式不一样，并且要求多个片断同时播放（例如：显示图片的同时，有解说的声音。图片和声音是两个文件），那么以前唯一可行的办法就是用对媒体的编辑软件把这些多媒体文件整合成一个文件。这就必须统一使用某种文件格式。如果你的源文件（多个多媒体片断）没有保存副本的话，在你下次要用其中的某个源文件的时候，J 你就后悔去吧！如果我们用SMIL来组织这些多媒体文件，那么可以在不对源文件进行任何修改的情形下，获得我们想要的效果（从这里来看，SMIL好像是穿珍珠项链用的金丝线，只是把它们穿起来组成一个整体，而不会破会它们。）。当然SMIL的功能决非就这么点。接下来就是：
（2）同时播放在不同地方（服务器上）的多媒体片断

如果上面第一点你还可以用其他的办法做到，那么这一条恐怕你就没辙了?font face="Wingdings">;J 考虑这样一个实际问题：假如我们现在想把一段电视采访的实况（视频文件）加上解说（包括声音解说（音频文件）和文字解说）。姑且假定例子中的视频文件是甲服务器上的A文件，音频文件是乙服务器上的B文件，而解说文字却是丙服务器上的C文件。传统的方法在这里就束手无策了（穷途末路了J），而SMIL可以非常轻松的做到这一点。

（3）时间控制

如果我们不想用整个视频文件，而只想用其中的某一部分。传统的方法中唯一可行的就是用剪辑软件来剪辑。费时费力不说，弄不好就弄巧成拙，把想要的给剪掉了！而SMIL完成这件事真的是易如反掌！看这样一个例子：设视频文件A的时间长度是10秒，我们要用的是2~5秒，其他部分我们不想要，只要用SMIL规定：在该视频文件A的第二秒开始播放，播放到第五秒结束就可以了。

时间控制的另外的部分是动画和转场效果。如果上面的时间控制是丝绸，那么这个就是在它上面的双面刺绣！后面我们将要详细讨论这个问题。J

（4）对整个演示进行布局

我们把上面提到的那个例子拿来说明这个问题：由于我们有视频、有文字我们希望什么样的布局呢？一般的情形下在一个区域(屏幕的上部)播放视频，在另一个区域显示文字（屏幕的底部）。当然，如果你认为在视频上面显示文字效果更好的话，那也是可以的。用SMIL实现这样的效果异常容易！

（5）多语言选择支持

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

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

SMIL语言主要的优点大的方面有以上这些。相信大家在实际应用中，会体会到它更多的优点。

注意：我们在创建SMIL文件以前，我们要做好以下几件事：

1、下载并安装Realone Player。目前，SMIL的版本是2.0,全面支持SMIL的版本是2.0只有Realone Player！所以我建议大家使用它。大家可以从http://www.realnetworks.com/上下载，国内的很多的网站上也提供下载。下载GOLD版，不要下载BETA版。

2、  我们编辑SMIL源文件（程序）用的是windows附件中的记事本，希望检查一下你的记事本是否正常。当然，任何普通的文本编辑器都是可以的(ultra Edit就很不错)，但是考虑到大家学习的方便，故使用最容易找到的记事本来编辑。

3、  在我们的学习阶段，我希望我们大家不要用专门SMIL编辑器。一方面，现有的这些SMIL编辑器不太好用。另一方面，那样也不利于我们彻底理解SMIL语言。
二、 SMIL基本知识

下面我们看一个实际的SMIL的例子（用记事本编写就可以，注意：在英文状态下编辑。也就是不要打开中文输入法。因为SMIL播放器不认识中文的标点符号！）：

< smil>;

< head>;

  < meta name="copyright" content="Your Name" />;

  < layout>;

   < !-- layout 标记 -->;

  < /layout>;

< /head>;

< body>;

  < !—媒体标记 -->;

  < img src="image1.jpg"/>;

< /body>;

< /smil>;

    显然，SMIL和HTML语言的语法格式非常相像！所以，如果大家对HTML熟悉的话，SMIL学习起来就很容易。但是，二者的差别是很大的，所以如果想学的很好，大家一定要认真地学！

从上面这个例子可以看出：

（1）       SMIL程序以;开始，以;结束。

SMIL必须以;开始，以;结束，其他的一切标记都在这二者之间。这个和HTML好像是一样的。

（2）       整个程序由body和head两个部分组成

其中body是必须要有的。而head部分则看实际情况。如果需要的话，我们就写。若是整个SMIL程序非常简单并且没有必要用head部分，那么，我们可以不写。从个人的经验来看，如果要写出一个效果好的演示，head部分是必不可少的！J
（3）       属性和标记要求小写

SMIL要求其标记和标记的属性必须小写！

我们在这里不想给出属性和标记的定义。SMIL语言就是由标记组成的。每一行都是标记，而标记基本上都有属性。例如：< img src="image1.jpg"/>;中，img是标记，而src是属性，image1.jpg是src的属性值。注意：属性值可以大小写都可以。后面我们会碰到有些属性值要求骆驼写法。什么是骆驼写法？像fadeTocolor这样的属性值（看看，中间高，两边低，是不是非常像骆驼的驼峰？J）就是骆驼写法。

（4）       有些标记必须有一斜杠作为结束标记

在SMIL中，如果标记不是配对标记（例如：< smil>;< /smil>;、< head>;< /head>;、< body>;< /body>;等），那么，必须有一斜杠作为结束标记（例如：< img src="image1.jpg"/>;）。

（5）       属性值必须用双引号括起来

例如：src="image1.jpg"。注意：SMIL文件中出现的文件名必须和服务器上的文件名一致，其路径一定要正确。否则，SMIL播放器找不到该文件。

（6）       SMIL文件的拓展名为*.smil或者*.smi

我们必须以*.smil或者*.smi的拓展名来保存SMIL文件。这样SMIL播放器才能认出SMIL文件，以采用正确的解码方式解码、播放。为了防止与其它类型文件的拓展名冲突，强烈建议采用*.smil这个拓展名！注意：文件名必须是以数字、字母开始的，中间可以有下划线，不可以有空格。例如：test_one.smil可以，而test one.smil坚决不行！如果你喜欢的话，可以用我们上面讲的骆驼写法testOne.smil。注意：上面的例子大家可以原版复制，保存为testOne.smil。并且找一个图片放到testOne.smil同一个文件夹下，并将image1.jpg改成你的图片的名字（后面如果没有特殊说明，都得这么做），就可以用Realone player打开该源程序，看看我们的第一个演示的效果了。J

（7）       附加信息写在< head>;< /head>;之间

如果我们有些关于源代码的一些说明也就是附加信息，例如版权、作者、标题、基地址等等，我们可以在< head>;< /head>;中说明。其基本的格式是：< meta name=" " content=" " />;，例如：< meta name="author " content="litterone " />;< meta name="title " content="I want to learn SMI:L " />;。

（8）       用< !-- … -->;进行注释

这个标记和HTML里面的是一扬的。我们可以对我们的源文件进行注释。SMIL播放器遇到这个标记后，将跳过去而不予理睬。例如：我们可以在写源代码以前，将我们想要实现的效果在< !-- … -->;中写出来，然后在编写源代码，假如我们忘记了删除该段说明，也不会影响演示的执行。

上面简单介绍了SMIL语言的基本知识，接下来要详详细细地学习SMIL！

三、 SMIL详细解析SMIL语言的内容很多，我们从最常用的开始谈起。（准备好了吗？上路了！）1、  多媒体片断结构组织（1）< seq>;< /seq>;标记我们首先看下面这个例子：< smil>; < head>; < /head>; < body>;< seq>;< img src="image1.jpg"/>;< img src="image2.jpg"/>;< /seq>; < /body>;< /smil>;请保存（记得要用*.smil这样的文件格式 J）并运行该源程序看看效果。我相信如果大家看到的是这样的效果：Realone player先显示image1.jpg，然后显示image2.jpg。这就是我们这里用< seq>;< /seq>;这对顺序播放标记规定的结果。< seq>;< /seq>;规定的是：在< seq>;< /seq>;中间的多媒体片断顺序播放。如下图所示。         （2） ;< /par>;标记
接下来瞧瞧这个例子：< smil>; < head>; < /head>; < body>;< par>;< img src="image1.jpg"/>;< img src="image2.jpg"/>;< /par>; < /body>;< /smil>;保存->;运行->;看效果。Realone player同时显示image1.jpg和image2.jpg。这就是我们这里用< par>;< /par>;这对并行播放标记所得到的结果。< par>;< /par>;规定的是：在< par>;< /par>;中间的多媒体片断并行播放。如下图所示。（3）< seq>;< /seq>;和< par>;< /par>;标记协同使用分析下面这个例子：< smil>; < head>; < /head>; < body>;< seq>; < img src="image1.jpg"/>;    < par>;      < img src="image2.jpg"/>;      < img src="image3.jpg"/>;    < /par>;    < img src="image4.jpg"/>;< /seq>; < /body>;< /smil>;
这个例子的效果是这样的：Realone player先显示image1.jpg，接下来同时显示image2.jpg和image3.jpg, 然后显示image4.jpg。为什么会这样?其中原因我想大家一定非常清楚了。我就不罗嗦了。J
有了< seq>;< /seq>;和< par>;< /par>;这样两对标记后，我们对多媒体片断播放的先后顺序的控制就变得非常方便了。但是，我们上面的这些演示虽说是演示了。但是，它们的显示时间好像没有受到我们的控制。接下来着手解决这个问题。
2、  时间控制
（1）dur属性
请大家看看下面这段代码的效果。
< smil>;
< head>;
< /head>;
< body>;
< seq>;
< img src="image1.jpg" dur="5s"/>;
< img src="image2.jpg" dur="10s"/ >;
< /seq>;
< /body>;
< /smil>;
相信大家已经看出门道了！对了，我们这里对image1.jpg和image2.jpg的持续时间做了规定。其中image1.jpg持续时间5秒，image2.jpg持续时间10秒。
（2）begin和end属性
上面规定的是播放多长时间，我们也想规定在什么时候开始播放。请看下面的程序。
< smil>;
< head>;
< /head>;
< body>;
< img src="image1.jpg" begin="2" dur="5s"/>;
< /body>;
< /smil>;
这个例子的效果是这样的：Realone player先显示image1.jpg，接下来同时显示image2.jpg和image3.jpg, 然后显示image4.jpg。为什么会这样?其中原因我想大家一定非常清楚了。我就不罗嗦了。J
有了< seq>;< /seq>;和< par>;< /par>;这样两对标记后，我们对多媒体片断播放的先后顺序的控制就变得非常方便了。但是，我们上面的这些演示虽说是演示了。但是，它们的显示时间好像没有受到我们的控制。接下来着手解决这个问题。
2、  时间控制
（1）dur属性
请大家看看下面这段代码的效果。
< smil>;
< head>;
< /head>;
< body>;
< seq>;
< img src="image1.jpg" dur="5s"/>;
< img src="image2.jpg" dur="10s"/ >;
< /seq>;
< /body>;
< /smil>;
相信大家已经看出门道了！对了，我们这里对image1.jpg和image2.jpg的持续时间做了规定。其中image1.jpg持续时间5秒，image2.jpg持续时间10秒。
（2）begin和end属性
上面规定的是播放多长时间，我们也想规定在什么时候开始播放。请看下面的程序。
< smil>;
< head>;
< /head>;
< body>;
< img src="image1.jpg" begin="2" dur="5s"/>;
< /body>;
< /smil>;

上面的这段程序规定就是图片image1.jpg在整个演示进行2秒后，开始显示，持续的时间是5秒。对于图片的控制是这样，而我们常常需要对视频/音频的时间进行控制。下面这个例子来说明这个问题。
< smil>;
< head>;
< /head>;
< body>;
< video src="test.rm" begin="5s" end="40s"/>;
< /body>;
< /smil>;
test.rm这个视频文件（如果大家手头上没有*.rm格式文件，就用Realone player的firstrun.rm或者找个*.avi的也可以。但是文件名要写对！）在整个演示开始5秒后开始播放，在整个演示播放40秒以后，就结束播放。实际的播放时间是：40-5=35秒。但是，一般情形下，我们的视频总在一个组中，这时候，他就的服从组的时间了。我们那下面的这个例子来解释这问题。
< smil>;
< body>;
< seq dur="5">;
< img src="image1.jpg" begin="2" dur="10"/>;
< /seq>;
< /body>;
< /smil>;
image1.jpg所在的组的持续时间为5秒，而image1.jpg自己要求持续10秒，这是不行的。实际上image1.jpg的显示时间只有5-2=3秒！大家在以后写程序的时候要注意这个问题。
（3）clip-begin和clip-end属性
考虑这样一种效果：
我们只要test.rm播放这个视频/音频的5~10秒这个时间断，怎么办？？？J有了clip-begin和clip-end，问题就很简单了！请看：

< smil>;  < body>;< video src="test.rm" clip-begin="5s" clip-end="10s"/>; < /body>;< /smil>;clip-begin和clip-end属性是用内部时间控制的属性。这里的内部指的就是多媒体片断自己的时间线（timeline）。前者规定在什么地方开始播放，后者规定放到什么地方结束播放。为了更清楚的理解这些时间控制，我们看下面的这个例子：< smil>;  < body>;< par>;  < audio src="testone.rm" clip-begin="5" dur="10s"/>;  < audio src="testtwo.rm" begin="7s" clip-begin="2s"clip-end="15s"/>;  < /par>; < /body>;< /smil>;看看下面这个示意图：显然，首先是testone.rm从自己的5秒处开始播放，播放7秒以后，testtwo.rm从自己的2秒处开始与testone.rm一起播放，testone.rm播放到自己得15秒处停止播放，testone.rm播放了15-5=10秒。testtwo.rm播放到自己得15秒处停止播放，testone.rm播放了15-2=13秒。图中灰色（黄色）部分表示播放的部分。
接下来我们对时间的表示方法做个说明（默认的时间是秒，所以"2s" 、"2.0s"和"2"都是一样的）：
时间标记指代例子说明
h 小时 1.5h 1小时30分钟
min 分钟 4.75min 4分45秒
s 秒 10.45 10秒450毫秒
正确的时间写法是： hh:mm:ss.xy。hh表示小时；mm表示分钟；ss表示秒；x表示1/10秒；y表示1/100秒。例如：begin="01:40.0"表示的是1分40秒处开始，而begin="01:40"表示的是1小时40分处开始。真的注意呀J。
时间控制非常重要，它直接影响我们演示的效果。而我们上面讲的这部分是最重要的，所以大家一定要理解上面的各个时间概念及其含义。
（4）fill属性
当演示中的某个片断播放完成以后，我们可以用fill属性来规定它的显示状态。简单的说就是我们是清屏还是冻结屏幕。看下面这个例子：
< smil>;
< body>;
< video src="test.rm" dur="30s" fill="freeze"/>;
< /body>;
< /smil>;
假设test.rm的长度是20秒，那么我们这里规定的就是：在test.rm播放终了以后，屏幕上显示的是test.rm的最后一帧（通俗的说就是最后一幅画面），显示的时间是30-20=10秒；如果是图片的话，那么显示就是图片。
Fill属性只有remove和freeze两个，默认的值为remove。建议大家在演示的最后的一个多媒体片断上用冻结（freeze），以防止屏幕上空空如也！J
（5）repeat属性
如果我们希望我们演示中的某个片断或者全部的片断重复播放若干次（姑且设为2次）。那么我们可以后用repeat属性来实现该效果。分析下面这个例子：

< smil>;
< body>;
< vedio src="test.rm" dur="1min" repeat="2"/>;
< /body>;
< /smil>;
上面这个例子就是让test.rm播放两次。如果我们想让某个片断一直播放下去（网络光广告上可以考虑这个），那么repeat="indefinite"就可以了。当然，想要它停下来的一种方法是按下播放器stop（停止）键（在网页插件中就是右键菜单中的stop）；另外的一种办法(大家都知道的)是关闭计算机！J
3、    布局设计
我们这里所说的布局就是在我们的屏幕上定出各个多媒体片断显示的位置（单纯的声音文件是不需要布局的！为什么？J 因为我们的耳朵听不出声音在屏幕上的什么地方；而我们的眼睛可以看到图片、动画和文字在什么地方！），准确地说是在播放器中。从前面我们并行播放的例子可以看出来，如果我们不对布局进行设计，那么显示的效果一塌糊涂！这里是SMIL的重点和精华部分之一，打起精神，Let’s go！
（1）       定义基本显示窗口
看下面的代码：
< smil>;
< head>;
  < layout>;
   < root-layout width="300" height="200" background-color="white" />;
  < /layout>;
< /head>;
< body>;
< /body>;
< /smil>;
说明：a、  布局标记必须以< layout>;开头，以< /layout>;结束，其他具体的标记都在这中间。< layout>;< /layout>;必须放在< head>;< /head>;之间。
b、  root-layout标记表明的是规定最基本的、最底层的窗口。其他一切窗口都在它的基础上划分出来。
c、  width="300" 表明窗口宽为300个像素点；height="200"表明窗口高为200个像素点；background-color="black"表明窗口的背景颜色为黑色。这里也可以用颜色代码。例如：background-color="#000000"。个人更喜欢代码，因为颜色代码表达颜色众多，但是代码不直观。
（2）       定义多媒体片断显示窗口
分析下面这段源程序：
< smil>;
< head>;
  < layout>;
   < root-layout width="300" height="300" background-color="yellow" />;
   < region id="vedio_region" left="5" top="5" width="290" height="260" />;
< region id="text_region" left="5" top="270" width="290" height="25" background-color="white"/>;
  < /layout>;
< /head>;
< body>;
< par>;
  < vedio src="test.rm" region="vedio_region" />;
  < text src="test.txt" region="text_region"/>;
< /par>;
< /body>;
< /smil>;
说明：
a、< region id="vedio_region" left="5" top="5" width="290" height="260" />;定义多媒体片断显示窗口，它的id是vedio_region，这个id是必须要的（在SMIL中，有的id号是可以省略的，但是我们建议大家都写上，这样很容易把整个SMIL文件的脉络弄清楚）！离顶端和左段各有5个像素点的距离（注意：这里的坐标是相对基本显示窗口而言！）。窗口宽为290个像素点；高为260个像素点。下面的显示窗口的定义和这个是一样的。
b、< vedio src="test.rm" region="vedio_region" />;声明了多媒体片断test.rm在vedio_region这个区域播放；< text src="test.txt" region="text_region"/>;声明了文本文件test.txt在vedio_region这个区域显示。
该例子布局效果如下图：

    上面我们对多媒体片断显示窗口的采用的是绝对定义的方法。多媒体片断显示窗口也可以用相对定义的方法来定义。例如：
;
上面的比例是相对基本显示窗口而言的。这样的定义方法更为直观。
（3）       fit属性
在实际制作演示的时候，我们碰到了这样的问题：我们定义的显示窗口的大小和我们的多媒体片断的尺寸大小不一致，或大了或小了。相信大家也会碰到这样的问题。解决的办法有：

a、  修改窗口的大小（但是，很多时候我们没有办法修改。因为，如果修改的话，那么会影响其他窗口的显示。相应的其它窗口也得修改。实际情况是：我们很多的不同尺寸的多媒体片断都可能在同一个窗口中显示！）。
b、  使用恰当的多媒体片断和窗口的匹配方式。
看小面这段代码：
< region id="vedio_region" width="80%" height="80%" fit="meet"/>;
它的意思就是窗口vedio_region以meet方式显示多媒体片断。
fit属性的属性值有hidden、meet、fill、scroll和slice四个。其中hidden是默认的属性值。
Hidden表示保持多媒体片断的尺寸不变，从窗口的左上角开始显示。如果多媒体片断尺寸比窗口的尺寸小，那么空白的地方将用背景色填充。如果多媒体片断尺寸比窗口的尺寸大，那么多媒体片断超出窗口部分被裁去，不被显示。个人不喜欢这样的方式。
meet表示在保持多媒体片断宽/高比例不变的情况下，对多媒体片断的尺寸进行缩放。从左上角开始显示，缩放到高度和宽度中的一个尺寸等于窗口的相应的尺寸，而另外的一个小于窗口的相应的尺寸。空白处用背景色填充。我喜欢这个！
fill表示缩放多媒体片断使得其大小正好和窗口的大小一致。如果多媒体片断的宽/高比例和窗口的宽/高比例不等，那么多媒体片断就会变形，非常难看。强烈建议不要采用这种方式！
scroll表示对多媒体片断的尺寸不做什么修改，它以正常的尺寸大小显示。但是，如果多媒体片断的尺寸超出了窗口的尺寸，那么将会相应出现水平或者垂直滚动条。该种发式适合于长时间的多媒体片断的显示。如果多媒体片断的显示时间很短，建议不要使用！
slice表示在保持多媒体片断宽/高比例不变的情况下，对多媒体片断的尺寸进行缩放。从左上角开始显示，缩放到高度和宽度中的一个尺寸等于窗口的相应的尺寸，而另外的一个大于窗口的相应的尺寸。超出的不分被裁去而不显示。

各个匹配的效果请参见下图（省去scroll效果）

（4）z-index属性
先试运行下面的源程序：
< smil>;
< head>;
  < layout>;
   < root-layout width="300" height="300" />;
   < region id="vedio1_region" width="300" height="300" />;
   < region id="vedio2_region" left="270" top="270" width="30" height="30" />;
  < /layout>;
< /head>;
< body>;
< par>;
  < vedio src="testone.rm" region="vedio1_region"/>;
  < vedio src="testtwo.rm" region="vedio2_region" />;
< /par>;
< /body>;
< /smil>;

我想大家已经看出来了：我们这里想做的就是那种电视的画中画效果。但是在实际显示的时候，我们的小画面有时候被大画面所覆盖。我的苦心也白费了。z-index属性这个时候是我们的救星。
修改< region id="vedio1_region" width="300" height="300" />;
   < region id="vedio2_region" left="270" top="270" width="30" height="30" />;
成：< region id="vedio1_region" width="300" height="300"  z-index="0"/>;
< region id="vedio2_region" left="270" top="270" width="30" height="30" z-index="1" />;
在看看效果，行了吗？J
z-index属性规定相互重叠的窗口的显示次序。数字大那么显示就在上面。这个很容易理解，我们就不说太多。但是以下几点要注意：
a、root层窗口总是在最后一层，并且不用z-index属性。
b、z-index属性值可以是负数。当然它就的排在0以后。
c、  没有重叠的窗口可以使用同一z-index属性值。
4、    链接制作
传统的流媒体的最大的一个弊端是没有交互性（Interaction）。现在如日中天的flash本质上就是一种可交互性的流！由此可见可交互性的流的市场潜力。而SMIL是解决大部分流媒体交互性的最好的工具！这部分要求大家必须掌握，如果没有的话，那么我们学习SMIL就失去了意义。因为这里是SMIL的主要特色（与其他的视频编辑软件相比较），就好像指针是C语言的特色一样。
（1）< a>;< /a>;标记
运行下面这个程序：
< smil>;
< head>;
< layout>;
      < root-layout width="300" height="300"/>;
      < region id="videoregion" top="0" left="0" width="300" height="300"/>;
< layout>;
< /head>;
< body>;

< a href="1.rm">;
   < video src="videotest.rm" region="videoregion"/>;
< /a>;
< /body>;
< /smil>;
正常情况下，我们看到播放器播放videotest.rm，如果我们把鼠标放到正在播放的videotest.rm上面，鼠标将有指针形状变为小手形状。单击鼠标左键，播放器播放将停止播放videotest.rm而播放1.rm这个文件。这里我们就成功的创建了一个很简单的链接。;;属性就是用于链接标记，href表示的是所要链接的文件。这种方法非常简单，我们就不做过多的介绍。
如果我们要创建更加复杂的链接，我们就要用到下面的这个属性。
（2）< anchor>;属性
将上例中的< body>;< /body>;换成下面这段代码，看看效果是不是有区别？
< body>;
   < video src="videotest.rm" region="videoregion">;
< anchor href="1.rm"/>;
   < /video>;
< /body>;
我们看到的效果是完全一样的！那么;属性不就多余了吗？那是不会的！JJ请看：
a、  分时断链接
考虑这样一个问题：我们要在0~10秒链到一个文件，10~20秒链到另一个文件，该怎么办？看我们的：
< body>;
< video src="1.avi" region="videoregion">;
  < anchor href="1.jpg" begin="0s" end="10s" >;
  < anchor href="videotest.rm" begin="10s" end="20s" />;
< /video>;
大家将看到的效果：播放器播放1.avi，在0~10秒链到1.jpg，在10~20秒链到videotest.rm。警告：dur、clip-begin和clip-end这里不支持！
B、链接部分SMIL
   我们的链接可以链接的文件很多，几乎所用的多媒体片断都可以。*.smil和*.html也可以。但是，下面我们要讨论的是如何链接部分SMIL。请看例子。
第一个SMIL文件，取名test11.smil
< smil>;
< head>;
< layout>;
      < root-layout width="400" height="300"/>;
      < region id="videoregion" top="0" left="0" width="400" height="300" fit="meet"/>;
< /layout>;
< /head>;
< body>;
< video src="1.avi" region="videoregion">;
  < anchor href="test11app.smil#testlink"/>;
< /video>;
< /body>;
< /smil>;
第一个SMIL文件，取名test11app.smil
< smil>;
< head>;
< layout>;
      < root-layout width="400" height="300"/>;
      < region id="videoregion" top="0" left="0" width="400" height="300" fit="meet"/>;
< /layout>;
< /head>;
< body>;
< video id="testlink" src="1.avi" clip-begin="150" region="videoregion"/>;
< /body>;
< /smil>;

大家一定看出来了！我就是在test11app.smil中为我们要链接的那部分内容设上id,然后在test11.smil中的链接中用“#”来指向该标记id。应用的很多的时候是组内内容。我们把test11app.smil修改为：
< body>;
< par id="testlink">;
< video src="1.avi" clip-begin="150" region="videoregion"/>;
< /par>;
< /body>;
到这里，链接可以说已经很完美了。但是，如果要锦上添花，那么下面这个属性是必不可少的。
（3）coords属性
将上面的;代码修改为：
< anchor href="1.rm" coords="0， 0，150，300"/>;
或者：
   < anchor href="1.rm" coords="0％， 0％，50％，100％"/>;
运行，看看效果。JJ我们看到左半部分有链接效果，而右半部分却没有！这是我们采用了坐标规定链接区的缘故。coords属性值的第一、二个数分别表示的是链接区的左上角点的水平（left）和垂直(top)坐标;第三、四个数分别表示的是链接区的右下角点的水平（left）和垂直(top)坐标。上面用的是像素点的绝对定义方法，下面用的是比例的相对定义方法。喜欢哪一个就看你的喜好了。
（5）链接注意
我们的演示最后基本上都要放到服务器上。因此，文件的位置的规定就非常重要，如果文件位置出错，那么播放器将找不到文件而不能播放。这是我们最不希望看到的！下面我们就来讨论这个问题。
A、创建基地址

看下面的代码：
< head>;
     < meta name="base" content="rtsp://abc.5dmedia.com/"/>;
  < /head>;
上面就是在< head>;< /head>;中用附加信息的方式规定了整个smil文件的基地址为rtsp://abc.5dmedia.com/。规定了基地址以后，我们在用该地址下的文件的时候，就只需要给出路径就可以了。例如：
< body>;
  < video src="video/first.rm"/>;
  < video src=" video /second.rm"/>;
  < audio src="rtsp:// abc.mysite.com:554/audio/test.mp3"/>;
< img src="http// www.5dmedia.com/image/welcome.jpg"/>;
< /body>;
这个例子中的前面的两个文件用的是基地址服务器上的文件，所以，可以之写出相对地址。但是，后面的两个文件用的是其他服务器上的文件，我们必须给出绝对地址。其中rtsp是实时流传输协议，它保证SMIL播放器正确地从流服务器abc.mysite.com上的audio文件夹下获得我的所要的文件test.mp3。554为流服务器的端口。http是超文本传输协议。它保证SMIL播放器正确地从web服务器www.5dmedia.com上的image文件夹下获得我的所要的文件welcome.jpg。< audio src="rtsp:// abc.mysite.com:554/audio/test.mp3"/>;说明的是该文件不在上面的基地址下，而在rtsp:// abc.mysite.com:554/audio/这个地方法，所我们必须修改地址。
如果我们用的是本地机器硬盘上的文件就可以用src="file:/c:\audio\first.rm"进行读取该文件。
大家在调用文件之前，一定要弄清楚文件的位置！

5、语言选择和智能流
（1）语言选择
    如果，我们想要扩大我们演示的收看人群，那么我们的听众就会有中国人、美国人、法国人、俄罗斯等等。那么怎样才能提供这种多国语言的支持呢？
Switch属性是该问题的“杀手”！
请看例子：
< smil>;
< body>;
  < switch>;
   < video src="English.rm" system-language="en-us"/>;
   < video src="Chinese.rm" system-language="zh-cn"/>;
  < /switch>;
< /body>;
< /smil>;
在SMIL播放器播放该SMIL文件时，检测你的播放器设置的是什么语言，如果是美国英语（en-us），那么就从服务器下载English.rm播放；如果是简体中文(zh-cn)，那么就从服务器下载Chinese.rm文件播放。你可以设置很多的国家的选项。当然你的语言的版本也就很多了。J下面我们给出经常使用的一些语言的代码。
代码语言
zh-cn 中文 (中华人民共和国)
en-us 英语 (美国)
fr 法语 (标准法语)
de 德育（标准德语）
it 意大利语（标准意大利语）
ja 日语
es 西班牙语（西班牙）

2）智能流（surestream）
用户的联网速度是不尽相同的。有的可能只有50K左右，有的可能有几百K。如果我们满足了高速用户的要求，那么低速用户可能由于速度太慢而不能收看。如果我们满足了低速用户的要求，那么高速用户看到的效果就打了不少的折扣，浪费了高速的带宽。怎么办？
< smil>;
< body>;
  < switch>;
  < vedio src="highspeed.rm" system-bitrate="250000"/>;
  < vedio src="midspeed.rm" system-bitrate="80000"/>;
  < vedio src="lowspeed.rm" system-bitrate="20000"/>;
  < /switch>;
< /body>;
< /smil>;
当用户的联网速度大于250kbps时，播放器就从服务器下载highspeed.rm播放；如果用户的联网速度大于80kbps小于250kbps时，播放器就从服务器下载midspeed.rm播放；如果用户的联网速度大于20kbps小于80kbps时，播放器就从服务器下载lowspeed.rm播放。所谓的“众口难调”在各位的手里就变得如此简单！J
上面讲的就是智能流（surestream）的本质实现方法！我们下面看一个复杂的一点的例子。
< body>;
< switch>;
  < par system-bitrate="225000">;
< !--联网速度大于250kbps时,播放该组-->;
    < audio src="audio/music1.rm"/>;
    < video src="video/video1.rm" region="videoregion"/>;
    < text src="words/narration.txt" region="textregion"/>;
  < /par>;
  < par system-bitrate="80000">;
    < !--联网速度大于80000bps而小于250000bps时,播放该组-->;
    < audio src="audio/music2.rm"/>;
    < video src="video/video2.rm" region="videoregion"/>;
    < textstream src="words/narration.rt" region="textregion"/>;
  < /par>;
  < par system-bitrate="20000">;
    < !--联网速度大于20kbps而小于80kbps时,播放该组-->;
    < audio src="audio/music3.rm"/>;
   < video src="video/video3.rm" region="videoregion"/>;
    < text src="words/narration.txt" region="textregion"/>;
  < /par>;
< /switch>;
< /body>;

(3)语言与速度的同时检测  < body>;  < switch>;  < !—简体中文并且速度大于28kbps -->; < text src=" Chinese_14000.txt" system-language="zh-cn" system-bitrate="28000" />;  < !--简体中文并且速度大于14kbps -->;  < text src="Chinese_28000.txt" system-language="zh-cn" system-bitrate="14000" />;  < !—美国英文并且速度大于28kbps -->;  < text src="english_14000.txt" system-language="en-us" system-bitrate="28000" />;  < !--美国英文并且速度大于14kbps -->;  < text src="english_28000.txt" system-language="en-us" system-bitrate="14000" />;  < /switch>; < /body>;（4）演示速度的控制上面我们讲的是在演示文件已经创建好的条件下进行的。那么，我们怎样制作好多媒体片断。下面是我们的建议：a、  用Realproducer或者其他的压缩工具制作流文件时，选择正确的压缩比例。为高速用户准备的文件的压缩比可以小一些，对于低速用户准备的文件的压缩比要大一点。b、  在网络传输过程中，视频占用的带宽是最多的，音频次之，接下来是动画、图片，文字是最少的。所以，我们充分考虑我们的演示的结构。例如：如果并行播放多个视频，这显然是不合适的。我们可以用图片来替代一部分视频效果。
c、  我们在传输中不能全部占用用户的带宽，必须留出一部分给用户浏览网页或者是干其它用途的。JJJ我们很多的年轻人当然是用于QQ 聊天！下表列出了我们的建议。
用户速度建议最大流占用带宽
14.4 Kbps modem 10 Kbps
28.8 Kbps modem 20 Kbps
56 Kbps modem 34 Kbps
64 Kbps ISDN 45 Kbps
112 Kbps dual ISDN 80 Kbps
Corporate LAN 150 Kbps
256 Kbps DSL/cable modem 225 Kbps
384 Kbps DSL/cable modem 350 Kbps
512 Kbps DSL/cable modem 450 Kbps
在我们以后的制作中。上面的这些知识是非常实用的。大家一定要努力掌握！
6、  动画效果
我们前面学习的内容是SMIL1.0规定的。在SMIL2.0中添加了不少的内容，其中动画就是其中一个。很多的国外的教程上把flash文件*.swf归为这一类。我们不能同意这样的分类方法。我们认为把这样已经做好的动画该归为视频一类。真正的动画（从SMIL2.0规范中可以看出来）是有SMIL规定的并有SMIL播放器解释产生的动画。
    从实际情况来看，动画效果主要是针对图片产生的。所以，我们在这里用图片来做例子。其他的多媒体的制作方法是类似的。有兴趣的GG、JJ、DD和MM可以自己做做。
（1）             运动动画
为先睹为快，请在Realone player中运行下面的程序：
  < smil xmlns="http://www.w3.org/2000/SMIL20/CR/Language">;
  < head>;
    < layout>;
      < root-layout width="800" height="600"/>;
      < region id="Images" left="0" width="800" height="600"/>;
    < /layout>;
  < /head>;
  < body>;
          < img region="Images" src="g03.jpg" dur="6s">;
          < animateMotion from="0 0" to="600 400" dur="4s"/>;
          < /img>;
< /body>;
< /smil>;

解释：a、我们这里用到的是SMIL2.0规范中的规定的内容的。所以，在第一行里（xmlns="http://www.w3.org/2000/SMIL20/CR/Language"）我们必须声明我们所用的规范。不然的话，播放器可能不能正确解码、播放。
b、  animateMotion标记声明的是我们所要的动画类型。注意：这里就是我们所说的骆驼写法，还记得吧！JJ
c、  from="0 0" to="600 400"属性及其属性值声明的是动画从坐标点（0，0）运动到坐标点（600，400）。这里我们也可以写成：< animateMotion from="0，0" to="600，400" dur="4s"/>;
d、  dur="4s"属性及其属性值声明的是动画在4秒内完成。在我们这个例子中，图片的存在时间是6秒，那么动画完成后，将有2秒钟的时间静止不动。如果图片的存在时间小于动画存在时间，那么动画运动到半路上就的停止，这样的情况是该避免的。
（2）缩放动画
           下面我们看看另外的一种动画形式：缩放动画。先看效果！J
< smil xmlns="http://www.w3.org/2000/SMIL20/CR/Language">;
  < head>;
    < layout>;
      < root-layout width="800" height="600"/>;
      < region id="Images" left="0" width="800" height="600"  fit="meet"/>;
        < /layout>;
  < /head>;
  < body>;
    < img region="Images" dur="10s" src="g03.jpg" width="400" height="320">;
     < animate attributeName="height" from="320" to="160" fill="freeze" dur="10s"/>;
   < /img>;
< /body>;
< /smil>;
解释：animate attributeName="height" from="320" to="160"声明了动画的类型和参数。大家看了效果以后，在结合上面的参数的意义，各参数是什么意思我们也就不用多讲了。J

7、  转场效果   首先解释一下什么是转场效果。我们的演示中多媒体片断是很多的，不可避免的会有两个片断之间的切换。例如：一个图片演示完了，该接着演示下一个图片，两图片中间是有一个过渡的。这个过渡我们就称谓转场效果。如果我们不设置转场效果，那么，过渡的效果肯定不好。LSMIL中的转场效果大致分为wipe和fade两类。（１）   fade类型从名字就可以看出，这个是淡入淡出的效果。先睹为快！J　请看例子！< smil xmlns="http://www.w3.org/2001/SMIL20/Language">;< head>;< transition id="fade1" type="fade" subtype="fadeToColor" dur="4s" />;     < transition id="fade2" type="fade" subtype="fadeFromColor" dur="4s" />; < /head>;< body>;< img src="g04.jpg" dur="10s" transIn="fade2" transOut="fade1"/>;< /body>;;解释：a、transition声明我们要设置转场效果。id="fade1"设置了该转场效果的id号。id号必须设置。type="fade"设置了转场效果的基本类型为fade。 subtype="fadeToColor"设置了转场效果的具体类型（子类型）为fadeToColor（注意这里又是我们提到的骆驼写法！）。dur="4s"设置了该场效果完成的时间。b、transIn="fade2"设置了图片g04.jpg显示时采用转场效果fade2； transOut="fade1"规定图片g04.jpg完成显示时采用转场效果fade１。c、fade只有三个子类型。上面我们用了２个。还有一个是crossfade，这个也是缺省设置。
（２）   wipe类型
wipe为擦去类型。该类型的效果很多很多。我们这里所说的wipe只是他们的总称（注意wipe不能作为type的属性值，而是它的子类作为type的属性值，子类的子类作为subtype的属性值！J谁让它的属性值这么多！！！）。具体的有barWipe、boxWipe、fourBoxWipe等36大类!!!不管它有多少类，先看看怎么弄。请看例子：
< smil xmlns="http://www.w3.org/2001/SMIL20/Language">;
  < head>;
    < transition id="wipe1" type="slideWipe" subtype="fromTop"/>;
    < transition id="wipe2" type="waterfallWipe"/>;
  < /head>;
  < body>;
   < img  src="g03.jpg" transIn="wipe1" transOut="wipe2" dur="5s"/>;
  < /body>;
< /smil>;
解释：a、JJJ和上面的写法基本上是一致的！
      b、type="waterfallWipe"后面没有子类型表示使用的是waterfallWipe类型的默认子类型。
（３）   综合应用
我们上面都只是用在单个多媒体片断上的转场效果。下面看看在多个多媒体片断上怎样设置转场效果。还得看例子：J
< smil xmlns="http://www.w3.org/2001/SMIL20/Language">;
< head>;
< layout>;
< root-layout width="400" height="300"/>;
< /layout>;
< transition id="fade" type="fade" subtype="fadeToColor" fadeColor="green" dur="4s"/>;
< transition id="fade1" type="fade" subtype="fadeFromColor" fadeColor="red" dur="4s"/>;
< transition id="fade2" type="fade" subtype="crossfade" dur="2s"/>;
< transition id="push" type="snakeWipe" dur="4" />;
< /head>;
< body>;
< seq>;
    < img dur="5s" src="g06.jpg"  transIn="fade1" fill="transition"/>;
< img dur="4s" src="g05.jpg"  transIn="fade2" fill="transition"/>;
< img dur="4s" src="g06.jpg"  transIn="fade2" fill="transition"/>;
< img dur="4s" src="g05.jpg"  transIn="push" transOut="fade"/>;
< /seq>;
< /body>;
< /smil>;
解释：a、fadeColor="green"设置了谈出谈入色为绿色（green）。在这里表示的就是从当前的多媒体片断渐变为绿色。下面的fadeColor="red"则表示从红色渐变为当前的多媒体片断（如果是图片则变为图片，如是视频则变为第一帧）。
b、fill="transition"表示的是最后的完成效果有下面的转场效果来决定。
c、最后一个就不能用fill="transition"了。想想，它就是最后一个了，上哪里去找下面的转场效果呢？

四、后记感谢大家一路陪伴！我们终于完成了SMIL基础性学习。SMIL的内容是很丰富的，由于作者的水平、时间和精力有限，研究的不是很深。这次真的体会到学习一种新的语言的难度比学习软件的应用难度大很多，而这是不可以同日而语的。我们所提到的是非常基础、非常重要、非常实用的部分。如果大家有兴趣想进一步研究，可以看看SMIL2.0规范。它位于http://www.w3c.org/下，大家可以下载下来看看。下面该交待的是SMIL目前支持的媒体对象：animation 、video、 audio、 img、 text和 textstream。它们所能支持的格式由我们选择的播放器来决定。下面我们要谈到这个问题。虽然，SMIL的优点很多，但是缺点也是有的。１、播放器太少目前全面支持SMIL2.0的播放器只有Realone player。而支持SMIL1.0的播放器却很多。例如：Quicktime（苹果（apple　Inc.）公司）,soja(一个用java语言编写的播放器，体积很小，效果不错。嵌在网页上是在好不过了)。这个问题我想不久就会得到解决。２、各播放器不太兼容我们在*.smil文件中用的多媒体的格式必须考虑到播放器所能支持的格式。例如：Realone player支持的流文本（stream text）格式*.rt非常不错。可是，很少有其他的播放器支持该中格式。Quicktime支持*.mov格式，这种格式也是非常棒的。然而，支持它的播放器寥寥无几。相信随着各个播放平台的功能的拓展，这个问题也会得到解决。３、制作的工具匮乏目前我们没有发现好的制作软件。oratrix公司的GRiNS Editor for RealONE　　　　　　用起来并不方便。而Flution则好像是个人业余写的程序，用起来比GRiNS Editor for RealONE舒服些，但是感觉也不是很好。如果演示不是非常复杂，可以用Real slideshow来做，效果不错，使用也非常简单。如果愈来愈多的公司来写这样的编辑软件，那么将来肯定会有很多好的SMIL:编辑软件。就像今天的html的Dreamweaver一样强。4、中文的支持能力差   我们上面提到可以使用*.txt文件。如果*.txt文件的内容是英文的，那么一切都非常好。但是，如果是中文的话，显示的就是一对乱码。由于个人的水平有限，到目前为止，依然没有找到中文显示的解决办法。

花 2006-05-19 15:04 发表评论

BlogJava-花-随笔分类-Smil Design

[精华] “笑”傲流媒体―SMIL基础教程