??xml version="1.0" encoding="utf-8" standalone="yes"?>国产亚洲精品免费视频播放,亚洲AⅤ永久无码精品AA,亚洲网址在线观看你懂的http://www.tkk7.com/hua/category/11323.html即世界明天毁灭Q我也要在今天种下我的葡萄树?zh-cnFri, 02 Mar 2007 03:31:24 GMTFri, 02 Mar 2007 03:31:24 GMT60[_֍] “笑”傲媒体―SMIL基础教程http://www.tkk7.com/hua/archive/2006/05/19/47061.html?/dc:creator>?/author>Fri, 19 May 2006 07:04:00 GMThttp://www.tkk7.com/hua/archive/2006/05/19/47061.htmlhttp://www.tkk7.com/hua/comments/47061.htmlhttp://www.tkk7.com/hua/archive/2006/05/19/47061.html#Feedback0http://www.tkk7.com/hua/comments/commentRss/47061.htmlhttp://www.tkk7.com/hua/services/trackbacks/47061.html一、 简?

随着技术的成熟和广泛的应用Q其优点我们有了深深的体会。但是,其不之处也逐渐体现出来。问题的出现Q就要求我们惛_法来解决。SMIL正是针对目前技术中的问题而提出来的。下面让我们来仔l看看SMIL?

