SMIL详细解析.docx
《SMIL详细解析.docx》由会员分享,可在线阅读,更多相关《SMIL详细解析.docx(22页珍藏版)》请在冰豆网上搜索。
![SMIL详细解析.docx](https://file1.bdocx.com/fileroot1/2022-11/26/1a96c59f-d3b6-4260-8e5e-0d0dea38c284/1a96c59f-d3b6-4260-8e5e-0d0dea38c2841.gif)
SMIL详细解析
SMIL详细解析
SMIL语言的内容很多,我们从最常用的开始谈起。
(准备好了吗?
上路了!
)
1、 多媒体片断结构组织
(1)标记
我们首先看下面这个例子:
请保存(记得要用*.smil这样的文件格式J)并运行该源程序看看效果。
我相信如果大家看到的是这样的效果:
Realoneplayer先显示image1.jpg,然后显示image2.jpg。
这就是我们这里用这对顺序播放标记规定的结果。
规定的是:
在中间的多媒体片断顺序播放。
如下图所示。
(2)标记
接下来瞧瞧这个例子:
保存->运行->看效果。
Realoneplayer同时显示image1.jpg和image2.jpg。
这就是我们这里用这对并行播放标记所得到的结果。
规定的是:
在中间的多媒体片断并行播放。
如下图所示。
(3)和标记协同使用
分析下面这个例子:
这个例子的效果是这样的:
Realoneplayer先显示image1.jpg,接下来同时显示image2.jpg和image3.jpg,然后显示image4.jpg。
为什么会这样?
其中原因我想大家一定非常清楚了。
我就不罗嗦了。
☺
有了和这样两对标记后,我们对多媒体片断播放的先后顺序的控制就变得非常方便了。
但是,我们上面的这些演示虽说是演示了。
但是,它们的显示时间好像没有受到我们的控制。
接下来着手解决这个问题。
2、 时间控制
(1)dur属性
请大家看看下面这段代码的效果。
相信大家已经看出门道了!
对了,我们这里对image1.jpg和image2.jpg的持续时间做了规定。
其中image1.jpg持续时间5秒,image2.jpg持续时间10秒。
(2)begin和end属性
上面规定的是播放多长时间,我们也想规定在什么时候开始播放。
请看下面的程序。
上面的这段程序规定就是图片image1.jpg在整个演示进行2秒后,开始显示,持续的时间是5秒。
对于图片的控制是这样,而我们常常需要对视频/音频的时间进行控制。
下面这个例子来说明这个问题。
test.rm这个视频文件(如果大家手头上没有*.rm格式文件,就用Realoneplayer的firstrun.rm或者找个*.avi的也可以。
但是文件名要写对!
)在整个演示开始5秒后开始播放,在整个演示播放40秒以后,就结束播放。
实际的播放时间是:
40-5=35秒。
但是,一般情形下,我们的视频总在一个组中,这时候,他就的服从组的时间了。
我们那下面的这个例子来解释这问题。
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,问题就很简单了!
请看:
clip-begin和clip-end属性是用内部时间控制的属性。
这里的内部指的就是多媒体片断自己的时间线(timeline)。
前者规定在什么地方开始播放,后者规定放到什么地方结束播放。
为了更清楚的理解这些时间控制,我们看下面的这个例子:
看看下面这个示意图:
显然,首先是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属性来规定它的显示状态。
简单的说就是我们是清屏还是冻结屏幕。
看下面这个例子:
假设test.rm的长度是20秒,那么我们这里规定的就是:
在test.rm播放终了以后,屏幕上显示的是test.rm的最后一帧(通俗的说就是最后一幅画面),显示的时间是30-20=10秒;如果是图片的话,那么显示就是图片。
Fill属性只有remove和freeze两个,默认的值为remove。
建议大家在演示的最后的一个多媒体片断上用冻结(freeze),以防止屏幕上空空如也!
J
(5)repeat属性
如果我们希望我们演示中的某个片断或者全部的片断重复播放若干次(姑且设为2次)。
那么我们可以后用repeat属性来实现该效果。
分析下面这个例子:
上面这个例子就是让test.rm播放两次。
如果我们想让某个片断一直播放下去(网络光广告上可以考虑这个),那么repeat="indefinite"就可以了。
当然,想要它停下来的一种方法是按下播放器stop(停止)键(在网页插件中就是右键菜单中的stop);另外的一种办法(大家都知道的)是关闭计算机!
J
3、 布局设计
我们这里所说的布局就是在我们的屏幕上定出各个多媒体片断显示的位置(单纯的声音文件是不需要布局的!
为什么?
J因为我们的耳朵听不出声音在屏幕上的什么地方;而我们的眼睛可以看到图片、动画和文字在什么地方!
),准确地说是在播放器中。
从前面我们并行播放的例子可以看出来,如果我们不对布局进行设计,那么显示的效果一塌糊涂!
这里是SMIL的重点和精华部分之一,打起精神,Let’sgo!
(1) 定义基本显示窗口
看下面的代码:
说明:
a、 布局标记必须以开头,以结束,其他具体的标记都在这中间。
必须放在
之间。
b、 root-layout标记表明的是规定最基本的、最底层的窗口。
其他一切窗口都在它的基础上划分出来。
c、 width="300"表明窗口宽为300个像素点;height="200"表明窗口高为200个像素点;background-color="black"表明窗口的背景颜色为黑色。
这里也可以用颜色代码。
例如:
background-color="#000000"。
个人更喜欢代码,因为颜色代码表达颜色众多,但是代码不直观。
(2) 定义多媒体片断显示窗口
分析下面这段源程序:
说明:
a、定义多媒体片断显示窗口,它的id是vedio_region,这个id是必须要的(在SMIL中,有的id号是可以省略的,但是我们建议大家都写上,这样很容易把整个SMIL文件的脉络弄清楚)!
离顶端和左段各有5个像素点的距离(注意:
这里的坐标是相对基本显示窗口而言!
)。
窗口宽为290个像素点;高为260个像素点。
下面的显示窗口的定义和这个是一样的。
b、声明了多媒体片断test.rm在vedio_region这个区域播放;声明了文本文件test.txt在vedio_region这个区域显示。
该例子布局效果如下图:
上面我们对多媒体片断显示窗口的采用的是绝对定义的方法。
多媒体片断显示窗口也可以用相对定义的方法来定义。
例如:
上面的比例是相对基本显示窗口而言的。
这样的定义方法更为直观。
(3) fit属性
在实际制作演示的时候,我们碰到了这样的问题:
我们定义的显示窗口的大小和我们的多媒体片断的尺寸大小不一致,或大了或小了。
相信大家也会碰到这样的问题。
解决的办法有:
a、 修改窗口的大小(但是,很多时候我们没有办法修改。
因为,如果修改的话,那么会影响其他窗口的显示。
相应的其它窗口也得修改。
实际情况是:
我们很多的不同尺寸的多媒体片断都可能在同一个窗口中显示!
)。
b、 使用恰当的多媒体片断和窗口的匹配方式。
看小面这段代码:
它的意思就是窗口vedio_region以meet方式显示多媒体片断。
fit属性的属性值有hidden、meet、fill、scroll和slice四个。
其中hidden是默认的属性值。
Hidden表示保持多媒体片断的尺寸不变,从窗口的左上角开始显示。
如果多媒体片断尺寸比窗口的尺寸小,那么空白的地方将用背景色填充。
如果多媒体片断尺寸比窗口的尺寸大,那么多媒体片断超出窗口部分被裁去,不被显示。
个人不喜欢这样的方式。
meet表示在保持多媒体片断宽/高比例不变的情况下,对多媒体片断的尺寸进行缩放。
从左上角开始显示,缩放到高度和宽度中的一个尺寸等于窗口的相应的尺寸,而另外的一个小于窗口的相应的尺寸。
空白处用背景色填充。
我喜欢这个!
fill表示缩放多媒体片断使得其大小正好和窗口的大小一致。
如果多媒体片断的宽/高比例和窗口的宽/高比例不等,那么多媒体片断就会变形,非常难看。
强烈建议不要采用这种方式!
scroll表示对多媒体片断的尺寸不做什么修改,它以正常的尺寸大小显示。
但是,如果多媒体片断的尺寸超出了窗口的尺寸,那么将会相应出现水平或者垂直滚动条。
该种发式适合于长时间的多媒体片断的显示。
如果多媒体片断的显示时间很短,建议不要使用!
slice表示在保持多媒体片断宽/高比例不变的情况下,对多媒体片断的尺寸进行缩放。
从左上角开始显示,缩放到高度和宽度中的一个尺寸等于窗口的相应的尺寸,而另外的一个大于窗口的相应的尺寸。
超出的不分被裁去而不显示。
各个匹配的效果请参见下图(省去scroll效果)
(4)z-index属性
先试运行下面的源程序:
我想大家已经看出来了:
我们这里想做的就是那种电视的画中画效果。
但是在实际显示的时候,我们的小画面有时候被大画面所覆盖。
我的苦心也白费了。
z-index属性这个时候是我们的救星。
修改
成:
在看看效果,行了吗?
J
z-index属性规定相互重叠的窗口的显示次序。
数字大那么显示就在上面。
这个很容易理解,我们就不说太多。
但是以下几点要注意:
a、root层窗口总是在最后一层,并且不用z-index属性。
b、z-index属性值可以是负数。
当然它就的排在0以后。
c、 没有重叠的窗口可以使用同一z-index属性值。
4、 链接制作
传统的流媒体的最大的一个弊端是没有交互性(Interaction)。
现在如日中天的flash本质上就是一种可交互性的流!
由此可见可交互性的流的市场潜力。
而SMIL是解决大部分流媒体交互性的最好的工具!
这部分要求大家必须掌握,如果没有的话,那么我们学习SMIL就失去了意义。
因为这里是SMIL的主要特色(与其他的视频编辑软件相比较),就好像指针是C语言的特色一样。
(1)标记
运行下面这个程序:
正常情况下,我们看到播放器播放videotest.rm,如果我们把鼠标放到正在播放的videotest.rm上面,鼠标将有指针形状变为小手形状。
单击鼠标左键,播放器播放将停止播放videotest.rm而播放1.rm这个文件。
这里我们就成功的创建了一个很简单的链接。
属性就是用于链接标记,href表示的是所要链接的文件。
这种方法非常简单,我们就不做过多的介绍。
如果我们要创建更加复杂的链接,我们就要用到下面的这个属性。
(2)属性
将上例中的
换成下面这段代码,看看效果是不是有区别?
我们看到的效果是完全一样的!
那么属性不就多余了吗?
那是不会的!
☺☺请看:
a、 分时断链接
考虑这样一个问题:
我们要在0~10秒链到一个文件,10~20秒链到另一个文件,该怎么办?
看我们的:
大家将看到的效果:
播放器播放1.avi,在0~10秒链到1.jpg,在10~20秒链到videotest.rm。
警告:
dur、clip-begin和clip-end这里不支持!
B、链接部分SMIL
我们的链接可以链接的文件很多,几乎所用的多媒体片断都可以。
*.smil和*.html也可以。
但是,下面我们要讨论的是如何链接部分SMIL。
请看例子。
第一个SMIL文件,取名test11.smil
第一个SMIL文件,取名test11app.smil
大家一定看出来了!
我就是在test11app.smil中为我们要链接的那部分内容设上id,然后在test11.smil中的链接中用“#”来指向该标记id。
应用的很多的时候是组内内容。
我们把test11app.smil修改为:
到这里,链接可以说已经很完美了。
但是,如果要锦上添花,那么下面这个属性是必不可少的。
(3)coords属性
将上面的代码修改为:
或者: