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秒。对于图片的控制是这样，而我们常常需要对视频/音频的时间进行控制。下面这个例子来说明这个问题。