SMIL详细解析

最新推荐文章于 2019-06-03 11:02:43 发布

kiki113

最新推荐文章于 2019-06-03 11:02:43 发布

阅读量4.4k

点赞数 1

分类专栏： jscript/html 文章标签： image video 服务器 layout 语言 audio

本文链接：https://blog.csdn.net/kiki113/article/details/1669998

版权

jscript/html 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

三、 SMIL详细解析

SMIL语言的内容很多，我们从最常用的开始谈起。（准备好了吗？上路了！）

1、多媒体片断结构组织

（1）<seq></seq>标记

我们首先看下面这个例子：

<smil>

<head>

</head>

<body>

<seq>

</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>

</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>

<par>

</par>

</seq>
</body>

</smil>

这个例子的效果是这样的：Realone player先显示image1.jpg，接下来同时显示image2.jpg和image3.jpg, 然后显示image4.jpg。为什么会这样?其中原因我想大家一定非常清楚了。我就不罗嗦了。J

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

2、时间控制

（1）dur属性

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

</head>

<body>

<seq>

</seq>

</body>

</smil>

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

（2）begin和end属性

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

<smil>

<head>

</head>

<body>

</body>

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

<smil>

<head>

</head>

<body>

</body>

</smil>

test.rm这个视频文件（如果大家手头上没有*.rm格式文件，就用Realone player的firstrun.rm或者找个*.avi的也可以。是文件名要写对！）在整个演示开始5秒后开始播放，在整个演示播放40秒以后，就结束播放。实际的播放时间是：40-5=35秒。但是，一般情形下，我们的视频总在一个组中，这时候，他就的服从组的时间了。我们那下面的这个例子来解释这问题。

<smil>

<body>

</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>

</body>
</smil>

clip-begin和clip-end属性是用内部时间控制的属性。这里的内部指的就是多媒体片断自己的时间线（timeline）。前者规定在什么地方开始播放，后者规定放到什么地方结束播放。为了更清楚的理解这些时间控制，我们看下面的这个例子：

<smil>

<body>

<par>

</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>

</smil>

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

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

（5）repeat属性

如果我们希望我们演示中的某个片断或者全部的片断重复播放若干次（姑且设为2次）。那么我们可以后用repeat属性来实现该效果。分析下面这个例子：

</body>

</smil>

上面这个例子就是让test.rm播放两次。如果我们想让某个片断一直播放下去（网络光广告上可以考虑这个），那么repeat="indefinite"就可以了。当然，想要它停下来的一种方法是按下播放器stop（停止）键（在网页插件中就是右键菜单中的stop）；另外的一种办法(大家都知道的)是关闭计算机！J

3、布局设计

我们这里所说的布局就是在我们的屏幕上定出各个多媒体片断显示的位置（单纯的声音文件是不需要布局的！为什么？J 因为我们的耳朵听不出声音在屏幕上的什么地方；而我们的眼睛可以看到图片、动画和文字在什么地方！），准确地说是播放器中。从前面我们并行播放的例子可以看出来，如果我们不对布局进行设计，那么显示的效果一塌糊涂！这里是SMIL的重点和精华部分之一，打起精神，Let’s go！

（1）定义基本显示窗口

看下面的代码：

<smil>

<head>

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

<root-layout width="300" height="300" background-color="yellow" />

</layout>

</head>
<body>

<par>

</par>

</body>

</smil>

说明：

a、<region id="vedio_region" left="5" top="5" width="290" height="260" />定义多媒体片断显示窗口，它的id是vedio_region，这个id是必须要的（在SMIL中，有的id号是可以省略的，但是我们建议大家都写上，这样很容易把整个MIL文件的脉络弄清楚）！离顶端和左段各有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、使用恰当的多媒体片断和窗口的匹配方式。

看小面这段代码：

它的意思就是窗口vedio_region以meet方式显示多媒体片断。

