流媒体SMIL基础教程.doc

流媒体SMIL基础教程一、 简介随着流技术的成熟和广泛的应用，其优点我们有了深深的体会。但是，其不足之处也逐渐体现出来。问题的出现，就要求我们想办法来解决。SMIL正是针对目前流技术中的问题而提出来的。下面让我们来仔细看看SMIL。1、SMIL简历SMIL是同步多媒体集成语言（Synchronized Multimedia Integration Language）的缩写,念做smile(呵呵，这名字不错吧)。它是由3W(World Wide Web Consortium)组织规定的多媒体操纵语言。最新的SMIL版本是2001年8月推出的SMIL 2.0版本(参与制定该标准的公司奇多，J 有Compaq、Gateway、IBM、Microsoft、 RealNetworks、Oratrix等等。太多了,一口气都下不来！)。SMIL与我们网页上用的Html（超文本传输语言）的语法格式非常相似。后者主要针对普通的网络媒体文件进行操纵（文字、图片、声音、动画、视频的机械堆砌），而前者则操纵多媒体片断（对多媒体片断的有机的、智能的组合）。J 看来这东西真的不错！2、SMIL的优点？SMIL语言是一套已经规定好的而且非常简单的标记。它用来规定多媒体片断(这里多媒体的包括的范围有：声音文件、视频文件、动画、图片、文字等)在什么时候、在什么地方、以什么样的方式播放。糊涂了吗？J 我们下面一起来看看SMIL的优点（与众不同的地方！）：为了方便起见,我们把我们想要完成的作品称之为演示（presentation）。(1) 避免使用统一的包容文件格式因为我们的多媒体文件的格式的时非常多的，例如：像声音就有*.mp3、*.wav、*.ra等等；视频的格式更是多的出奇：*.mpg、 *.avi、*.mov、*.rm等等；图片的格式就更加不用说了。J 假如我们想在本地机器上直接播放或者在网络上用流式播放的方式来播放若干个文件。当然我们希望的是不要总让我们自己打开文件。而是，在上一个文件播放完成以后，就播放下一个。播放列表是个办法。但是，假如格式不一样，并且要求多个片断同时播放（例如：显示图片的同时，有解说的声音。图片和声音是两个文件），那么以前唯一可行的办法就是用对媒体的编辑软件把这些多媒体文件整合成一个文件。这就必须统一使用某种文件格式。假如你的源文件（多个多媒体片断）没有保存副本的话，在你下次要用其中的某个源文件的时候，J 你就后悔去吧！假如我们用SMIL来组织这些多媒体文件，那么可以在不对源文件进行任何修改的情形下，获得我们想要的效果（从这里来看，SMIL似乎是穿珍珠项链用的金丝线，只是把它们穿起来组成一个整体，而不会破会它们。）。当然SMIL的功能决非就这么点。接下来就是：（2）同时播放在不同地方（服务器上）的多媒体片断假如上面第一点你还可以用其他的办法做到，那么这一条恐怕你就没辙了?font face=WingdingsJ 考虑这样一个实际问题：假如我们现在想把一段电视采访的实况（视频文件）加上解说（包括声音解说（音频文件）和文字解说）。姑且假定例子中的视频文件是甲服务器上的A文件，音频文件是乙服务器上的B文件，而解说文字却是丙服务器上的C文件。传统的方法在这里就束手无策了（穷途末路了J），而SMIL可以非常轻松的做到这一点。（3）时间控制假如我们不想用整个视频文件，而只想用其中的某一部分。传统的方法中唯一可行的就是用剪辑软件来剪辑。费时费力不说，弄不好就弄巧成拙，把想要的给剪掉了！而SMIL完成这件事真的是易如反掌！看这样一个例子：设视频文件A的时间长度是10秒，我们要用的是25秒，其他部分我们不想要，只要用 SMIL规定：在该视频文件A的第二秒开始播放，播放到第五秒结束就可以了。时间控制的另外的部分是动画和转场效果。假如上面的时间控制是丝绸，那么这个就是在它上面的双面刺绣！后面我们将要具体讨论这个问题。J（4）对整个演示进行布局我们把上面提到的那个例子拿来说明这个问题：由于我们有视频、有文字我们希望什么样的布局呢？一般的情形下在一个区域(屏幕的上部)播放视频，在另一个区域显示文字（屏幕的底部）。当然，假如你认为在视频上面显示文字效果更好的话，那也是可以的。用SMIL实现这样的效果异常轻易！（5）多语言选择支持分析这样一个实际例子：我们要为某种产品作宣传，其宣传对象是多个国家的人，有英语国家的、有法语国家的、有德语国家的等等。当然最主要是讲中文的国家的人（我是中国人！）。假如我们想要所有的人都可以听懂、看懂我们的介绍，那么我们就的预备不同语言版本的媒体文件。传统的方法是让用户来选择，然后从服务器上下载相应的版本。麻烦就不用讲了。万一我们的选择老外都看不懂(有时候，我到德文、日文、朝鲜文的站点上，就不知道他们讲些什么东西L),这怎么办？假如把他们用SMIL来组织起来、规定好，那么SMIL语言将根据具体的语言设置来播放相应版本的演示。就是方便！（6）多带宽选择支持由于各个用户连接到Internet的方式不尽相同，所以其连接的速度差别也较大。为了让他们都能够看到我们的演示，我们可以制作适应不同传输速度的演示。在传统的方法中，往往要用户自己选择他的机器连接所对应的传输速度，然后播放相应得演示文件。这确实解决了一些问题。实际上，并不是所有的用户都知道自己的连接速度，就是知道了，还得选择不也是非常麻烦吗？L SMIL解决这个问题如同吹灰！播放器检测出用户的连接速度后，就同服务器“协商”，要求传输并播放相应的演示文件。方便乎？这也就是流技术中经常说的智能流（Surestream）中的一种.SMIL语言主要的优点大的方面有以上这些。相信大家在实际应用中，会体会到它更多的优点。注重：我们在创建SMIL文件以前，我们要做好以下几件事：1、下载并安装RealONE Player。目前，SMIL的版本是2.0,全面支持SMIL的版本是2.0只有 Realone Player！所以我建议大家使用它。大家可以从/上下载，国内的很多的网站上也提供下载。下载GOLD版，不要下载BETA版。2、 我们编辑SMIL源文件（程序）用的是windows附件中的记事本，希望检查一下你的记事本是否正常。当然，任何普通的文本编辑器都是可以的(ultra Edit就很不错)，但是考虑到大家学习的方便，故使用最轻易找到的记事本来编辑。3、 在我们的学习阶段，我希望我们大家不要用专门SMIL编辑器。一方面，现有的这些SMIL编辑器不太好用。另一方面，那样也不利于我们彻底理解SMIL语言。二、 SMIL基本知识下面我们看一个实际的SMIL的例子（用记事本编写就可以，注重：在英文状态下编辑。也就是不要打开中文输入法。因为SMIL播放器不熟悉中文的标点符号！）：显然，SMIL和HTML语言的语法格式非常相像！所以，假如大家对HTML熟悉的话，SMIL学习起来就很轻易。但是，二者的差别是很大的，所以假如想学的很好，大家一定要认真地学！从上面这个例子可以看出：（1） SMIL程序以开始，以结束。SMIL必须以开始，以结束，其他的一切标记都在这二者之间。这个和HTML似乎是一样的。（2） 整个程序由body和head两个部分组成其中body是必须要有的。而head部分则看实际情况。假如需要的话，我们就写。若是整个SMIL程序非常简单并且没有必要用head部分，那么，我们可以不写。从个人的经验来看，假如要写出一个效果好的演示，head部分是必不可少的！J（3） 属性和标记要求小写SMIL要求其标记和标记的属性必须小写！我们在这里不想给出属性和标记的定义。SMIL语言就是由标记组成的。每一行都是标记，而标记基本上都有属性。例如：中，img是标记，而src是属性，image1.jpg是src的属性值。注重：属性值可以大小写都可以。后面我们会碰到有些属性值要求骆驼写法。什么是骆驼写法？像fadeTocolor这样的属性值（看看，中间高，两边低，是不是非常像骆驼的驼峰？J）就是骆驼写法。（4） 有些标记必须有一斜杠作为结束标记在SMIL中，假如标记不是配对标记（例如：、等），那么，必须有一斜杠作为结束标记（例如：）。（5） 属性值必须用双引号括起来例如：src=/cpp/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） 附加信息写在之间假如我们有些关于源代码的一些说明也就是附加信息，例如版权、作者、标题、基地址等等，我们可以在中说明。其基本的格式是：，例如：。（8） 用进行注释这个标记和HTML里面的是一扬的。我们可以对我们的源文件进行注释。SMIL播放器碰到这个标记后，将跳过去而不予理睬。例如：我们可以在写源代码以前，将我们想要实现的效果在中写出来，然后在编写源代码，假如我们忘记了删除该段说明，也不会影响演示的执行。上面简单介绍了SMIL语言的基本知识，接下来要详具体细地学习SMIL！三、 SMIL具体解析SMIL语言的内容很多，我们从最常用的开始谈起。（预备好了吗？上路了！）1、 多媒体片断结构组织（1）标记我们首先看下面这个例子： 请保存（记得要用 *.smil这样的文件格式 J）并运行该源程序看看效果。我相信假如大家看到的是这样的效果：Realone player先显示 image1.jpg，然后显示image2.jpg。这就是我们这里用这对顺序播放标记规定的结果。规定的是：在中间的多媒体片断顺序播放。如下图所示。（2） 标记接下来瞧瞧这个例子： 保存-运行-看效果。Realone player同时显示image1.jpg和image2.jpg。这就是我们这里用这对并行播放标记所得到的结果。 规定的是：在中间的多媒体片断并行播放。如下图所示。 （3）和标记协同使用分析下面这个例子： 这个例子的效果是这样的：Realone player先显示image1.jpg，接下来同时显示image2.jpg和image3.jpg, 然后显示image4.jpg。为什么会这样?其中原因我想大家一定非常清楚了。我就不罗嗦了。J有了和这样两对标记后，我们对多媒体片断播放的先后顺序的控制就变得非常方便了。但是，我们上面的这些演示虽说是演示了。但是，它们的显示时间似乎没有受到我们的控制。接下来着手解决这个问题。2、 时间控制（1）dur属性请大家看看下面这段代码的效果。相信大家已经看出门道了！对了，我们这里对image1.jpg和image2.jpg的持续时间做了规定。其中image1.jpg持续时间5秒，image2.jpg持续时间10秒。（2）begin和end属性上面规定的是播放多长时间，我们也想规定在什么时候开始播放。请看下面的程序。上面的这段程序规定就是图片image1.jpg在整个演示进行2秒后，开始显示，持续的时间是5秒。对于图片的控制是这样，而我们经常需要对视频/音频的时间进行控制。下面这个例子来说明这个问题。test.rm这个视频文件（假如大家手头上没有*.rm格式文件，就用Realone player的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播放这个视频/音频的510秒这个时间断，怎么办？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）；另外的一种办法(大家都知道的)是关闭计算机！J3、 布局设计我们这里所说的布局就是在我们的屏幕上定出各个多媒体片断显示的位置（单纯的声音文件是不需要布局的！为什么？J 因为我们的耳朵听不出声音在屏幕上的什么地方；而我们的眼睛可以看到图片、动画和文字在什么地方！），准确地说是在播放器中。从前面我们并行播放的例子可以看出来，假如我们不对布局进行设计，那么显示的效果一塌糊涂！这里是SMIL的重点和精华部分之一，打起精神，Lets go！（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属性这个时候是我们的救星。修改成：在看看效果，行了吗？Jz-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）属性将上例中的换成下面这段代码，看看效果是不是有区别？我们看到的效果是完全一样的！那么属性不就多余了吗？ 那是不会的！JJ请看：a、 分时断链接考虑这样一个问题：我们要在010秒链到一个文件，1020秒链到另一个文件，该怎么办？看我们的：大家将看到的效果：播放器播放1.avi，在010秒链到1.jpg，在1020秒链到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属性将上面的代码修改为：或者：运行，看看效果。JJ我们看到左半部分有链接效果，而右半部分却没有！这是我们采用了坐标规定链接区的缘故。coords属性值的第一、二个数分别表示的是链接区的左上角点的水平（left）和垂直(top)坐标;第三、四个数分别表示的是链接区的右下角点的水平（left）和垂直(top)坐标。上面用的是像素点的绝对定义方法，下面用的是比例的相对定义方法。喜欢哪一个就看你的喜好了。（4）链接注重我们的演示最后基本上都要放到服务器上。因此，文件的位置的规定就非常重要，假如文件位置出错，那么播放器将找不到文件而不能播放。这是我们最不希望看到的！下面我们就来讨论这个问题。A、创建基地址看下面的代码：上面就是在中用附加信息的方式规定了整个smil文件的基地址为rtsp://。规定了基地址以后，我们在用该地址下的文件的时候，就只需要给出路径就可以了。例如： 这个例子中的前面的两个文件用的是基地址服务器上的文件，所以，可以之写出相对地址。但是，后面的两个文件用的是其他服务器上的文件，我们必须给出绝对地址。其中rtsp是实时流传输协议，它保证SMIL播放器正确地从流服务器上的audio文件夹下获得我的所要的文件test.mp3。554为流服务器的端口。http是超文本传输协议。它保证SMIL播放器正确地从web服务器上的 image文件夹下获得我的所要的文件welcome.jpg。说明的是该文件不在上面的基地址下，而在rtsp:/ : 554/audio/这个地方法，所我们必须修改地址。假如我们用的是本地机器硬盘上的文件就可以用src=file:/c:audiofirst.rm进行读取该文件。大家在调用文件之前，一定要弄清楚文件的位置！5、语言选择和智能流（1）语言选择假如，我们想要扩大我们演示的收看人群，那么我们的听众就会有中国人、美国人、法国人、俄罗斯等等。那么怎样才能提供这种多国语言的支持呢？Switch属性是该问题的“杀手”！请看例子： 在SMIL播放器播放该SMIL文件时，检测你的播放器设置的是什么语言，假如是美国英语（en-us），那么就从服务器下载 English.rm播放；假如是简体中文(zh-cn)，那么就从服务器下载Chinese.rm文件播放。你可以设置很多的国家的选项。当然你的语言的版本也就很多了。J下面我们给出经常使用的一些语言的代码。代码 语言zh-cn 中文 (中华人民共和国)en-us 英语 (美国)fr 法语 (标准法语)de 德育（标准德语）it 意大利语（标准意大利语）ja 日语es 西班牙语（西班牙）（2）智能流（surestream）用户的联网速度是不尽相同的。有的可能只有50K左右，有的可能有几百K。假如我们满足了高速用户的要求，那么低速用户可能由于速度太慢而不能收看。假如我们满足了低速用户的要求，那么高速用户看到的效果就打了不少的折扣，浪费了高速的带宽。怎么办？ 当用户的联网速度大于2