SMIL应用教程

 
SMIL 用教
WEB 多媒体 开发 的注意了
SMIL(Synchronized Multimedia Intergration Language, 多媒体集成 言)是一 简单 ,易于了解的XML
使各
格式的多媒体播放同 言。它可以集成到其它XML 言中,其他XML 言也能集成到 该语 言中,从而
XML的"可
展"特征。
如果你使用 HTML, 就会 习惯 SMIL 法,至少一 始是 这样 。如果你未使用 HTML ,但从本教程了解 XML ,你也会
现该词汇 容易的一
SMIL 能用于控制从源流 的媒体,如RealAudio和RealVideo以及各 其他媒体格式,包括 像,文本,声音和 视频
 
SMIL
     最基本的SMIL表示就像
建一个 简单 HTML 样简 便, 察以下代 看看我 的意 是什
     <smil>
         <body>
             <audio src="rstp://realserver.javertising.com/jt01.rm"/>
             <audio src="rstp://realserver.javertising.com/jt02.rm"/>
             <audio src="rstp://realserver.javertising.com/jt03.rm"/>
         </body>
     </smil>
    
上述代 只不 列出下 文件 将播出的几个多媒体文件
     与所有XML文档一
,有一个根元素,在本例中,根元素是smil。 SMIL 文档必 遵守所有其他 XML 规则 ,其中一些在 SMIL
范中定 ,与 XML1.0 范一致。所有元素名均小写,自然属性 有引号中, "( 引号 ),&,( 省略号 ),<( 左尖括号 ) >(
尖括号 ) 使用字符引用。   
    
根据SMIL 范,SMIL文档的body元素是必不可少的。如果愿意,可以包含一个head元素,但不做要求:
     <smil>
         <head><!--this is an optional element--></head>
         <body><!--this is a required element--></body>
     </smil>
    
建你的第一个SMIL作品以后,可以用smi或smil 展名保存 文件。
    
    
(seq) 用于 标记 你希望 序播出的元素 , 而并行 注用于 标记 你希望并 播出的元素。考 以下 简单标记 :
     <seq>
        <audio src="mySong.rm"/>
        <audio src="yourSong.rm/>
     </seq>
    
上述代 迫媒体播放机播放列出的第一首歌,在第一首歌播完之后播放下一首歌。
    
你可能不打算并行地播放音 ,但你可能想在播放音 乐时显 示描述 作品的文本:
     <par>
        <audio src="mySong.rm"/>
        <textstream src="songDesc.rt"/>
     </par>
    
注意 rt rm 展。 些是 RealMedia 格式 .
     SMIL
的一个有趣方面是,媒体内容的 型不是得自元素名,而是来自服 器,操作系 或元素的 type 属性,后者定
MIME

    
如果你希望在文档中引用 SMIL DTD 码应 这样 :
     <!DOCTYPE smil PUBLIC "-//W3C//DTD SMIL 1.0//EN"
                    "
http://www.w3.org/TR/REC-smil/SMIL10.dtd ">
    
,注意 SMIL 不允 你利用 DTD
    
    
以下几 SMIL 元素,它 的属性,它 可能的内容及它 的父代元素。本教程末尾,你将找到一个完事的 SMIL 文档 .
 
a
  
   a
元素是一个 接,它 化不起任何作用,只是 接其他 源的一 手段而已。 元素就像 HTML a 元素一 ,主要是因
属性表包含 show 属性,它描述 a 元素所指向 源的不同替 模式。另一个区 是不使用它 接文本 ( 文本是一 媒体源 ) 。确
,你把媒体源 藏在 注中,如例子所示。
  
属性
      id 惟一地确定文档内的元素。其 是XML 标识 符和ID属性
      href 一个包含
接目的地URI的必不可少的属性
      show 控制
接在三 可能模式之 接活 :replace(意思是当前表示由被 象替代),new(意思是被 象作
          
始)和pause(意思是包含 接的表示 停,被 象在一个新 境下 始被 接的表示完成播放后,被 停的表示
           重新
始)
内容
      animation,audio,img,par,ref,seq,switch,text,textstream和video元素

   父代元素      body,par,seq和switch元素
     
例:
    在本例中,
 
