现在的位置: 首页 > 综合 > 正文

SMIL详细解析

2013年04月12日 ⁄ 综合 ⁄ 共 3866字 ⁄ 字号 评论关闭

三、 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.jpgimage2.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.jpgimage3.jpg, 然后显示image4.jpg。为什么会这样?其中原因我想大家一定非常清楚了。我就不罗嗦了。J

有了<seq></seq><par></par>这样两对标记后,我们对多媒体片断播放的先后顺序的控制就变得非常方便了。但是,我们上面的这些演示虽说是演示了。但是,它们的显示时间好像没有受到我们的控制。接下来着手解决这个问题。

2  时间控制

1dur属性

请大家看看下面这段代码的效果。

<smil>
<head>

 </head>

 <body>

<seq>

<img src="image1.jpg" dur="5s"/>

<img src="image2.jpg" dur="10s"/ >

</seq>

 </body>

</smil>

相信大家已经看出门道了!对了,我们这里对image1.jpgimage2.jpg的持续时间做了规定。其中image1.jpg持续时间5image2.jpg持续时间10秒。

2beginend属性

上面规定的是播放多长时间,我们也想规定在什么时候开始播放。请看下面的程序。

<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 playerfirstrun.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秒!大家在以后写程序的时候要注意这个问题。

3clip-beginclip-end属性

考虑这样一种效果:

我们只要test.rm播放这个视频/音频的5~10秒这个时间断,怎么办???J有了clip-beginclip-end,问题就很简单了!请看:

<smil>

 <body>

<video src="test.rm" clip-begin="5s" clip-end="10s"/>

 </body>
</smil>

clip-beginclip-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

445

s

10.45

10450毫秒

正确的时间写法是: hh:mm:ss.xyhh表示小时;mm表示分钟;ss表示秒;x表示1/10秒;y表示1/100秒。例如:begin="01:40.0"表示的是140秒处开始,而begin="01:40"表示的是1小时40分处开始。真的注意呀J

时间控制非常重要,它直接影响我们演示的效果。而我们上面讲的这部分是最重要的,所以大家一定要理解上面的各个时间概念及其含义。

4fill属性

当演示中的某个片断播放完成以后,我们可以用fill属性来规定它的显示状态。简单的说就是我们是清屏还是冻结屏幕。看下面这个例子:

<smil>

 <body>

<video src="test.rm" dur="30s" fill="freeze"/></body>

</smil>

假设test.rm的长度是20秒,那么我们这里规定的就是:在test.rm播放终了以后,屏幕上显示的是test.rm的最后一帧(通俗的说就是最后一幅画面),显示的时间是30-20=10秒;如果是图片的话,那么显示就是图片。

Fill属性只有removefreeze两个,默认的值为remove。建议大家在演示的最后的一个多媒体片断上用冻结(freeze),以防止屏幕上空空如也!J

5repeat属性

如果我们希望我们演示中的某个片断或者全部的片断重复播放若干次(姑且设为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>

抱歉!评论已关闭.