SMIL 2.0 基础教程(2)

二、 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>开始，以</smil>结束。

SMIL必须以<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>< /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> 

 

上面的这段程序规定就是图片image1.jpg在整个演示进行2秒后，开始显示，持续的时间是5秒。对于图片的控制是这样，而我们常常需要对视频/音频的时间进行控制。下面这个例子来说明这个问题。

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这个区域显示。
该例子布局效果如下图：

上面我们对多媒体片断显示窗口的采用的是绝对定义的方法。多媒体片断显示窗口也可以用相对定义的方法来定义。例如：
<region id="vedio_region" top="10%" left="10%" width="80%" height="80%"/>
上面的比例是相对基本显示窗口而言的。这样的定义方法更为直观。
（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这个文件。这里我们就成功的创建了一个很简单的链 接。<a></a>属性就是用于链接标记，href表示的是所要链接的文件。这种方法非常简单，我们就不做过多的介绍。
如果我们要创建更加复杂的链接，我们就要用到下面的这个属性。
（2）< anchor>属性
将上例中的< body>< /body>换成下面这段代码，看看效果是不是有区别？

< body>
< video src="videotest.rm" region="videoregion">
< anchor href="1.rm"/>
< /video>
< /body> 

 

我们看到的效果是完全一样的！那么<anchor>属性不就多余了吗？ 那是不会的！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"/>代码修改为：
< 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></smil>解释：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文件的内容是英文的，那么一切都非常好。但是，如果是中文的话，显示的就是一对乱码。由于个人的水平 有限，到目前为止，依然没有找到中文显示的解决办法。