接作 到文档另一部分的一 手段。 接如何在一个完整文档中 作的例子, 程序清 ,在 程序清
a
元素将幻灯片放映从一幡幻灯片推 到另一幅。它是 这样实现 的:借助指向文件 (pictures.smi, 在本例中,恰好是包含 接的同一文件 )
接,然后利用一个 标识 (#) 引用 文件内的一个特定元素,在本例中,是 id 属性 值为 slide1 的一个 par 元素
    <a href="pictures.smil#slide1" show="replace">
         <img id="NavRintro" region="RButtonRegion" src="rArrow.jpg" repeat="1" fill="remove"/>
    </a>
 
anchor
   
此元素使你 接一个元素的各部分, 似于 HTML 中使用 的方式。 元素的 关键 coords 属性,它定 义链 接所指部分的坐 集。

  
属性
       begin 指定元素 始状 时间 ,借助两个可能 :delay-value( 该值 度量表示 时间 ) 和event-value( 是一个事件触 器)
       coords 指定一个
示区内的矩形坐
       end 指出元素的明确
束(使用与 始元素相同的 )
       id
惟一确定文档内的元素.它的 是一个XML 标识 符和一个ID属性
       show 控制
接在三 可能模式之 接活 :replace(意思是当前表示由被 象替代),new(意思是被 象作
          
始)和pause(意思是包含 接的表示 停,被 象在一个新 境下 始被 接的表示完成播放后,被 停的表示
           重新
始)
       skip-content 用于管理未来SMIL版本元素,借助两个
:true或false.如果是true, 忽略 元素.
       title 一个属性,用于以某
的方式命名一个元素, 元素可能被播放器以某 方式
    内容
      
是一个空元素
    父代元素
       animation,audio,img,ref,text,textstream和video元素周期律
例:
    本例
建一个 视频 内的 像映射 。活 动链 接区由coords属性指定的坐
    <video src="myVideo.rm" region="RegionId">
         <anchor href="http://www.javertising.com" show="pause" coords="10,30,70,100" begin="5s" end="30s"/>
    </video>
 
animation
   
   
是一个定 义动 画的 连续 媒体元素,与其他媒体元素一 ,媒体播放器不是通 元素名是借助元素的属性 ( type 属性 ,
媒体播放器提供元素的 MIME ) 提供的信息来 于元素及如何播放它的信息。
属性
     abstract
名思 属性提供元素内容的 要描述
     alt 指出媒体播放器存取内容不支持
元素 的替代文本
     author 表示内容的作者名
     begin
anchor 元素属性表
     clip-begin 指出子剪
画的 始,利用下述 的一个, 均由 这种语 法定 :
         clip-beign="npt=0.1h",
度量 位及其相 关值 是:
           smpte="YourTime"或smpte-30-drop="YourTime"或smpte-25="YourTime",其中YourTime等于由
,分和秒表示的 时间
         
如:clip-begin="smpte=10:12:33:20".SMPTE是 电视 工程 师协 开发 的一 种时间标
           npt(正常播放
时间 ), 以常 SMIL 时钟值 表达的 时间
     clip-end
指出子剪 画的 束,利用与clip-begin相同的 如果其 超出媒体 象的持 续时间 忽略 该值
     copyright
包含元素内容的版 声明
     dur
指出一个元素的持 续时间
     end
anchor 元素属性表
     fill
控制子元素的持 续时间 ,借助两个 remove freeze. 细节 取决于在那里使用什 元素
     id
惟一确定文档内的元素。它的 是个 XML 标识 符和一个 ID 属性
     longdesc
包含指向一个媒体 象的冗 的描述的 URI
     src
指定媒体 象的 URI
     system-bitrate
定近似 带宽 ,以 秒位 为单 ( 例如,如果 期用 机器上使用 56K MODEM 属性 值对应 :system-birate="56000")
     system-cpations
就像 on off 属性 指示的那 控制字幕 选项
     system-language
逗号分界的 言列表,由 RFC1766 或代 ( 例如 ,system-language="ja" 表示系 统语 言是日 )
     system-overdub-or-caption
借助两个 overdub caption 中的一个确定使用配音 是字幕 .
    
system-required 指出 展名
     system-screen-size 利用如下所示属性
值对 指出屏幕大小:system-screen-size="1024X768"
     system-scrren-depth 提供
示元素 需要的屏幕 色板深度的信息,以位 为单 位,一般使用下述 之一:1,8,16,24或32,指派32深度
     title 提供
元素 予有意 名字的一条行径
     type src属性引用的媒体
象的MIME
 
内容
      anchor
元素
父代元素
      a,body,par,seq和switch元素(最后一个元素
控制屏幕深度和大小特 重要)
      <smil>
          <body>
             <par>
                 <animation src="rstp://realserver.javertising.com:554/media.swf"/>
              </par>
           </body>
      </smil>
2 时间 控制
1 dur 属性
大家看看下面 段代 的效果。
< smil>
< head>
< /head>
< body>
< seq>
< img src="image1.jpg" dur="5s"/>
< img src="image2.jpg" dur="10s"/ >
< /seq>
< /body>
< /smil>
相信大家已 看出 道了! 了,我 们这 image1.jpg 和image2.jpg的持 续时间 做了 定。 其中 image1.jpg 续时间 5 秒, image2.jpg 续时间 10 秒。
2 begin end 属性
上面 定的是播放多 长时间 ,我 也想 定在什 么时 始播放。 看下面的程序。
< 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 player firstrun.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 秒!大家在以后写程序的 候要注意 问题
(3)clip-begin和clip-end属性
虑这样 效果:
只要test.rm播放 视频 / 的5~10秒 时间 断,怎 么办 ???J有了clip-begin和clip-end, 问题 就很 简单 了!
看:
< smil>
< body>
< video src="test.rm" clip-begin="5s" clip-end="10s"/>
< /body>
< /smil>
clip-begin和clip-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 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>
< video src="test.rm" dur="30s" fill="freeze"/>
< /body>
< /smil>
test.rm 度是 20 秒,那 们这 定的就是:在 test.rm 播放 了以后,屏幕上 示的是 test.rm 的最后一 (通俗的 就是最后一幅画面), 示的 时间 30-20=10 秒;如果是 片的 ,那 么显 示就是 片。
Fill
属性只有 remove freeze 两个,默 值为 remove 。建 大家在演示的最后的一个多媒体片断上用 冻结 freeze ),以防止屏幕上空空如也! J
5 repeat 属性
如果我 希望我 演示中的某个片断或者全部的片断重 播放若干次(姑且 设为 2 次)。那 可以后用 repeat 属性来 实现该 效果。分析下面 个例子:
< smil>
< body>
< vedio src="test.rm" dur="1min" repeat="2"/>
< /body>
< /smil>
上面 个例子就是 test.rm 播放两次。如果我 某个片断一直播放下去(网 光广告上可以考 虑这 个),那 repeat="indefinite" 就可以了。当然,想要它停下来的一 方法是按下播放器 stop (停止) (在网 插件中就是右 中的 stop );另外的一 种办 ( 大家都知道的 ) 关闭计 算机!
4
接制作
传统 的流媒体的最大的一个弊端是没有交互性( Interaction )。 在如日中天的 flash 上就是一 可交互性的流!由此可 可交互性的流的市 潜力。而 SMIL 是解决大部分流媒体交互性的最好的工具! 部分要求大家必 掌握,如果没有的 ,那 SMIL 就失去了意 。因 为这 里是 SMIL 的主要特色(与其他的 视频编辑软 件相比 ),就好像指 C 言的特色一
(1)< a>< /a> 标记
运行下面 个程序:
< 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.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 src="1.avi" region="videoregion">
< anchor href="1.jpg" begin="0s" end="10s" >
< anchor href="videotest.rm" begin="10s" end="20s" />
< /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>
< 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>
第一个 SMIL 文件,取名 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 用的很多的 候是 内内容。我 test11app.smil 修改
< body>
< par id="testlink">
< video src="1.avi" clip-begin="150" region="videoregion"/>
< /par>
< /body>
里, 接可以 很完美了。但是,如果要 上添花,那 下面 个属性是必不可少的。
(3)coords属性
将上面的<anchor href="1.rm"/>代
修改
< anchor href="1.rm" coords="0, 0,150,300"/>
或者:
< anchor href="1.rm" coords="0%, 0%,50%,100%"/>
运行,看看效果。
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>
< 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>
个例子中的前面的两个文件用的是基地址服 器上的文件,所以,可以之写出相 地址。但是,后面的两个文件用的是其他服 器上的文件,我 须给 绝对 地址。其中 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" 文件。
大家在
用文件之前,一定要弄清楚文件的位置!
7 转场 效果
首先解 一下什 转场 效果。我 的演示中多媒体片断是很多的,不可避免的会有两个片断之 的切 。例如:一个 片演示完了, 接着演示下一个 片,两 片中 是有一个 渡的。 渡我 就称 谓转场 效果。如果我 转场 效果,那 渡的效果肯定不好。 LSMIL 中的 转场 效果大致分 wipe fade
(1) fade
从名字就可以看出, 个是淡入淡出的效果。先睹 快! J   看例子!
< 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>
a transition 声明我 转场 效果。 id="fade1" 置了 该转场 效果的 id 号。 id 号必 须设 置。 type="fade" 置了 转场 效果的基本 fade subtype="fadeToColor" 置了 转场 效果的具体 型(子 型) fadeToColor (注意 里又是我 提到的 骆驼 写法!)。 dur="4s" 置了 该场 效果完成的 时间
b 、transIn="fade2" 置了 片g04.jpg 采用 转场 效果fade2; transOut="fade1" 片g04.jpg完成 采用 转场 效果fade1。
c、fade只有三个子
型。 上面我 用了2个。 有一个是 crossfade 个也是缺省 置。
(2) wipe
wipe
擦去 型。 该类 型的效果很多很多。我 们这 里所 wipe 只是他 称(注意 wipe 不能作 type 的属性 ,而是它的子 type 的属性 ,子 的子 subtype 的属性 J 谁让 它的属性 值这么 多!!!)。具体的有 barWipe boxWipe fourBoxWipe 36 !!! 不管它有多少 ,先看看怎 弄。 看例子:
< 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>
a JJJ 和上面的写法基本上是一致的!
b
type="waterfallWipe" 后面没有子 型表示使用的是 waterfallWipe 型的默 型。
(3)
上面都只是用在 个多媒体片断上的 转场 效果。下面看看在多个多媒体片断上怎 样设 转场 效果。 得看例子: J
< 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>
a fadeColor="green" 置了 入色 为绿 色( green )。在 里表示的就是从当前的多媒体片断 渐变为绿 色。下面的 fadeColor="red" 表示从 渐变为 当前的多媒体片断(如果是 则变为图 片,如是 视频则变为 第一 )。
b 、fill="transition"表示的是最后的完成效果有下面的 转场 效果来决定。
c、最后一个就不能用fill="transition"了。想想,它就是最后一个了,上哪里去找下面的
转场 效果呢?
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值