1、SMIL?

   SMIL是同步多媒体集成语言QSynchronized Multimedia Integration LanguageQ的~写,念做smile(呵呵Q这名字不错?。它是由3W(World Wide Web Consortium)l织规定的多媒体操纵语言。最新的SMIL版本?001q?月推出的SMIL 2.0版本(参与制定该标准的公司奇多QJ 有Compaq、Gateway、IBM、Microsoft、RealNetworks、Oratrix{等。太多了,一口气都下不来Q!Q?。SMIL与我们网上用的HTMLQ超文本传输语言Q的语法格式非常怼。后者主要针Ҏ通的|络媒体文gq行操纵Q文字、图片、声韟뀁动甅R视频的机械堆砌Q,而前者则操纵多媒体片断(对多媒体片断的有机的、智能的l合Q。J 看来q东西真的不错!

2、SMIL的优点?

    SMIL语言是一套已l规定好的而且非常单的标记。它用来规定多媒体片?q里多媒体的包括的范围有Q声x件、视频文件、动甅R图片、文字等)在什么时候、在什么地斏V以什么样的方式播放。糊涂了吗?J 我们下面一h看看SMIL的优点(与众不同的地方!Q:

Z方便赯,我们把我们想要完成的作品UC为演C(presentationQ?

(1)  避免使用l一的包Ҏ件格?

因ؓ我们的多媒体文g的格式的旉常多的,例如Q像声音有*.mp3?.wav?.ra{等Q视频的格式更是多的出奇Q?.mpg?.avi?.mov?.rm{等Q图片的格式更加不用说了。J 如果我们惛_本地机器上直接播放或者在|络上用式播放的方式来播放若干个文件。当然我们希望的是不要总让我们自己打开文g。而是Q在上一个文件播攑֮成以后,播放下一个。播攑ֈ表是个办法。但是,如果格式不一Pq且要求多个片断同时播放Q例如:昄囄的同Ӟ有解说的声音。图片和声音是两个文ӞQ那么以前唯一可行的办法就是用对媒体的~辑软g把这些多媒体文g整合成一个文件。这必ȝ一使用某种文g格式。如果你的源文gQ多个多媒体片断Q没有保存副本的话,在你下次要用其中的某个源文g的时候,J 你就后悔dQ如果我们用SMIL来组l这些多媒体文gQ那么可以在不对源文件进行Q何修改的情Ş下,获得我们惌的效果(从这里来看,SMIL好像是穿珍珠w用的金丝U,只是把它们穿hl成一个整体,而不会破会它们。)。当然SMIL的功能决非就q么炏V接下来是Q?
Q?Q同时播攑֜不同地方Q服务器上)的多媒体片断

如果上面W一点你q可以用其他的办法做刎ͼ那么q一条恐怕你没辙了?font face="Wingdings">;J 考虑q样一个实际问题:假如我们现在x一D는视采访的实况Q视频文Ӟ加上解说Q包括声韌_音频文gQ和文字解说Q。姑且假定例子中的视频文件是甲服务器上的A文gQ音频文件是乙服务器上的B文gQ而解说文字却是丙服务器上的C文g。传l的Ҏ在这里就束手无策了(I途末路了JQ,而SMIL可以非常L的做到这一炏V?

Q?Q时间控?

如果我们不想用整个视频文Ӟ而只想用其中的某一部分。传l的Ҏ中唯一可行的就是用剪辑软g来剪辑。费时费力不_弄不好就弄y成拙Q把惌的给剪掉了!而SMIL完成qg事真的是易如反掌Q看q样一个例子:设视频文件A的时间长度是10U,我们要用的是2~5U,其他部分我们不想要,只要用SMIL规定Q在该视频文件A的第二秒开始播放,播放到第五秒l束可以了?

旉控制的另外的部分是动d转场效果。如果上面的旉控制是丝l,那么q个是在它上面的双面刺l!后面我们要详细讨论q个问题。J

Q?Q对整个演示q行布局

我们把上面提到的那个例子拿来说明q个问题Q由于我们有视频、有文字我们希望什么样的布局呢?一般的情Ş下在一个区?屏幕的上?播放视频Q在另一个区域显C文字(屏幕的底部)。当Ӟ如果你认为在视频上面昄文字效果更好的话Q那也是可以的。用SMIL实现q样的效果异常容易!

Q?Q多语言选择支持

分析q样一个实际例子:我们要ؓ某种产品作宣传,其宣传对象是多个国家的hQ有p国家的、有法语国家的、有徯国家的等{。当然最主要是讲中文的国家的人(我是中国人!Q。如果我们想要所有的人都可以听懂、看懂我们的介绍Q那么我们就的准备不同语a版本的媒体文件。传l的Ҏ是让用户来选择Q然后从服务器上下蝲相应的版本。麻烦就不用讲了。万一我们的选择老外都看不懂(有时候,我到h、日文、朝鲜文的站点上Q就不知道他们讲些什么东西L),q怎么办?如果把他们用SMIL来组lv来、规定好Q那么SMIL语言根据具体的语言讄来播攄应版本的演示。就是方便!
Q?Q多带宽选择支持

׃各个用户q接到Internet的方式不相同,所以其q接的速度差别也较大。ؓ了让他们都能够看到我们的演示Q我们可以制作适应不同传输速度的演C。在传统的方法中Q往往要用戯己选择他的机器q接所对应的传输速度Q然后播攄应得演示文g。这实解决了一些问题。实际上Qƈ不是所有的用户都知道自qq接速度Q就是知道了Q还得选择不也是非帔R烦吗QL SMIL解决q个问题如同吹灰Q播攑֙出用户的连接速度后,同服务器“协商”,要求传输q播攄应的演示文g。方便乎Q这也就是流技术中常常说的(SurestreamQ中的一U?

SMIL语言主要的优点大的方面有以上q些。相信大家在实际应用中,会体会到它更多的优点?

注意Q我们在创徏SMIL文g以前Q我们要做好以下几g事:

1、下载ƈ安装Realone Player。目前,SMIL的版本是2.0,全面支持SMIL的版本是2.0只有Realone PlayerQ所以我大家使用它。大家可以从http://www.realnetworks.com/上下载,国内的很多的|站上也提供下蝲。下载GOLD版,不要下蝲BETA版?

2、  我们编辑SMIL源文ӞE序Q用的是windows附g中的C本,希望查一下你的记事本是否正常。当ӞM普通的文本~辑器都是可以的(ultra Edit很不错)Q但是考虑到大家学习的方便Q故使用最Ҏ扑ֈ的记事本来编辑?

3、  在我们的学习阶D,我希望我们大家不要用专门SMIL~辑器。一斚wQ现有的q些SMIL~辑器不太好用。另一斚wQ那样也不利于我们彻底理解SMIL语言?
二、 SMIL基本知识

下面我们看一个实际的SMIL的例子(用记事本~写可以,注意Q在英文状态下~辑。也是不要打开中文输入法。因为SMIL播放器不认识中文的标点符PQ:

< smil>;

 < head>;

  < meta name="copyright" content="Your Name" />;

  < layout>;

   < !-- layout 标记 -->;

  < /layout>;

 < /head>;

 < body>;

  < !—媒体标變W?->;

  < img src="image1.jpg"/>;

 < /body>;

< /smil>;

    昄QSMIL和HTML语言的语法格式非常相像!所以,如果大家对HTML熟悉的话QSMIL学习h很Ҏ。但是,二者的差别是很大的Q所以如果想学的很好Q大家一定要认真地学Q?

从上面这个例子可以看出:

Q?Q       SMILE序?lt;smil>;开始,?lt;/smil>;l束?

SMIL必须?lt;smil>;开始,?lt;/smil>;l束Q其他的一切标记都在这二者之间。这个和HTML好像是一L?

Q?Q       整个程序由body和head两个部分l成

其中body是必要有的。而head部分则看实际情况。如果需要的话,我们写。若是整个SMILE序非常单ƈ且没有必要用head部分Q那么,我们可以不写。从个h的经验来看,如果要写Z个效果好的演C,head部分是必不可的QJ
Q?Q       属性和标记要求写

SMIL要求其标记和标记的属性必d写!

我们在这里不想给出属性和标记的定义。SMIL语言是由标记组成的。每一行都是标讎ͼ而标记基本上都有属性。例如:< img src="image1.jpg"/>;中,img是标讎ͼ而src是属性,image1.jpg是src的属性倹{注意:属性值可以大写都可以。后面我们会到有些属性D求骆驼写法。什么是骆驼写法Q像fadeTocolorq样的属性|看看Q中间高Q两边低Q是不是非常像骆驼的驼峰QJQ就是骆驼写法?

Q?Q       有些标记必L一斜杠作ؓl束标记

在SMIL中,如果标记不是配对标记Q例如:< smil>;< /smil>;?lt; head>;< /head>;?lt; body>;< /body>;{)Q那么,必须有一斜杠作ؓl束标记Q例如:< img src="image1.jpg"/>;Q?

Q?Q       属性值必ȝ双引hh

例如Qsrc="image1.jpg"。注意:SMIL文g中出现的文g名必d服务器上的文件名一_其\径一定要正确。否则,SMIL播放器找不到该文件?

Q?Q       SMIL文g的拓展名?.smil或?.smi

我们必须?.smil或?.smi的拓展名来保存SMIL文g。这样SMIL播放器才能认出SMIL文gQ以采用正确的解码方式解码、播放。ؓ了防止与其它cd文g的拓展名冲突Q强烈徏议采?.smilq个拓展名!注意Q文件名必须是以数字、字母开始的Q中间可以有下划U,不可以有I格。例如:test_one.smil可以Q而test one.smil坚决不行Q如果你喜欢的话Q可以用我们上面讲的骆驼写法testOne.smil。注意:上面的例子大家可以原版复Ӟ保存为testOne.smil。ƈ且找一个图片放到testOne.smil同一个文件夹下,q将image1.jpgҎ你的囄的名字(后面如果没有Ҏ说明Q都得这么做Q,可以用Realone player打开该源E序Q看看我们的W一个演C的效果了。J

Q?Q       附加信息写?lt; head>;< /head>;之间

如果我们有些关于源代码的一些说明也是附加信息Q例如版权、作者、标题、基地址{等Q我们可以在< head>;< /head>;中说明。其基本的格式是Q?lt; meta name=" " content=" " />;Q例如:< meta name="author " content="litterone " />;< meta name="title " content="I want to learn SMI:L " />;?

Q?Q       用< !-- …?->;q行注释

q个标记和HTML里面的是一扬的。我们可以对我们的源文gq行注释。SMIL播放器遇到这个标记后Q将跌去而不予理睬。例如:我们可以在写源代码以前,我们想要实现的效果?lt; !-- …?->;中写出来Q然后在~写源代码,假如我们忘记了删除该D说明,也不会媄响演C的执行?

上面单介l了SMIL语言的基本知识,接下来要详详l细地学习SMILQ?

 
三、 SMIL详细解析SMIL语言的内容很多,我们从最常用的开始谈赗(准备好了吗?上\了!Q?、  多媒体片断l构l织Q?Q?lt; seq>;< /seq>;标记我们首先看下面这个例子:< smil>; < head>; < /head>; < body>;< seq>;< img src="image1.jpg"/>;< img src="image2.jpg"/>;< /seq>; < /body>;< /smil>;请保存(记得要用*.smilq样的文件格式 JQƈq行该源E序看看效果。我怿如果大家看到的是q样的效果:Realone player先显Cimage1.jpgQ然后显Cimage2.jpg。这是我们q里?lt; seq>;< /seq>;q对序播放标记规定的结果?lt; seq>;< /seq>;规定的是Q在< seq>;< /seq>;中间的多媒体片断序播放。如下图所C。         (2Q?lt;par>;< /par>;标记
接下来瞧瞧这个例子:< smil>; < head>; < /head>; < body>;< par>;< img src="image1.jpg"/>;< img src="image2.jpg"/>;< /par>; < /body>;< /smil>;保存->;q行->;看效果。Realone player同时昄image1.jpg和image2.jpg。这是我们q里?lt; par>;< /par>;q对q行播放标记所得到的结果?lt; par>;< /par>;规定的是Q在< par>;< /par>;中间的多媒体片断q行播放。如下图所C。 (3Q?lt; seq>;< /seq>;?lt; par>;< /par>;标记协同使用分析下面q个例子Q?lt; 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>;
q个例子的效果是q样的:Realone player先显Cimage1.jpgQ接下来同时昄image2.jpg和image3.jpg, 然后昄image4.jpg。ؓ什么会q样?其中原因我想大家一定非常清楚了。我׃|嗦了。J
有了< seq>;< /seq>;?lt; par>;< /par>;q样两对标记后,我们对多媒体片断播放的先后顺序的控制变得非常方便了。但是,我们上面的这些演C说是演示了。但是,它们的显C时间好像没有受到我们的控制。接下来着手解册个问题?
2、  时间控?
Q?Qdur属?
请大家看看下面这D代码的效果?
< smil>;
 < head>;
 < /head>;
 < body>;
< seq>;
< img src="image1.jpg" dur="5s"/>;
< img src="image2.jpg" dur="10s"/ >;
< /seq>;
 < /body>;
< /smil>;
怿大家已经看出门道了!对了Q我们这里对image1.jpg和image2.jpg的持l时间做了规定。其中image1.jpg持箋旉5U,image2.jpg持箋旉10U?
Q?Qbegin和end属?
上面规定的是播放多长旉Q我们也惌定在什么时候开始播放。请看下面的E序?
< smil>;
 < head>;
 < /head>;
 < body>;
< img src="image1.jpg" begin="2" dur="5s"/>;
 < /body>;
< /smil>;
q个例子的效果是q样的:Realone player先显Cimage1.jpgQ接下来同时昄image2.jpg和image3.jpg, 然后昄image4.jpg。ؓ什么会q样?其中原因我想大家一定非常清楚了。我׃|嗦了。J
有了< seq>;< /seq>;?lt; par>;< /par>;q样两对标记后,我们对多媒体片断播放的先后顺序的控制变得非常方便了。但是,我们上面的这些演C说是演示了。但是,它们的显C时间好像没有受到我们的控制。接下来着手解册个问题?
2、  时间控?
Q?Qdur属?
请大家看看下面这D代码的效果?
< smil>;
 < head>;
 < /head>;
 < body>;
< seq>;
< img src="image1.jpg" dur="5s"/>;
< img src="image2.jpg" dur="10s"/ >;
< /seq>;
 < /body>;
< /smil>;
怿大家已经看出门道了!对了Q我们这里对image1.jpg和image2.jpg的持l时间做了规定。其中image1.jpg持箋旉5U,image2.jpg持箋旉10U?
Q?Qbegin和end属?
上面规定的是播放多长旉Q我们也惌定在什么时候开始播放。请看下面的E序?
< smil>;
 < head>;
 < /head>;
 < body>;
< img src="image1.jpg" begin="2" dur="5s"/>;
 < /body>;
< /smil>;
 
上面的这D늨序规定就是图片image1.jpg在整个演C?U后Q开始显C,持箋的时间是5U。对于图片的控制是这P而我们常帔R要对视频/音频的时间进行控制。下面这个例子来说明q个问题?
< smil>;
 < head>;
 < /head>;
 < body>;
< video src="test.rm" begin="5s" end="40s"/>;
 < /body>;
< /smil>;
test.rmq个视频文gQ如果大家手头上没有*.rm格式文gQ就用Realone player的firstrun.rm或者找?.avi的也可以。但是文件名要写对!Q在整个演示开?U后开始播放,在整个演C播?0U以后,q束播放。实际的播放旉是:40-5=35U。但是,一般情形下Q我们的视频d一个组中,q时候,他就的服从组的时间了。我们那下面的这个例子来解释q问题?
< smil>; 
 < body>;
< seq dur="5">;
< img src="image1.jpg" begin="2" dur="10"/>;
< /seq>;
 < /body>;
< /smil>;
image1.jpg所在的l的持箋旉?U,而image1.jpg自己要求持箋10U,q是不行的。实际上image1.jpg的显C时间只?-2=3U!大家在以后写E序的时候要注意q个问题?
Q?Qclip-begin和clip-end属?
考虑q样一U效果:
我们只要test.rm播放q个视频/音频?~10U这个时间断Q怎么办?Q?J有了clip-begin和clip-endQ问题就很简单了Q请看:
 
< smil>;  < body>;< video src="test.rm" clip-begin="5s" clip-end="10s"/>; < /body>;< /smil>;clip-begin和clip-end属性是用内部时间控制的属性。这里的内部指的是多媒体片断自q旉U(timelineQ。前者规定在什么地方开始播放,后者规定放C么地方结束播放。ؓ了更清楚的理解这些时间控Ӟ我们看下面的q个例子Q?lt; 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>;看看下面q个C意图: 昄Q首先是testone.rm从自q5U处开始播放,播放7U以后,testtwo.rm从自q2U处开始与testone.rm一h放,testone.rm播放到自己得15U处停止播放Qtestone.rm播放?5-5=10U。testtwo.rm播放到自己得15U处停止播放Qtestone.rm播放?5-2=13U。图中灰Ԍ黄色Q部分表C播攄部分。?
接下来我们对旉的表C方法做个说明(默认的时间是U,所?2s" ?2.0s"?2"都是一L Q:
旉标记 指代 例子 说明
h 时 1.5h 1时30分钟
min 分钟 4.75min 4?5U?
s U?10.45 10U?50毫秒
正确的时间写法是Q hh:mm:ss.xy。hh表示时Qmm表示分钟Qss表示U;x表示1/10U;y表示1/100U。例如:begin="01:40.0"表示的是1?0U处开始,而begin="01:40"表示的是1时40分处开始。真的注意呀J?
旉控制非常重要Q它直接影响我们演示的效果。而我们上面讲的这部分是最重要的,所以大家一定要理解上面的各个时间概念及其含义?
Q?Qfill属?
当演CZ的某个片断播攑֮成以后,我们可以用fill属性来规定它的昄状态。简单的说就是我们是清屏q是ȝ屏幕。看下面q个例子Q?
< smil>; 
 < body>;
< video src="test.rm" dur="30s" fill="freeze"/>;
 < /body>;
< /smil>;
假设test.rm的长度是20U,那么我们q里规定的就是:在test.rm播放l了以后Q屏q上昄的是test.rm的最后一帧(通俗的说是最后一q画面)Q显C的旉?0-20=10U;如果是图片的话,那么昄是囄?
Fill属性只有remove和freeze两个Q默认的gؓremove。徏议大家在演示的最后的一个多媒体片断上用ȝQfreezeQ,以防止屏q上I空如也QJ
Q?Qrepeat属?
如果我们希望我们演示中的某个片断或者全部的片断重复播放若干ơ(姑且设ؓ2ơ)。那么我们可以后用repeat属性来实现该效果。分析下面这个例子:
 
< smil>; 
 < body>;
< vedio src="test.rm" dur="1min" repeat="2"/>;
 < /body>;
< /smil>;
上面q个例子是让test.rm播放两次。如果我们想让某个片断一直播放下去(|络光广告上可以考虑q个Q,那么repeat="indefinite"可以了。当Ӟ惌它停下来的一U方法是按下播放器stopQ停止)键(在网|件中是右键菜单中的stopQ;另外的一U办?大家都知道的)是关闭计机QJ
3、    布局设计
我们q里所说的布局是在我们的屏幕上定出各个多媒体片断昄的位|(单纯的声x件是不需要布局的!Z么?J 因ؓ我们的x听不出声韛_屏幕上的什么地方;而我们的眼睛可以看到囄、动d文字在什么地方!Q,准确地说是在播放器中。从前面我们q行播放的例子可以看出来Q如果我们不对布局q行设计Q那么显C的效果一塌糊涂!q里是SMIL的重点和_֍部分之一Q打L,Let’s goQ?
Q?Q       定义基本显C窗?
看下面的代码Q?
< smil>;
 < head>;
  < layout>;
   < root-layout width="300" height="200" background-color="white" />;
  < /layout>;
 < /head>;
 < body>;
 < /body>;
< /smil>;
说明Qa、  布局标记必须?lt; layout>;开_?lt; /layout>;l束Q其他具体的标记都在q中间?lt; layout>;< /layout>;必须攑֜< head>;< /head>;之间?
b、  root-layout标记表明的是规定最基本的、最底层的窗口。其他一切窗口都在它的基上划分出来?
c、  width="300" 表明H口宽ؓ300个像素点Qheight="200"表明H口高ؓ200个像素点Qbackground-color="black"表明H口的背景颜色ؓ黑色。这里也可以用颜色代码。例如:background-color="#000000"。个人更喜欢代码Q因为颜色代码表N色众多,但是代码不直观?
Q?Q       定义多媒体片断昄H口
分析下面q段源程序:
< smil>;
 < head>;
  < layout>;
   < root-layout width="300" height="300" background-color="yellow" />;
   < region id="vedio_region" left="5" top="5" width="290" height="260" />;
< region id="text_region" left="5" top="270" width="290" height="25" background-color="white"/>;
  < /layout>;
 < /head>;
 < body>;
< par>;
  < vedio src="test.rm" region="vedio_region" />;
  < text src="test.txt" region="text_region"/>;
< /par>; 
< /body>;
< /smil>;
说明Q?
a?lt; region id="vedio_region" left="5" top="5" width="290" height="260" />;定义多媒体片断显C窗口,它的id是vedio_regionQ这个id是必要的(在SMIL中,有的idh可以省略的,但是我们大家都写上,q样很容易把整个SMIL文g的脉l弄清楚Q!顶端和左段各有5个像素点的距(注意Q这里的坐标是相对基本显C窗口而言Q)。窗口宽?90个像素点Q高?60个像素点。下面的昄H口的定义和q个是一L?
b?lt; vedio src="test.rm" region="vedio_region" />;声明了多媒体片断test.rm在vedio_regionq个区域播放Q?lt; text src="test.txt" region="text_region"/>;声明了文本文件test.txt在vedio_regionq个区域昄?
该例子布局效果如下图:
 
    上面我们对多媒体片断昄H口的采用的是绝对定义的Ҏ。多媒体片断昄H口也可以用相对定义的方法来定义。例如:
<region id="vedio_region" top="10%" left="10%" width="80%" height="80%"/>;
上面的比例是相对基本昄H口而言的。这L定义Ҏ更ؓ直观?
Q?Q       fit属?
在实际制作演C的时候,我们到了这L问题Q我们定义的昄H口的大和我们的多媒体片断的尺寸大不一_或大了或了。相信大家也会碰到这L问题。解决的办法有:
 
a、  修改窗口的大小Q但是,很多时候我们没有办法修攏V因为,如果修改的话Q那么会影响其他H口的显C。相应的其它H口也得修改。实际情冉|Q我们很多的不同寸的多媒体片断都可能在同一个窗口中昄Q)?
b、  用恰当的多媒体片断和H口的匹配方式?
看小面这D代码:
< region id="vedio_region" width="80%" height="80%" fit="meet"/>;
它的意思就是窗口vedio_region以meet方式昄多媒体片断?
fit属性的属性值有hidden、meet、fill、scroll和slice四个。其中hidden是默认的属性倹{?
Hidden表示保持多媒体片断的寸不变Q从H口的左上角开始显C。如果多媒体片断寸比窗口的寸,那么I白的地方将用背景色填充。如果多媒体片断寸比窗口的寸大,那么多媒体片断超出窗口部分被裁去Q不被显C。个Z喜欢q样的方式?
meet表示在保持多媒体片断?高比例不变的情况下,对多媒体片断的尺寸进行羃放。从左上角开始显C,~放到高度和宽度中的一个尺寸等于窗口的相应的尺寸,而另外的一个小于窗口的相应的尺寸。空白处用背景色填充。我喜欢q个Q?
fill表示~放多媒体片断得其大小正好和窗口的大小一致。如果多媒体片断的宽/高比例和H口的宽/高比例不{,那么多媒体片断就会变形,非常隄。强烈徏议不要采用这U方式!
scroll表示对多媒体片断的尺怸做什么修改,它以正常的尺寸大显C。但是,如果多媒体片断的寸出了窗口的寸Q那么将会相应出现水qx者垂直滚动条。该U发式适合于长旉的多媒体片断的显C。如果多媒体片断的显C时间很短,不要使用Q?
slice表示在保持多媒体片断?高比例不变的情况下,对多媒体片断的尺寸进行羃放。从左上角开始显C,~放到高度和宽度中的一个尺寸等于窗口的相应的尺寸,而另外的一个大于窗口的相应的尺寸。超出的不分被裁去而不昄?
 
各个匚w的效果请参见下图Q省去scroll效果Q?
 
Q?Qz-index属?
先试q行下面的源E序Q?
< smil>;
 < head>;
  < layout>;
   < root-layout width="300" height="300" />;
   < region id="vedio1_region" width="300" height="300" />;
   < region id="vedio2_region" left="270" top="270" width="30" height="30" />;
  < /layout>;
 < /head>;
 < body>;
< par>;
  < vedio src="testone.rm" region="vedio1_region"/>;
  < vedio src="testtwo.rm" region="vedio2_region" />;
< /par>; 
< /body>;
< /smil>;
 
我想大家已经看出来了Q我们这里想做的是那种电视的画中画效果。但是在实际昄的时候,我们的小画面有时候被大画面所覆盖。我的苦心也白费了。z-index属性这个时候是我们的救星?
修改< region id="vedio1_region" width="300" height="300" />;
   < region id="vedio2_region" left="270" top="270" width="30" height="30" />;
成:< region id="vedio1_region" width="300" height="300"  z-index="0"/>;
 < region id="vedio2_region" left="270" top="270" width="30" height="30" z-index="1" />;
在看看效果,行了吗?J
z-index属性规定相互重叠的H口的显C次序。数字大那么昄在上面。这个很Ҏ理解Q我们就不说太多。但是以下几点要注意Q?
a、root层窗口L在最后一层,q且不用z-index属性?
b、z-index属性值可以是负数。当然它q排在0以后?
c、  没有重叠的H口可以使用同一z-index属性倹{?
4、    链接制?
传统的流媒体的最大的一个弊端是没有交互性(InteractionQ。现在如日中天的flash本质上就是一U可交互性的!由此可见可交互性的的市场潜力。而SMIL是解军_部分媒体交互性的最好的工具Q这部分要求大家必须掌握Q如果没有的话,那么我们学习SMIL失M意义。因里是SMIL的主要特Ԍ与其他的视频~辑软g相比较)Q就好像指针是C语言的特色一栗?
Q?Q?lt; a>;< /a>;标记
q行下面q个E序Q?
< smil>;
< head>;
< layout>;
      < root-layout width="300" height="300"/>;      
      < region id="videoregion" top="0" left="0" width="300" height="300"/>;      
< layout>;
< /head>;
< body>;
 
< a href="1.rm">;
   < video src="videotest.rm" region="videoregion"/>;
< /a>;
< /body>;
< /smil>;
正常情况下,我们看到播放器播放videotest.rmQ如果我们把鼠标攑ֈ正在播放的videotest.rm上面Q鼠标将有指针Ş状变为小手Ş状。单击鼠标左键,播放器播攑ְ停止播放videotest.rm而播?.rmq个文g。这里我们就成功的创Z一个很单的链接?lt;a>;</a>;属性就是用于链接标讎ͼhref表示的是所要链接的文g。这U方法非常简单,我们׃做过多的介绍?
如果我们要创建更加复杂的链接Q我们就要用C面的q个属性?
Q?Q?lt; anchor>;属?
上例中?lt; body>;< /body>;换成下面q段代码Q看看效果是不是有区别?
< body>;
   < video src="videotest.rm" region="videoregion">;
< anchor href="1.rm"/>;
   < /video>;
< /body>;
我们看到的效果是完全一LQ那?lt;anchor>;属性不多余了吗? 那是不会的!JJLQ?
a、  分时断链接
考虑q样一个问题:我们要在0~10U链C个文Ӟ10~20U链到另一个文Ӟ该怎么办?看我们的Q?
< body>;
< video src="1.avi" region="videoregion">;
  < anchor href="1.jpg" begin="0s" end="10s" >;
  < anchor href="videotest.rm" begin="10s" end="20s" />;
< /video>;
 大家看到的效果Q播攑֙播放1.aviQ在0~10U链?.jpgQ在10~20U链到videotest.rm。警告:dur、clip-begin和clip-endq里不支持!
B、链接部分SMIL
   我们的链接可以链接的文g很多Q几乎所用的多媒体片断都可以?.smil?.html也可以。但是,下面我们要讨论的是如何链接部分SMIL。请看例子?
W一个SMIL文gQ取名test11.smil
< smil>;
< head>;
< layout>;
      < root-layout width="400" height="300"/>;      
      < region id="videoregion" top="0" left="0" width="400" height="300" fit="meet"/>;      
< /layout>;
< /head>;
< body>;
< video src="1.avi" region="videoregion">;
  < anchor href="test11app.smil#testlink"/>;  
< /video>;
< /body>;
< /smil>;
W一个SMIL文gQ取名test11app.smil
< smil>;
< head>;
< layout>;
      < root-layout width="400" height="300"/>;      
      < region id="videoregion" top="0" left="0" width="400" height="300" fit="meet"/>;      
< /layout>;
< /head>;
< body>;
< video id="testlink" src="1.avi" clip-begin="150" region="videoregion"/>;
< /body>;
< /smil>;
 
大家一定看出来了!我就是在test11app.smil中ؓ我们要链接的那部分内容设上id,然后在test11.smil中的链接中用?”来指向该标记id。应用的很多的时候是l内内容。我们把test11app.smil修改为:
< body>;
< par id="testlink">;
< video src="1.avi" clip-begin="150" region="videoregion"/>;
< /par>;
< /body>;
到这里,链接可以说已l很完美了。但是,如果要锦上添花,那么下面q个属性是必不可少的?
Q?Qcoords属?
上面的<anchor href="1.rm"/>;代码修改为:
< anchor href="1.rm" coords="0Q?Q?50Q?00"/>;
或者:
   < anchor href="1.rm" coords="0Q, 0Q,50Q,100Q?/>;
q行Q看看效果。JJ我们看到左半部分有链接效果,而右半部分却没有Q这是我们采用了坐标规定链接区的~故。coords属性值的W一、二个数分别表示的是链接区的左上角点的水qIleftQ和垂直(top)坐标;W三、四个数分别表示的是链接区的右下角点的水qIleftQ和垂直(top)坐标。上面用的是像素点的l对定义ҎQ下面用的是比例的相对定义方法。喜Ƣ哪一个就看你的喜好了?
Q?Q链接注?
我们的演C最后基本上都要攑ֈ服务器上。因此,文g的位|的规定非帔R要,如果文g位置出错Q那么播攑֙找不到文g而不能播放。这是我们最不希望看到的Q下面我们就来讨个问题?
A、创建基地址
 
看下面的代码Q?
< head>;
     < meta name="base" content="rtsp://abc.5dmedia.com/"/>;
  < /head>;
上面是?lt; head>;< /head>;中用附加信息的方式规定了整个smil文g的基地址为rtsp://abc.5dmedia.com/。规定了基地址以后Q我们在用该地址下的文g的时候,只需要给\径就可以了。例如:
< body>;
  < video src="video/first.rm"/>;
  < video src=" video /second.rm"/>;  
  < audio src="rtsp:// abc.mysite.com:554/audio/test.mp3"/>;
< img src="http// www.5dmedia.com/image/welcome.jpg"/>;
< /body>;
q个例子中的前面的两个文件用的是基地址服务器上的文Ӟ所以,可以之写出相对地址。但是,后面的两个文件用的是其他服务器上的文Ӟ我们必须l出l对地址。其中rtsp是实时流传输协议Q它保证SMIL播放器正地从流服务器abc.mysite.com上的audio文g夹下获得我的所要的文gtest.mp3?54为流服务器的端口。http是超文本传输协议。它保证SMIL播放器正地从web服务器www.5dmedia.com上的image文g夹下获得我的所要的文gwelcome.jpg?lt; audio src="rtsp:// abc.mysite.com:554/audio/test.mp3"/>;说明的是该文件不在上面的基地址下,而在rtsp:// abc.mysite.com:554/audio/q个地方法,所我们必须修改地址?
如果我们用的是本地机器硬盘上的文件就可以用src="file:/c:\audio\first.rm"q行d该文件?
大家在调用文件之前,一定要弄清楚文件的位置Q?
 
5、语a选择和智能流
Q?Q语a选择
    如果Q我们想要扩大我们演C的收看人群Q那么我们的听众׃有中国h、美国h、法国h、俄|斯{等。那么怎样才能提供q种多国语言的支持呢Q?
Switch属性是该问题的“杀手”!
L例子Q?
< smil>;
< body>;
  < switch>;
   < video src="English.rm" system-language="en-us"/>; 
   < video src="Chinese.rm" system-language="zh-cn"/>;
  < /switch>;
< /body>;
< /smil>;
在SMIL播放器播放该SMIL文gӞ你的播攑֙讄的是什么语aQ如果是国pQen-usQ,那么׃服务器下载English.rm播放Q如果是体中?zh-cn)Q那么就从服务器下蝲Chinese.rm文g播放。你可以讄很多的国家的选项。当然你的语a的版本也很多了。J下面我们l出l常使用的一些语a的代码?
代码 语言
zh-cn 中文 (中华人民共和?
en-us p (国)
fr 法语 (标准法语)
de 徯Q标准d语)
it 意大利语Q标准意大利语)
ja 日语
es 西班牙语Q西班牙Q?
 
2Q智能流QsurestreamQ?
用户的联|速度是不相同的。有的可能只?0K左右Q有的可能有几百K。如果我们满了高速用L要求Q那么低速用户可能由于速度太慢而不能收看。如果我们满了低速用L要求Q那么高速用L到的效果打了不的折扣Q浪费了高速的带宽。怎么办?
< smil>;
< body>;
  < switch>; 
  < vedio src="highspeed.rm" system-bitrate="250000"/>;
  < vedio src="midspeed.rm" system-bitrate="80000"/>; 
  < vedio src="lowspeed.rm" system-bitrate="20000"/>;
  < /switch>;
< /body>;
< /smil>;
当用L联网速度大于250kbpsӞ播放器就从服务器下蝲highspeed.rm播放Q如果用L联网速度大于80kbps于250kbpsӞ播放器就从服务器下蝲midspeed.rm播放Q如果用L联网速度大于20kbps于80kbpsӞ播放器就从服务器下蝲lowspeed.rm播放。所谓的“众口难调”在各位的手里就变得如此单!J
上面讲的是(surestreamQ的本质实现ҎQ我们下面看一个复杂的一点的例子?
< body>;
< switch>;
  < par system-bitrate="225000">;
< !--联网速度大于250kbps?播放该组-->;
    < audio src="audio/music1.rm"/>;
    < video src="video/video1.rm" region="videoregion"/>;
    < text src="words/narration.txt" region="textregion"/>;
  < /par>;
  < par system-bitrate="80000">;
    < !--联网速度大于80000bps而小?50000bps?播放该组-->;
    < audio src="audio/music2.rm"/>;
    < video src="video/video2.rm" region="videoregion"/>;
    < textstream src="words/narration.rt" region="textregion"/>;
  < /par>;
  < par system-bitrate="20000">;
    < !--联网速度大于20kbps而小?0kbps?播放该组-->;
    < audio src="audio/music3.rm"/>;
   < video src="video/video3.rm" region="videoregion"/>;
    < text src="words/narration.txt" region="textregion"/>;
  < /par>;
< /switch>;
< /body>;
 
(3)语言与速度的同时检 ?lt; body>;  < switch>;  < !—简体中文ƈ且速度大于28kbps -->; < text src=" Chinese_14000.txt" system-language="zh-cn" system-bitrate="28000" />;  < !--体中文ƈ且速度大于14kbps -->;  < text src="Chinese_28000.txt" system-language="zh-cn" system-bitrate="14000" />;  < !—美国英文ƈ且速度大于28kbps -->;  < text src="english_14000.txt" system-language="en-us" system-bitrate="28000" />;  < !--国英文q且速度大于14kbps -->;  < text src="english_28000.txt" system-language="en-us" system-bitrate="14000" />;  < /switch>; < /body>;Q?Q演C速度的控制上面我们讲的是在演C文件已l创建好的条件下q行的。那么,我们怎样制作好多媒体片断。下面是我们的徏议:a、  用Realproducer或者其他的压羃工具制作文件时Q选择正确的压~比例。ؓ高速用户准备的文g的压~比可以一些,对于低速用户准备的文g的压~比要大一炏Vb、  在|络传输q程中,视频占用的带宽是最多的Q音频次之,接下来是动画、图片,文字是最的。所以,我们充分考虑我们的演C的l构。例如:如果q行播放多个视频Q这昄是不合适的。我们可以用囄来替代一部分视频效果。?
c、  我们在传输中不能全部占用用L带宽Q必ȝZ部分l用h览网|者是q其它用途的。JJJ我们很多的年Mh当然是用于QQ 聊天Q下表列Z我们的徏议?
用户速度 最大流占用带宽
14.4 Kbps modem 10 Kbps
28.8 Kbps modem 20 Kbps
56 Kbps modem 34 Kbps
64 Kbps ISDN 45 Kbps
112 Kbps dual ISDN 80 Kbps
Corporate LAN 150 Kbps
256 Kbps DSL/cable modem 225 Kbps
384 Kbps DSL/cable modem 350 Kbps
512 Kbps DSL/cable modem 450 Kbps
在我们以后的制作中。上面的q些知识是非常实用的。大家一定要努力掌握Q?
6、  动L?
我们前面学习的内ҎSMIL1.0规定的。在SMIL2.0中添加了不少的内容,其中动画是其中一个。很多的国外的教E上把flash文g*.swf归ؓq一cR我们不能同意这L分类Ҏ。我们认为把q样已经做好的动画该归ؓ视频一cR真正的动画Q从SMIL2.0规范中可以看出来Q是有SMIL规定的ƈ有SMIL播放器解释生的动画?
    从实际情冉|看,动画效果主要是针对图片生的。所以,我们在这里用囄来做例子。其他的多媒体的制作Ҏ是类似的。有兴趣的GG、JJ、DD和MM可以自己做做?
Q?Q             运动动?
为先睹ؓ快,请在Realone player中运行下面的E序Q?
  < smil xmlns="http://www.w3.org/2000/SMIL20/CR/Language">;
  < head>; 
    < layout>;
      < root-layout width="800" height="600"/>;  
      < region id="Images" left="0" width="800" height="600"/>;
    < /layout>;     
  < /head>;  
  < body>;       
          < img region="Images" src="g03.jpg" dur="6s">;  
          < animateMotion from="0 0" to="600 400" dur="4s"/>;            
          < /img>;         
 < /body>;
< /smil>;
 
解释Qa、我们这里用到的是SMIL2.0规范中的规定的内容的。所以,在第一行里Qxmlns="http://www.w3.org/2000/SMIL20/CR/Language"Q我们必d明我们所用的规范。不然的话,播放器可能不能正解码、播放?
b、  animateMotion标记声明的是我们所要的动画cd。注意:q里是我们所说的骆驼写法Q还记得吧!JJ
c、  from="0 0" to="600 400"属性及其属性值声明的是动M坐标点(0Q?Q运动到坐标点(600Q?00Q。这里我们也可以写成Q?lt; animateMotion from="0Q?" to="600Q?00" dur="4s"/>;
d、  dur="4s"属性及其属性值声明的是动d4U内完成。在我们q个例子中,囄的存在时间是6U,那么动画完成后,有2U钟的时间静止不动。如果图片的存在旉于动画存在旉Q那么动画运动到半\上就的停止,q样的情冉|该避免的?
Q?Q 羃攑֊?
           下面我们看看另外的一U动dŞ式:~放动画。先看效果!J
< smil xmlns="http://www.w3.org/2000/SMIL20/CR/Language">;
  < head>; 
    < layout>;
      < root-layout width="800" height="600"/>;  
      < region id="Images" left="0" width="800" height="600"  fit="meet"/>;
        < /layout>;       
  < /head>;
  < body>;   
    < img region="Images" dur="10s" src="g03.jpg" width="400" height="320">;                      
     < animate attributeName="height" from="320" to="160" fill="freeze" dur="10s"/>;
   < /img>;   
 < /body>;
< /smil>;
解释Qanimate attributeName="height" from="320" to="160"声明了动ȝcd和参数。大家看了效果以后,在结合上面的参数的意义,各参数是什么意思我们也׃用多讲了。J
 
7、  {场效果   首先解释一下什么是转场效果。我们的演示中多媒体片断是很多的Q不可避免的会有两个片断之间的切换。例如:一个图片演C完了,该接着演示下一个图片,两图片中间是有一个过渡的。这个过渡我们就U谓转场效果。如果我们不讄转场效果Q那么,q渡的效果肯定不好。LSMIL中的转场效果大致分ؓwipe和fade两类。(Q)   fadecd从名字就可以看出Q这个是淡入淡出的效果。先睹ؓ快!J L例子Q?lt; smil xmlns="http://www.w3.org/2001/SMIL20/Language">;< head>;< transition id="fade1" type="fade" subtype="fadeToColor" dur="4s" />;     < transition id="fade2" type="fade" subtype="fadeFromColor" dur="4s" />; < /head>;< body>;< img src="g04.jpg" dur="10s" transIn="fade2" transOut="fade1"/>;< /body>;</smil>;解释Qa、transition声明我们要设|{场效果。id="fade1"讄了该转场效果的id受id号必设|。type="fade"讄了{场效果的基本cd为fade。 subtype="fadeToColor"讄了{场效果的具体cdQ子cdQؓfadeToColorQ注意这里又是我们提到的骆驼写法Q)。dur="4s"讄了该场效果完成的旉。b、transIn="fade2"讄了图片g04.jpg昄旉用{场效果fade2Q transOut="fade1"规定囄g04.jpg完成昄旉用{场效果fadeQ。c、fade只有三个子类型。上面我们用了2个。还有一个是crossfadeQ这个也是缺省设|。?
Q2Q   wipecd
wipe为擦ȝ型。该cd的效果很多很多。我们这里所说的wipe只是他们的ȝQ注意wipe不能作ؓtype的属性|而是它的子类作ؓtype的属性|子类的子cM为subtype的属性|J谁让它的属性D么多Q!Q)。具体的有barWipe、boxWipe、fourBoxWipe{?6大类!!!不管它有多少c,先看看怎么弄。请看例子:
< smil xmlns="http://www.w3.org/2001/SMIL20/Language">;
  < head>;     
    < transition id="wipe1" type="slideWipe" subtype="fromTop"/>;
    < transition id="wipe2" type="waterfallWipe"/>;  
  < /head>;
  < body>;    
   < img  src="g03.jpg" transIn="wipe1" transOut="wipe2" dur="5s"/>;    
  < /body>;
< /smil>;
解释Qa、JJJ和上面的写法基本上是一致的Q?
      b、type="waterfallWipe"后面没有子类型表CZ用的是waterfallWipecd的默认子cd?
Q3Q   综合应?
我们上面都只是用在单个多媒体片断上的转场效果。下面看看在多个多媒体片断上怎样讄转场效果。还得看例子QJ
< smil xmlns="http://www.w3.org/2001/SMIL20/Language">;
 < head>;  
< layout>;
< root-layout width="400" height="300"/>;
< /layout>;
< transition id="fade" type="fade" subtype="fadeToColor" fadeColor="green" dur="4s"/>;
< transition id="fade1" type="fade" subtype="fadeFromColor" fadeColor="red" dur="4s"/>;
< transition id="fade2" type="fade" subtype="crossfade" dur="2s"/>;
< transition id="push" type="snakeWipe" dur="4" />;
< /head>;
< body>;    
< seq>;
    < img dur="5s" src="g06.jpg"  transIn="fade1" fill="transition"/>;
< img dur="4s" src="g05.jpg"  transIn="fade2" fill="transition"/>;
< img dur="4s" src="g06.jpg"  transIn="fade2" fill="transition"/>;
< img dur="4s" src="g05.jpg"  transIn="push" transOut="fade"/>;
< /seq>;      
< /body>;
< /smil>;
解释Qa、fadeColor="green"讄了谈入色为绿ԌgreenQ。在q里表示的就是从当前的多媒体片断渐变为绿艌Ӏ下面的fadeColor="red"则表CZU色渐变为当前的多媒体片断(如果是图片则变ؓ囄Q如是视频则变ؓW一帧)?
b、fill="transition"表示的是最后的完成效果有下面的转场效果来决定?
c、最后一个就不能用fill="transition"了。想惻I它就是最后一个了Q上哪里L下面的{场效果呢Q?
 
四、后记感谢大家一路陪_我们l于完成了SMIL基础性学习。SMIL的内Ҏ很丰富的Q由于作者的水^、时间和_֊有限Q研I的不是很深。这ơ真的体会到学习一U新的语a的难度比学习软g的应用难度大很多Q而这是不可以同日而语的。我们所提到的是非常基础、非帔R要、非常实用的部分。如果大家有兴趣惌一步研IӞ可以看看SMIL2.0规范。它位于http://www.w3c.org/下,大家可以下蝲下来看看。下面该交待的是SMIL目前支持的媒体对象:animation 、video、 audio、 img、 text和 textstream。它们所能支持的格式由我们选择的播攑֙来决定。下面我们要谈到q个问题。虽ӞSMIL的优点很多,但是~点也是有的。1、 播攑֙太少目前全面支持SMIL2.0的播攑֙只有Realone player。而支持SMIL1.0的播攑֙却很多。例如:QuicktimeQ苹果(apple Inc.Q公司),soja(一个用java语言~写的播攑֙Q体U很,效果不错。嵌在网上是在好不q了)。这个问题我想不久就会得到解冟뀂2、 各播放器不太兼Ҏ们在*.smil文g中用的多媒体的格式必考虑到播攑֙所能支持的格式。例如:Realone player支持的流文本Qstream textQ格?.rt非常不错。可是,很少有其他的播放器支持该中格式。Quicktime支持*.mov格式Q这U格式也是非常棒的。然而,支持它的播放器寥寥无几。相信随着各个播放q_的功能的拓展Q这个问题也会得到解冟뀂3、 制作的工具匮乏目前我们没有发现好的制作软g。oratrix公司的GRiNS Editor for RealONE      用v来ƈ不方ѝ而Flution则好像是个h业余写的E序Q用h比GRiNS Editor for RealONE舒服些,但是感觉也不是很好。如果演CZ是非常复杂,可以用Real slideshow来做Q效果不错,使用也非常简单。如果愈来愈多的公司来写q样的编辑YӞ那么来肯定会有很多好的SMIL:~辑软g。就像今天的html的Dreamweaver一样强?、中文的支持能力差   我们上面提到可以?.txt文g。如?.txt文g的内Ҏ英文的,那么一切都非常好。但是,如果是中文的话,昄的就是一对ؕ码。由于个人的水^有限Q到目前为止Q依然没有找C文显C的解决办法?/font>

]]>
վ֩ģ壺 91ѹƷ| һػaaaƬѿ| ѿֻվ| ޹߹ۿ| 弦վ߲ѹۿ| ޵һɫַ| ѿŮҹƬ| ˳þõӰվ| ձƵѹۿ| ۺպþóAV| | ޾Ʒվ߹ۿ | ձvaһ| Ƭ߹ۿѹۿӰ| һ| ҹһƵ| 鶹AVþþƷ| ޹˾ƷŮ˾þþ | Ƶһ| ŮƵƵa| þþƷAɫ | ѹۿ| ޹þþۺվ| һ߹ۿ| ĻþþƷ| ѹۿaƵ| ׾ƷƵ| ˳ɵӰ˳9999| 99ƵȫѾƷȫĻ| ŮƷĻ| ˾þۺӰԺ| һѹۿ| ޳| һ߹ۿ| ͩרĻ| պƷaӰԺ| 69ƷƵ| ޹Ʒlv| С˵ͼƬQVOD| Ů18ëƬؼһƵ| ڵɫƵѹۿɫ|