| 導購 | 订阅 | 在线投稿
分享
 
 
 

「笑」傲流媒體―SMIL基礎教程

2008-06-01 02:08:58  編輯來源:互聯網  简体版  手機版  評論  字體: ||
 
  「笑」傲流媒體―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="Wingdings">J 考慮這樣一個實際問題:假如我們現在想把一段電視采訪的實況(視頻文件)加上解說(包括聲音解說(音頻文件)和文字解說)。姑且假定例子中的視頻文件是甲服務器上的A文件,音頻文件是乙服務器上的B文件,而解說文字卻是丙服務器上的C文件。傳統的方法在這裏就束手無策了(窮途末路了J),而SMIL可以非常輕松的做到這一點。

  (3)時間控制

  假如我們不想用整個視頻文件,而只想用其中的某一部分。傳統的方法中唯一可行的就是用剪輯軟件來剪輯。費時費力不說,弄不好就弄巧成拙,把想要的給剪掉了!而SMIL完成這件事真的是易如反掌!看這樣一個例子:設視頻文件A的時間長度是10秒,我們要用的是2~5秒,其他部分我們不想要,只要用 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!所以我建議大家使用它。大家可以從http://www.realnetworks.com/上下載,國內的很多的網站上也提供下載。下載GOLD版,不要下載BETA版。

  2、 我們編輯SMIL源文件(程序)用的是windows附件中的記事本,希望檢查一下你的記事本是否正常。當然,任何普通的文本編輯器都是可以的(ultra Edit就很不錯),但是考慮到大家學習的方便,故使用最輕易找到的記事本來編輯。

  3、 在我們的學習階段,我希望我們大家不要用專門SMIL編輯器。一方面,現有的這些SMIL編輯器不太好用。另一方面,那樣也不利于我們徹底理解SMIL語言。

  二、 SMIL基本知識

  下面我們看一個實際的SMIL的例子(用記事本編寫就可以,注重:在英文狀態下編輯。也就是不要打開中文輸入法。因爲SMIL播放器不熟悉中文的標點符號!):

  < smil>

  < head>

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

  < layout>

  < !-- layout 標記 -->

  < /layout>

  < /head>

  < body>

  < !—媒體標記 -->

  < img src="http://www.QQread.com/cpp/image1.jpg"/>

  < /body>

  < /smil>

  顯然,SMIL和HTML語言的語法格式非常相像!所以,假如大家對HTML熟悉的話,SMIL學習起來就很輕易。但是,二者的差別是很大的,所以假如想學的很好,大家一定要認真地學!

  從上面這個例子可以看出:

  (1) SMIL程序以<smil>開始,以</smil>結束。

  SMIL必須以<smil>開始,以</smil>結束,其他的一切標記都在這二者之間。這個和HTML似乎是一樣的。

  (2) 整個程序由body和head兩個部分組成

  其中body是必須要有的。而head部分則看實際情況。假如需要的話,我們就寫。若是整個SMIL程序非常簡單並且沒有必要用head部分,那麽,我們可以不寫。從個人的經驗來看,假如要寫出一個效果好的演示,head部分是必不可少的!J

  (3) 屬性和標記要求小寫

  SMIL要求其標記和標記的屬性必須小寫!

  我們在這裏不想給出屬性和標記的定義。SMIL語言就是由標記組成的。每一行都是標記,而標記基本上都有屬性。例如:< img src=http://www.qqread.com/cpp/"image1.jpg"/>中,img是標記,而src是屬性,image1.jpg是src的屬性值。注重:屬性值可以大小寫都可以。後面我們會碰到有些屬性值要求駱駝寫法。什麽是駱駝寫法?像fadeTocolor這樣的屬性值(看看,中間高,兩邊低,是不是非常像駱駝的駝峰?J)就是駱駝寫法。

  (4) 有些標記必須有一斜杠作爲結束標記

  在SMIL中,假如標記不是配對標記(例如:< smil>< /smil>、< head>< /head>、< body>< /body>等),那麽,必須有一斜杠作爲結束標記(例如:< img src ="image1.jpg"/>)。

  (5) 屬性值必須用雙引號括起來

  例如:src="http://www.qqread.com/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) 附加信息寫在< head>< /head>之間

  假如我們有些關于源代碼的一些說明也就是附加信息,例如版權、作者、標題、基地址等等,我們可以在< head>< /head>中說明。其基本的格式是:< meta name=" " content=" " />,例如:< meta name="author " content="litterone " />< meta name="title " content ="I want to learn SMI:L " />。

  (8) 用< !-- … -->進行注釋

  這個標記和HTML裏面的是一揚的。我們可以對我們的源文件進行注釋。SMIL播放器碰到這個標記後,將跳過去而不予理睬。例如:我們可以在寫源代碼以前,將我們想要實現的效果在< !-- … -->中寫出來,然後在編寫源代碼,假如我們忘記了刪除該段說明,也不會影響演示的執行。

  

  

  上面簡單介紹了SMIL語言的基本知識,接下來要詳具體細地學習SMIL!

  三、 SMIL具體解析SMIL語言的內容很多,我們從最常用的開始談起。(預備好了嗎?上路了!)1、 多媒體片斷結構組織(1)< seq>< /seq>標記我們首先看下面這個例子:< smil> < head> < /head> < body>< seq>< img src="http://www.qqread.com/cpp/image1.jpg"/>< img src ="image2.jpg"/>< /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>< img src="http://www.qqread.com/cpp/image1.jpg"/>< img src="http://www.qqread.com/cpp/image2.jpg"/>< /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> < img src="http://www.qqread.com/cpp/image1.jpg"/> < par> < img src="http://www.qqread.com/cpp/image2.jpg"/> < img src="http://www.qqread.com/cpp/image3.jpg"/> < /par> < img src="http://www.qqread.com/cpp/image4.jpg"/>< /seq> < /body>< /smil>

  這個例子的效果是這樣的:Realone player先顯示image1.jpg,接下來同時顯示image2.jpg和image3.jpg, 然後顯示image4.jpg。爲什麽會這樣?其中原因我想大家一定非常清楚了。我就不羅嗦了。J

  有了< seq>< /seq>和< par>< /par>這樣兩對標記後,我們對多媒體片斷播放的先後順序的控制就變得非常方便了。但是,我們上面的這些演示雖說是演示了。但是,它們的顯示時間似乎沒有受到我們的控制。接下來著手解決這個問題。

  2、 時間控制

  (1)dur屬性

  請大家看看下面這段代碼的效果。

  < smil>

  < head>

  < /head>

  < body>

  < seq>

  < img src="http://www.qqread.com/cpp/image1.jpg" dur="5s"/>

  < img src="http://www.qqread.com/cpp/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="http://www.qqread.com/cpp/image1.jpg" begin="2" dur="5s"/>

  < /body>

  < /smil>

  這個例子的效果是這樣的:Realone player先顯示image1.jpg,接下來同時顯示image2.jpg和image3.jpg, 然後顯示image4.jpg。爲什麽會這樣?其中原因我想大家一定非常清楚了。我就不羅嗦了。J

  有了< seq>< /seq>和< par>< /par>這樣兩對標記後,我們對多媒體片斷播放的先後順序的控制就變得非常方便了。但是,我們上面的這些演示雖說是演示了。但是,它們的顯示時間似乎沒有受到我們的控制。接下來著手解決這個問題。

  2、 時間控制

  (1)dur屬性

  請大家看看下面這段代碼的效果。

  < smil>

  < head>

  < /head>

  < body>

  < seq>

  < img src="http://www.qqread.com/cpp/image1.jpg" dur="5s"/>

  < img src="http://www.qqread.com/cpp/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="http://www.qqread.com/cpp/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="http://www.qqread.com/cpp/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);另外的一種辦法(大家都知道的)是關閉計算機!J

  3、 布局設計

  我們這裏所說的布局就是在我們的屏幕上定出各個多媒體片斷顯示的位置(單純的聲音文件是不需要布局的!爲什麽?J 因爲我們的耳朵聽不出聲音在屏幕上的什麽地方;而我們的眼睛可以看到圖片、動畫和文字在什麽地方!),准確地說是在播放器中。從前面我們並行播放的例子可以看出來,假如我們不對布局進行設計,那麽顯示的效果一塌糊塗!這裏是SMIL的重點和精華部分之一,打起精神,Let』s go!

  

   (1) 定義基本顯示窗口

  看下面的代碼:

  < smil>

  < head>

  < layout>

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

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

  說明:

  a、< region id="vedio_region" left="5" top="5" width="290" height= "260" />定義多媒體片斷顯示窗口,它的id是vedio_region,這個id是必須要的(在SMIL中,有的id號是可以省略的,但是我們建議大家都寫上,這樣很輕易把整個SMIL文件的脈絡弄清楚)!離頂端和左段各有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這個區域顯示。

  該例子布局效果如下圖:

  上面我們對多媒體片斷顯示窗口的采用的是絕對定義的方法。多媒體片斷顯示窗口也可以用相對定義的方法來定義。例如:

  <region id="vedio_region" top="10%" left="10%" width="80%" height="80%"/>

  上面的比例是相對基本顯示窗口而言的。這樣的定義方法更爲直觀。

  (3) fit屬性

  在實際制作演示的時候,我們碰到了這樣的問題:我們定義的顯示窗口的大小和我們的多媒體片斷的尺寸大小不一致,或大了或小了。相信大家也會碰到這樣的問題。解決的辦法有:

  a、 修改窗口的大小(但是,很多時候我們沒有辦法修改。因爲,假如修改的話,那麽會影響其他窗口的顯示。相應的其它窗口也得修改。實際情況是:我們很多的不同尺寸的多媒體片斷都可能在同一個窗口中顯示!)。

  b、 使用恰當的多媒體片斷和窗口的匹配方式。

  看小面這段代碼:

  < region id="vedio_region" width="80%" height="80%" fit="meet"/>

  它的意思就是窗口vedio_region以meet方式顯示多媒體片斷。

  fit屬性的屬性值有hidden、meet、fill、scroll和slice四個。其中hidden是默認的屬性值。

  Hidden表示保持多媒體片斷的尺寸不變,從窗口的左上角開始顯示。假如多媒體片斷尺寸比窗口的尺寸小,那麽空白的地方將用背景色填充。假如多媒體片斷尺寸比窗口的尺寸大,那麽多媒體片斷超出窗口部分被裁去,不被顯示。個人不喜歡這樣的方式。

  meet表示在保持多媒體片斷寬/高比例不變的情況下,對多媒體片斷的尺寸進行縮放。從左上角開始顯示,縮放到高度和寬度中的一個尺寸等于窗口的相應的尺寸,而另外的一個小于窗口的相應的尺寸。空白處用背景色填充。我喜歡這個!

  fill表示縮放多媒體片斷使得其大小正好和窗口的大小一致。假如多媒體片斷的寬/高比例和窗口的寬/高比例不等,那麽多媒體片斷就會變形,非常難看。強烈建議不要采用這種方式!

  scroll表示對多媒體片斷的尺寸不做什麽修改,它以正常的尺寸大小顯示。但是,假如多媒體片斷的尺寸超出了窗口的尺寸,那麽將會相應出現水平或者垂直滾動條。該種發式適合于長時間的多媒體片斷的顯示。假如多媒體片斷的顯示時間很短,建議不要使用!

  slice表示在保持多媒體片斷寬/高比例不變的情況下,對多媒體片斷的尺寸進行縮放。從左上角開始顯示,縮放到高度和寬度中的一個尺寸等于窗口的相應的尺寸,而另外的一個大于窗口的相應的尺寸。超出的不分被裁去而不顯示。

  各個匹配的效果請參見下圖(省去scroll效果)

  (4)z-index屬性

  先試運行下面的源程序:

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

  我想大家已經看出來了:我們這裏想做的就是那種電視的畫中畫效果。但是在實際顯示的時候,我們的小畫面有時候被大畫面所覆蓋。我的苦心也白費了。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屬性規定相互重疊的窗口的顯示次序。數字大那麽顯示就在上面。這個很輕易理解,我們就不說太多。但是以下幾點要注重:

  a、root層窗口總是在最後一層,並且不用z-index屬性。

  b、z-index屬性值可以是負數。當然它就的排在0以後。

  c、 沒有重疊的窗口可以使用同一z-index屬性值。

  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="http://www.qqread.com/cpp/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.qqread.com/cpp/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"進行讀取該文件。

  大家在調用文件之前,一定要弄清楚文件的位置!

  5、語言選擇和智能流

  (1)語言選擇

  假如,我們想要擴大我們演示的收看人群,那麽我們的聽衆就會有中國人、美國人、法國人、俄羅斯等等。那麽怎樣才能提供這種多國語言的支持呢?

  Switch屬性是該問題的「殺手」!

  請看例子:

  < smil>

  < body>

  < switch>

  < video src="English.rm" system-language="en-us"/>

  < video src="Chinese.rm" system-language="zh-cn"/>

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

  < vedio src="highspeed.rm" system-bitrate="250000"/>

  < vedio src="midspeed.rm" system-bitrate="80000"/>

  < vedio src="lowspeed.rm" system-bitrate="20000"/>

  < /switch>

  < /body>

  < /smil>

  當用戶的聯網速度大于250kbps時,播放器就從服務器下載highspeed.rm播放;假如用戶的聯網速度大于80kbps小于 250kbps時,播放器就從服務器下載midspeed.rm播放;假如用戶的聯網速度大于20kbps小于80kbps時,播放器就從服務器下載 lowspeed.rm播放。所謂的「衆口難調」在各位的手裏就變得如此簡單!J

  上面講的就是智能流(surestream)的本質實現方法!我們下面看一個複雜的一點的例子。

  < 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而小于250000bps時,播放該組-->

  < 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而小于80kbps時,播放該組-->

  < audio src="audio/music3.rm"/>

  < video src="video/video3.rm" region="videoregion"/>

  < text src="words/narration.txt" region="textregion"/>

  < /par>

  < /switch>

  < /body>

  (3)語言與速度的同時檢測 < 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" /> < !--美國英文並且速度大于14kbps --> < text src="english_28000.txt" system-language="en-us" system- bitrate="14000" /> < /switch> < /body>(4)演示速度的控制上面我們講的是在演示文件已經創建好的條件下進行的。那麽,我們怎樣制作好多媒體片斷。下面是我們的建議:a、 用RealprodUCer或者其他的壓縮工具制作流文件時,選擇正確的壓縮比例。爲高速用戶預備的文件的壓縮比可以小一些,對于低速用戶預備的文件的壓縮比要大一點。b、 在網絡傳輸過程中,視頻占用的帶寬是最多的,音頻次之,接下來是動畫、圖片,文字是最少的。所以,我們充分考慮我們的演示的結構。例如:假如並行播放多個視頻,這顯然是不合適的。我們可以用圖片來替代一部分視頻效果。

  c、 我們在傳輸中不能全部占用用戶的帶寬,必須留出一部分給用戶浏覽網頁或者是幹其它用途的。JJJ我們很多的年輕人當然是用于QQ 聊天!下表列出了我們的建議。

  用戶速度 建議最大流占用帶寬

  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

  在我們以後的制作中。上面的這些知識是非常實用的。大家一定要努力把握!

  6、 動畫效果

  我們前面學習的內容是SMIL1.0規定的。在SMIL2.0中添加了不少的內容,其中動畫就是其中一個。很多的國外的教程上把flash文件 *.swf歸爲這一類。我們不能同意這樣的分類方法。我們認爲把這樣已經做好的動畫該歸爲視頻一類。真正的動畫(從SMIL2.0規範中可以看出來)是有 SMIL規定的並有SMIL播放器解釋産生的動畫。

  從實際情況來看,動畫效果主要是針對圖片産生的。所以,我們在這裏用圖片來做例子。其他的多媒體的制作方法是類似的。有愛好的GG、JJ、DD和MM可以自己做做。

  (1) 運動動畫

  爲先睹爲快,請在Realone player中運行下面的程序:

  < 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="http://www.qqread.com/cpp/g03.jpg" dur="6s">

  < animateMotion from="0 0" to="600 400" dur="4s"/>

  < /img>

  < /body>

  < /smil>

  解釋:a、我們這裏用到的是SMIL2.0規範中的規定的內容的。所以,在第一行裏(xmlns="http://www.w3.org/2000/SMIL20/CR/Language")我們必須聲明我們所用的規範。不然的話,播放器可能不能正確解碼、播放。

  b、 animateMotion標記聲明的是我們所要的動畫類型。注重:這裏就是我們所說的駱駝寫法,還記得吧!JJ

  c、 from="0 0" to="600 400"屬性及其屬性值聲明的是動畫從坐標點(0,0)運動到坐標點(600,400)。這裏我們也可以寫成:< animateMotion from="0,0" to="600,400" dur="4s"/>

  d、 dur="4s"屬性及其屬性值聲明的是動畫在4秒內完成。在我們這個例子中,圖片的存在時間是6秒,那麽動畫完成後,將有2秒鍾的時間靜止不動。假如圖片的存在時間小于動畫存在時間,那麽動畫運動到半路上就的停止,這樣的情況是該避免的。

  (2) 縮放動畫

  下面我們看看另外的一種動畫形式:縮放動畫。先看效果!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="http://www.qqread.com/cpp/g03.jpg" width="400" height="320">

  < animate attributeName="height" from="320" to="160" fill="freeze" dur="10s"/>

  < /img>

  < /body>

  < /smil>

  解釋:animate attributeName="height" from="320" to="160"聲明了動畫的類型和參數。大家看了效果以後,在結合上面的參數的意義,各參數是什麽意思我們也就不用多講了。J

  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="http://www.qqread.com/cpp/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="http://www.qqread.com/cpp/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="http://www.qqread.com/cpp/g06.jpg" transIn="fade1" fill="transition"/>

  < img dur="4s" src="http://www.qqread.com/cpp/g05.jpg" transIn="fade2" fill="transition"/>

  < img dur="4s" src="http://www.qqread.com/cpp/g06.jpg" transIn="fade2" fill="transition"/>

  < img dur="4s" src="http://www.qqread.com/cpp/g05.jpg" transIn="push" transOut="fade"/>

  < /seq>

  < /body>

  < /smil>

  解釋:a、fadeColor="green"設置了談出談入色爲綠色(green)。在這裏表示的就是從當前的多媒體片斷漸變爲綠色。下面的fadeColor="red"則表示從紅色漸變爲當前的多媒體片斷(假如是圖片則變爲圖片,如是視頻則變爲第一幀)。

  b、fill="transition"表示的是最後的完成效果有下面的轉場效果來決定。

  c、最後一個就不能用fill="transition"了。想想,它就是最後一個了,上哪裏去找下面的轉場效果呢?

  四、後記感謝大家一路陪伴!我們終于完成了SMIL基礎性學習。SMIL的內容是很豐富的,由于作者的水平、時間和精力有限,研究的不是很深。這次真的體會到學習一種新的語言的難度比學習軟件的應用難度大很多,而這是不可以同日而語的。我們所提到的是非常基礎、非常重要、非常實用的部分。假如大家有愛好想進一步研究,可以看看SMIL2.0規範。它位于http://www.w3c.org/下,大家可以下載下來看看。下面該交待的是SMIL目前支持的媒體對象:animation 、video、 audio、 img、 text和 textstream。它們所能支持的格式由我們選擇的播放器來決定。下面我們要談到這個問題。雖然,SMIL的優點很多,但是缺點也是有的。1、 播放器太少目前全面支持SMIL2.0的播放器只有 Realone player。而支持SMIL1.0的播放器卻很多。例如:Quicktime(蘋果(appleInc.)公司),soja(一個用 Java語言編寫的播放器,體積很小,效果不錯。嵌在網頁上是在好不過了)。這個問題我想不久就會得到解決。2、 各播放器不太兼容我們在*.smil文件中用的多媒體的格式必須考慮到播放器所能支持的格式。例如:Realone player支持的流文本(stream text)格式*.rt非常不錯。可是,很少有其他的播放器支持該中格式。Quicktime支持*.mov格式,這種格式也是非常棒的。然而,支持它的播放器寥寥無幾。相信隨著各個播放平台的功能的拓展,這個問題也會得到解決。3、 制作的工具匮乏目前我們沒有發現好的制作軟件。oratrix公司的 GRiNS Editor for RealONE用起來並不方便。而Flution則似乎是個人業余寫的程序,用起來比 GRiNS Editor for RealONE舒適些,但是感覺也不是很好。假如演示不是非常複雜,可以用Real slideshow來做,效果不錯,使用也非常簡單。假如愈來愈多的公司來寫這樣的編輯軟件,那麽將來肯定會有很多好的SMIL:編輯軟件。就像今天的html的Dreamweaver 一樣強。4、中文的支持能力差 我們上面提到可以使用*.txt文件。假如*.txt文件的內容是英文的,那麽一切都非常好。

  

   但是,假如是中文的話,顯示的就是一對亂碼。由于個人的水平有限,到目前爲止,依然沒有找到中文顯示的解決辦法。
 