fit属性的属性值有hidden、meet、fill、scroll和slice四个。其中hidden是默认的属性值。
Hidden表示保持多媒体片断的尺寸不变，从窗口的左上角开始显示。如果多媒体片断尺寸比窗口的尺寸小，那么空白的地方将用背景色填充。如果多媒体片断尺寸比窗口的尺寸大，那么多媒体片断超出窗口部分被裁去，不被显示。个人不喜欢这样的方式。

meet表示在保持多媒体片断宽/高比例不变的情况下，对多媒体片断的尺寸进行缩放。从左上角开始显示，缩放到高度和宽度中的一个尺寸等于窗口的相应的尺寸，而另外的一个小于窗口的相应的尺寸。空白处用背景色填充。我喜欢这个！

fill表示缩放多媒体片断使得其大小正好和窗口的大小一致。如果多媒体片断的宽/高比例和窗口的宽/高比例不等，那么多媒体片断就会变形，非常难看。强烈建议不要采用这种方式！

scroll表示对多媒体片断的尺寸不做什么修改，它以正常的尺寸大小显示。但是，如果多媒体片断的尺寸超出了窗口的尺寸，那么将会相应出现水平或者垂直滚动条。该种发式适合于长时间的多媒体片断的显示。如果多媒体片断的显示时间很短，建议不要使用！slice表示在保持多媒体片断宽/高比例不变的情况下，对多媒体片断的尺寸进行缩放。从左上角开始显示，缩放到高度和宽度中的一个尺寸等于窗口的相应的尺寸，而另外的一个大于窗口的相应的尺寸。超出的不分被裁去而不显示。

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

（4）z-index属性

先试运行下面的源程序：

<smil>

<head>

<root-layout width="300" height="300" />

</layout>

</head>

<body>

<par>

</par>

</body>

</smil>

我想大家已经看出来了：我们这里想做的就是那种电视的画中画效果。但是在实际显示的时候，我们的小画面有时候被大画面所覆盖。我的苦心也白费了。z-index属性这个时候是我们的救星。

修改<region id="vedio1_region" width="300" height="300" />

成：<region id="vedio1_region" width="300" height="300" z-index="0"/>

在看看效果，行了吗？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>

<root-layout 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>

大家将看到的效果：播放器播放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>

<root-layout width="400" height="300"/>

</layout>

</head>

<body>

</video>

</body>

</smil>

第一个SMIL文件，取名test11app.smil

<smil>

<head>

<root-layout width="400" height="300"/>

</layout>

</head>

<body>

</body>

</smil>

大家一定看出来了！我就是在test11app.smil中为我们要链接的那部分内容设上id,然后在test11.smil中的链接中用“#”来指向该标记id。应用的很多的时候是组内内容。我们把test11app.smil修改为：

<body>

</par>

</body>

到这里，链接可以说已经很完美了。但是，如果要锦上添花，那么下面这个属性是必不可少的。

（3）coords属性

将上面的<anchor href="1.rm"/>代码修改为：

或者：

运行，看看效果。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>

</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>

</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>

</body>

</smil>

当用户的联网速度大于250kbps时，播放器就从服务器下载highspeed.rm播放；如果用户的联网速度大于80kbps小于250kbps时，播放器就从服务器下载midspeed.rm播放；如果用户的联网速度大于20kbps小于80kbps时，播放器就从服务器下载lowspeed.rm播放。所谓的“众口难调”在各位的手里就变得如此简单！J

四、后记

感谢大家一路陪伴！我们终于完成了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文件的内容是英文的，那么一切都非常好。但是，如果是中文的话，显示的就是一对乱码。由于个人的水平有限，到目前为止，依然没有找到中文显示的解决办法。

如果大家在学习和制作中碰到问题，请到http://www.5dmedia.com/bbs上的流技术区发帖子，我们一起讨论学习SMIL

kiki113

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
SMIL详细解析

三、 SMIL详细解析 SMIL语言的内容很多，我们从最常用的开始谈起。（准备好了吗？上路了！）1、多媒体片断结构组织（1）标记我们首先看下面这个例子：请保存（记得要用*.smil这样的文件格式 J）并运行该源程序看看效果。我相信如果大家看到的是这样的效果：Realone player先显示image1.jpg，然后显示ima
复制链接

扫一扫