「笑」傲流媒體―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="Wingdings">J 考慮這樣一個實際問題:假如我們現在想把一段電視采訪的實況(視頻文件)加上解說(包括聲音解說(音頻文件)和文字解說)。姑且假定例子中的視頻文件是甲服務器上的A文件,音頻文件是乙服務器上的B文件,而解說文字卻是丙服務器上的C文件。傳統的方法在這裏就束手無策了(窮途末路了J),而SMIL可以非常輕松的做到這一點。 (3)時間控制 假如我們不想用整個視頻文件,而只想用其中的某一部分。傳統的方法中唯一可行的就是用剪輯軟件來剪輯。費時費力不說,弄不好就弄巧成拙,把想要的給剪掉了!而SMIL完成這件事真的是易如反掌!看這樣一個例子:設視頻文件A的時間長度是10秒,我們要用的是2~5秒,其他部分我們不想要,只要用 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!所以我建議大家使用它。大家可以從http://www.realnetworks.com/上下載,國內的很多的網站上也提供下載。下載GOLD版,不要下載BETA版。 2、 我們編輯SMIL源文件(程序)用的是windows附件中的記事本,希望檢查一下你的記事本是否正常。當然,任何普通的文本編輯器都是可以的(ultra Edit就很不錯),但是考慮到大家學習的方便,故使用最輕易找到的記事本來編輯。 3、 在我們的學習階段,我希望我們大家不要用專門SMIL編輯器。一方面,現有的這些SMIL編輯器不太好用。另一方面,那樣也不利于我們徹底理解SMIL語言。 二、 SMIL基本知識 下面我們看一個實際的SMIL的例子(用記事本編寫就可以,注重:在英文狀態下編輯。也就是不要打開中文輸入法。因爲SMIL播放器不熟悉中文的標點符號!): < smil> < head> < meta name="copyright" content="Your Name" /> < layout> < !-- layout 標記 --> < /layout> < /head> < body> < !—媒體標記 --> < img src="http://www.QQread.com/cpp/image1.jpg"/> < /body> < /smil> 顯然,SMIL和HTML語言的語法格式非常相像!所以,假如大家對HTML熟悉的話,SMIL學習起來就很輕易。但是,二者的差別是很大的,所以假如想學的很好,大家一定要認真地學! 從上面這個例子可以看出: (1) SMIL程序以<smil>開始,以</smil>結束。 SMIL必須以<smil>開始,以</smil>結束,其他的一切標記都在這二者之間。這個和HTML似乎是一樣的。 (2) 整個程序由body和head兩個部分組成 其中body是必須要有的。而head部分則看實際情況。假如需要的話,我們就寫。若是整個SMIL程序非常簡單並且沒有必要用head部分,那麽,我們可以不寫。從個人的經驗來看,假如要寫出一個效果好的演示,head部分是必不可少的!J (3) 屬性和標記要求小寫 SMIL要求其標記和標記的屬性必須小寫! 我們在這裏不想給出屬性和標記的定義。SMIL語言就是由標記組成的。每一行都是標記,而標記基本上都有屬性。例如:< img src=http://www.qqread.com/cpp/"image1.jpg"/>中,img是標記,而src是屬性,image1.jpg是src的屬性值。注重:屬性值可以大小寫都可以。後面我們會碰到有些屬性值要求駱駝寫法。什麽是駱駝寫法?像fadeTocolor這樣的屬性值(看看,中間高,兩邊低,是不是非常像駱駝的駝峰?J)就是駱駝寫法。 (4) 有些標記必須有一斜杠作爲結束標記 在SMIL中,假如標記不是配對標記(例如:< smil>< /smil>、< head>< /head>、< body>< /body>等),那麽,必須有一斜杠作爲結束標記(例如:< img src ="image1.jpg"/>)。 (5) 屬性值必須用雙引號括起來 例如:src="http://www.qqread.com/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) 附加信息寫在< head>< /head>之間 假如我們有些關于源代碼的一些說明也就是附加信息,例如版權、作者、標題、基地址等等,我們可以在< head>< /head>中說明。其基本的格式是:< meta name=" " content=" " />,例如:< meta name="author " content="litterone " />< meta name="title " content ="I want to learn SMI:L " />。 (8) 用< !-- … -->進行注釋 這個標記和HTML裏面的是一揚的。我們可以對我們的源文件進行注釋。SMIL播放器碰到這個標記後,將跳過去而不予理睬。例如:我們可以在寫源代碼以前,將我們想要實現的效果在< !-- … -->中寫出來,然後在編寫源代碼,假如我們忘記了刪除該段說明,也不會影響演示的執行。 上面簡單介紹了SMIL語言的基本知識,接下來要詳具體細地學習SMIL! 三、 SMIL具體解析SMIL語言的內容很多,我們從最常用的開始談起。(預備好了嗎?上路了!)1、 多媒體片斷結構組織(1)< seq>< /seq>標記我們首先看下面這個例子:< smil> < head> < /head> < body>< seq>< img src="http://www.qqread.com/cpp/image1.jpg"/>< img src ="image2.jpg"/>< /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>< img src="http://www.qqread.com/cpp/image1.jpg"/>< img src="http://www.qqread.com/cpp/image2.jpg"/>< /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> < img src="http://www.qqread.com/cpp/image1.jpg"/> < par> < img src="http://www.qqread.com/cpp/image2.jpg"/> < img src="http://www.qqread.com/cpp/image3.jpg"/> < /par> < img src="http://www.qqread.com/cpp/image4.jpg"/>< /seq> < /body>< /smil> 這個例子的效果是這樣的:Realone player先顯示image1.jpg,接下來同時顯示image2.jpg和image3.jpg, 然後顯示image4.jpg。爲什麽會這樣?其中原因我想大家一定非常清楚了。我就不羅嗦了。J 有了< seq>< /seq>和< par>< /par>這樣兩對標記後,我們對多媒體片斷播放的先後順序的控制就變得非常方便了。但是,我們上面的這些演示雖說是演示了。但是,它們的顯示時間似乎沒有受到我們的控制。接下來著手解決這個問題。 2、 時間控制 (1)dur屬性 請大家看看下面這段代碼的效果。 < smil> < head> < /head> < body> < seq> < img src="http://www.qqread.com/cpp/image1.jpg" dur="5s"/> < img src="http://www.qqread.com/cpp/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="http://www.qqread.com/cpp/image1.jpg" begin="2" dur="5s"/> < /body> < /smil> 這個例子的效果是這樣的:Realone player先顯示image1.jpg,接下來同時顯示image2.jpg和image3.jpg, 然後顯示image4.jpg。爲什麽會這樣?其中原因我想大家一定非常清楚了。我就不羅嗦了。J 有了< seq>< /seq>和< par>< /par>這樣兩對標記後,我們對多媒體片斷播放的先後順序的控制就變得非常方便了。但是,我們上面的這些演示雖說是演示了。但是,它們的顯示時間似乎沒有受到我們的控制。接下來著手解決這個問題。 2、 時間控制 (1)dur屬性 請大家看看下面這段代碼的效果。 < smil> < head> < /head> < body> < seq> < img src="http://www.qqread.com/cpp/image1.jpg" dur="5s"/> < img src="http://www.qqread.com/cpp/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="http://www.qqread.com/cpp/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="http://www.qqread.com/cpp/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);另外的一種辦法(大家都知道的)是關閉計算機!J 3、 布局設計 我們這裏所說的布局就是在我們的屏幕上定出各個多媒體片斷顯示的位置(單純的聲音文件是不需要布局的!爲什麽?J 因爲我們的耳朵聽不出聲音在屏幕上的什麽地方;而我們的眼睛可以看到圖片、動畫和文字在什麽地方!),准確地說是在播放器中。從前面我們並行播放的例子可以看出來,假如我們不對布局進行設計,那麽顯示的效果一塌糊塗!這裏是SMIL的重點和精華部分之一,打起精神,Let』s go! (1) 定義基本顯示窗口 看下面的代碼: < smil> < head> < layout> < 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> < 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> 說明: a、< region id="vedio_region" left="5" top="5" width="290" height= "260" />定義多媒體片斷顯示窗口,它的id是vedio_region,這個id是必須要的(在SMIL中,有的id號是可以省略的,但是我們建議大家都寫上,這樣很輕易把整個SMIL文件的脈絡弄清楚)!離頂端和左段各有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這個區域顯示。 該例子布局效果如下圖: 上面我們對多媒體片斷顯示窗口的采用的是絕對定義的方法。多媒體片斷顯示窗口也可以用相對定義的方法來定義。例如: <region id="vedio_region" top="10%" left="10%" width="80%" height="80%"/> 上面的比例是相對基本顯示窗口而言的。這樣的定義方法更爲直觀。 (3) fit屬性 在實際制作演示的時候,我們碰到了這樣的問題:我們定義的顯示窗口的大小和我們的多媒體片斷的尺寸大小不一致,或大了或小了。相信大家也會碰到這樣的問題。解決的辦法有: a、 修改窗口的大小(但是,很多時候我們沒有辦法修改。因爲,假如修改的話,那麽會影響其他窗口的顯示。相應的其它窗口也得修改。實際情況是:我們很多的不同尺寸的多媒體片斷都可能在同一個窗口中顯示!)。 b、 使用恰當的多媒體片斷和窗口的匹配方式。 看小面這段代碼: < region id="vedio_region" width="80%" height="80%" fit="meet"/> 它的意思就是窗口vedio_region以meet方式顯示多媒體片斷。 fit屬性的屬性值有hidden、meet、fill、scroll和slice四個。其中hidden是默認的屬性值。 Hidden表示保持多媒體片斷的尺寸不變,從窗口的左上角開始顯示。假如多媒體片斷尺寸比窗口的尺寸小,那麽空白的地方將用背景色填充。假如多媒體片斷尺寸比窗口的尺寸大,那麽多媒體片斷超出窗口部分被裁去,不被顯示。個人不喜歡這樣的方式。 meet表示在保持多媒體片斷寬/高比例不變的情況下,對多媒體片斷的尺寸進行縮放。從左上角開始顯示,縮放到高度和寬度中的一個尺寸等于窗口的相應的尺寸,而另外的一個小于窗口的相應的尺寸。空白處用背景色填充。我喜歡這個! fill表示縮放多媒體片斷使得其大小正好和窗口的大小一致。假如多媒體片斷的寬/高比例和窗口的寬/高比例不等,那麽多媒體片斷就會變形,非常難看。強烈建議不要采用這種方式! scroll表示對多媒體片斷的尺寸不做什麽修改,它以正常的尺寸大小顯示。但是,假如多媒體片斷的尺寸超出了窗口的尺寸,那麽將會相應出現水平或者垂直滾動條。該種發式適合于長時間的多媒體片斷的顯示。假如多媒體片斷的顯示時間很短,建議不要使用! slice表示在保持多媒體片斷寬/高比例不變的情況下,對多媒體片斷的尺寸進行縮放。從左上角開始顯示,縮放到高度和寬度中的一個尺寸等于窗口的相應的尺寸,而另外的一個大于窗口的相應的尺寸。超出的不分被裁去而不顯示。 各個匹配的效果請參見下圖(省去scroll效果) (4)z-index屬性 先試運行下面的源程序: < 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> 我想大家已經看出來了:我們這裏想做的就是那種電視的畫中畫效果。但是在實際顯示的時候,我們的小畫面有時候被大畫面所覆蓋。我的苦心也白費了。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屬性規定相互重疊的窗口的顯示次序。數字大那麽顯示就在上面。這個很輕易理解,我們就不說太多。但是以下幾點要注重: a、root層窗口總是在最後一層,並且不用z-index屬性。 b、z-index屬性值可以是負數。當然它就的排在0以後。 c、 沒有重疊的窗口可以使用同一z-index屬性值。 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="http://www.qqread.com/cpp/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.qqread.com/cpp/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"進行讀取該文件。 大家在調用文件之前,一定要弄清楚文件的位置! 5、語言選擇和智能流 (1)語言選擇 假如,我們想要擴大我們演示的收看人群,那麽我們的聽衆就會有中國人、美國人、法國人、俄羅斯等等。那麽怎樣才能提供這種多國語言的支持呢? Switch屬性是該問題的「殺手」! 請看例子: < smil> < body> < switch> < video src="English.rm" system-language="en-us"/> < video src="Chinese.rm" system-language="zh-cn"/> < /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> < vedio src="highspeed.rm" system-bitrate="250000"/> < vedio src="midspeed.rm" system-bitrate="80000"/> < vedio src="lowspeed.rm" system-bitrate="20000"/> < /switch> < /body> < /smil> 當用戶的聯網速度大于250kbps時,播放器就從服務器下載highspeed.rm播放;假如用戶的聯網速度大于80kbps小于 250kbps時,播放器就從服務器下載midspeed.rm播放;假如用戶的聯網速度大于20kbps小于80kbps時,播放器就從服務器下載 lowspeed.rm播放。所謂的「衆口難調」在各位的手裏就變得如此簡單!J 上面講的就是智能流(surestream)的本質實現方法!我們下面看一個複雜的一點的例子。 < 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而小于250000bps時,播放該組--> < 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而小于80kbps時,播放該組--> < audio src="audio/music3.rm"/> < video src="video/video3.rm" region="videoregion"/> < text src="words/narration.txt" region="textregion"/> < /par> < /switch> < /body> (3)語言與速度的同時檢測 < 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" /> < !--美國英文並且速度大于14kbps --> < text src="english_28000.txt" system-language="en-us" system- bitrate="14000" /> < /switch> < /body>(4)演示速度的控制上面我們講的是在演示文件已經創建好的條件下進行的。那麽,我們怎樣制作好多媒體片斷。下面是我們的建議:a、 用RealprodUCer或者其他的壓縮工具制作流文件時,選擇正確的壓縮比例。爲高速用戶預備的文件的壓縮比可以小一些,對于低速用戶預備的文件的壓縮比要大一點。b、 在網絡傳輸過程中,視頻占用的帶寬是最多的,音頻次之,接下來是動畫、圖片,文字是最少的。所以,我們充分考慮我們的演示的結構。例如:假如並行播放多個視頻,這顯然是不合適的。我們可以用圖片來替代一部分視頻效果。 c、 我們在傳輸中不能全部占用用戶的帶寬,必須留出一部分給用戶浏覽網頁或者是幹其它用途的。JJJ我們很多的年輕人當然是用于QQ 聊天!下表列出了我們的建議。 用戶速度 建議最大流占用帶寬 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 在我們以後的制作中。上面的這些知識是非常實用的。大家一定要努力把握! 6、 動畫效果 我們前面學習的內容是SMIL1.0規定的。在SMIL2.0中添加了不少的內容,其中動畫就是其中一個。很多的國外的教程上把flash文件 *.swf歸爲這一類。我們不能同意這樣的分類方法。我們認爲把這樣已經做好的動畫該歸爲視頻一類。真正的動畫(從SMIL2.0規範中可以看出來)是有 SMIL規定的並有SMIL播放器解釋産生的動畫。 從實際情況來看,動畫效果主要是針對圖片産生的。所以,我們在這裏用圖片來做例子。其他的多媒體的制作方法是類似的。有愛好的GG、JJ、DD和MM可以自己做做。 (1) 運動動畫 爲先睹爲快,請在Realone player中運行下面的程序: < 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="http://www.qqread.com/cpp/g03.jpg" dur="6s"> < animateMotion from="0 0" to="600 400" dur="4s"/> < /img> < /body> < /smil> 解釋:a、我們這裏用到的是SMIL2.0規範中的規定的內容的。所以,在第一行裏(xmlns="http://www.w3.org/2000/SMIL20/CR/Language")我們必須聲明我們所用的規範。不然的話,播放器可能不能正確解碼、播放。 b、 animateMotion標記聲明的是我們所要的動畫類型。注重:這裏就是我們所說的駱駝寫法,還記得吧!JJ c、 from="0 0" to="600 400"屬性及其屬性值聲明的是動畫從坐標點(0,0)運動到坐標點(600,400)。這裏我們也可以寫成:< animateMotion from="0,0" to="600,400" dur="4s"/> d、 dur="4s"屬性及其屬性值聲明的是動畫在4秒內完成。在我們這個例子中,圖片的存在時間是6秒,那麽動畫完成後,將有2秒鍾的時間靜止不動。假如圖片的存在時間小于動畫存在時間,那麽動畫運動到半路上就的停止,這樣的情況是該避免的。 (2) 縮放動畫 下面我們看看另外的一種動畫形式:縮放動畫。先看效果!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="http://www.qqread.com/cpp/g03.jpg" width="400" height="320"> < animate attributeName="height" from="320" to="160" fill="freeze" dur="10s"/> < /img> < /body> < /smil> 解釋:animate attributeName="height" from="320" to="160"聲明了動畫的類型和參數。大家看了效果以後,在結合上面的參數的意義,各參數是什麽意思我們也就不用多講了。J 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="http://www.qqread.com/cpp/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="http://www.qqread.com/cpp/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="http://www.qqread.com/cpp/g06.jpg" transIn="fade1" fill="transition"/> < img dur="4s" src="http://www.qqread.com/cpp/g05.jpg" transIn="fade2" fill="transition"/> < img dur="4s" src="http://www.qqread.com/cpp/g06.jpg" transIn="fade2" fill="transition"/> < img dur="4s" src="http://www.qqread.com/cpp/g05.jpg" transIn="push" transOut="fade"/> < /seq> < /body> < /smil> 解釋:a、fadeColor="green"設置了談出談入色爲綠色(green)。在這裏表示的就是從當前的多媒體片斷漸變爲綠色。下面的fadeColor="red"則表示從紅色漸變爲當前的多媒體片斷(假如是圖片則變爲圖片,如是視頻則變爲第一幀)。 b、fill="transition"表示的是最後的完成效果有下面的轉場效果來決定。 c、最後一個就不能用fill="transition"了。想想,它就是最後一個了,上哪裏去找下面的轉場效果呢? 四、後記感謝大家一路陪伴!我們終于完成了SMIL基礎性學習。SMIL的內容是很豐富的,由于作者的水平、時間和精力有限,研究的不是很深。這次真的體會到學習一種新的語言的難度比學習軟件的應用難度大很多,而這是不可以同日而語的。我們所提到的是非常基礎、非常重要、非常實用的部分。假如大家有愛好想進一步研究,可以看看SMIL2.0規範。它位于http://www.w3c.org/下,大家可以下載下來看看。下面該交待的是SMIL目前支持的媒體對象:animation 、video、 audio、 img、 text和 textstream。它們所能支持的格式由我們選擇的播放器來決定。下面我們要談到這個問題。雖然,SMIL的優點很多,但是缺點也是有的。1、 播放器太少目前全面支持SMIL2.0的播放器只有 Realone player。而支持SMIL1.0的播放器卻很多。例如:Quicktime(蘋果(apple Inc.)公司),soja(一個用 Java語言編寫的播放器,體積很小,效果不錯。嵌在網頁上是在好不過了)。這個問題我想不久就會得到解決。2、 各播放器不太兼容我們在*.smil文件中用的多媒體的格式必須考慮到播放器所能支持的格式。例如:Realone player支持的流文本(stream text)格式*.rt非常不錯。可是,很少有其他的播放器支持該中格式。Quicktime支持*.mov格式,這種格式也是非常棒的。然而,支持它的播放器寥寥無幾。相信隨著各個播放平台的功能的拓展,這個問題也會得到解決。3、 制作的工具匮乏目前我們沒有發現好的制作軟件。oratrix公司的 GRiNS Editor for RealONE      用起來並不方便。而Flution則似乎是個人業余寫的程序,用起來比 GRiNS Editor for RealONE舒適些,但是感覺也不是很好。假如演示不是非常複雜,可以用Real slideshow來做,效果不錯,使用也非常簡單。假如愈來愈多的公司來寫這樣的編輯軟件,那麽將來肯定會有很多好的SMIL:編輯軟件。就像今天的html的Dreamweaver 一樣強。4、中文的支持能力差 我們上面提到可以使用*.txt文件。假如*.txt文件的內容是英文的,那麽一切都非常好。 但是,假如是中文的話,顯示的就是一對亂碼。由于個人的水平有限,到目前爲止,依然沒有找到中文顯示的解決辦法。
󰈣󰈤
 
 
 
>>返回首頁<<
 
 
 
 
 熱帖排行
 
王朝網路微信公眾號
微信掃碼關註本站公眾號 wangchaonetcn
 
  免責聲明:本文僅代表作者個人觀點,與王朝網絡無關。王朝網絡登載此文出於傳遞更多信息之目的,並不意味著贊同其觀點或證實其描述,其原創性以及文中陳述文字和內容未經本站證實,對本文以及其中全部或者部分內容、文字的真實性、完整性、及時性本站不作任何保證或承諾,請讀者僅作參考,並請自行核實相關內容。
 
© 2005- 王朝網路 版權所有