SMIL

資工二甲 495511466 郭宸雨 flysea955146

資工二甲 495511260 林竑廷 ie955126

資工二甲 495511076 吳杰翰 ie955107

資工二甲 495511088 陳昱翰 ie955108

資工二甲 495511052 劉權德 ie955105

 

-----------------------------------------------------------------------------------------------------------------------------

簡介

SMIL它是Synchronized Multimedia Integration Language的簡稱。中文翻譯為「同步化多媒體整合語言」。讀做smile,是一個W3C所制定的一種標準,目前建議規格已經到SMIL2.0。它主要是用來描述多媒體撥放流程的語言,所有的多媒體資料,不管是文字、聲音、影像或是視訊都可以控制播放的順序,播放長短及(時間)、格式、位置等等。

應用1.互動式電視--就可以透過SMIL來達成。播放一個英語教學的節目時,可以 同時透過影像(數台攝影機)、聲音(麥克風)、文字(聊天室)來達到影音文字即時互動的成效,此外還可以透過如『播放』、『停止』、『前進』、『後退』等的功能,來執行互動性的操作。

應用2.遠距教學--多媒體即時互動播放系統可利用SMIL整合網路影音教材與說明的文字圖片簡報,並提供學習者控制與互動功能,製作成所謂的網路同步多媒體整合式互動影音教材(synchronized interactive multimedia integration video)。可增加學習者對影音講解內容的瞭解. 幻燈片簡報 利用了Streaming Audio(註解1.) SMIL所製作出的『網路幻燈片語音導覽』.

註解1. Streaming Audio是一種無失真的音訊壓縮技術。她擁有解碼快速的特性,配合音訊串流伺服器(Audio Streaming Server)的即時播放能力,提供高音質且不易被複製盜用,只能在經過認證後,透過網路收聽的線上串流音樂,以避免串流音訊

檔案被下載並非法傳播。

介紹:

1997年11月W3C(World Wide Web Consortium,全球資訊網協會) 發表了一套網頁多媒體撥放標準-SMIL。有了這套標準,即使沒有 任何程式設計基礎或專業開發程式,亦可在低頻寬的網路環境下,使網頁展現驚人的多媒體撥放特效,甚至可播出如電視節目般精采 流暢的影音節目。但最重要的一點是,這套SMIL就如同HTML(Hy -per Text Markup Language,超連結文字標記語言)般易學易用,以 Windows內建記事本即可完成編譯。

SMIL的特色在於容易學習使用,使用簡單的編輯器即可編器SMIL文件,使用者不需使用複雜的Script語言或轉換內容格式即可產生豐富又同步的多媒體內容. 另外,SMIL也可包含聲音、影像、圖片、文字及任何類型的媒體。SMIL1.0於1998年6月15日成為W3C的標準, SMIL2.0版的標準草案也於2001 年3月1日公佈。

全球資訊網(WWW)一向擅長於多媒體的應用,可是在動態的多媒體方面一直有頻寬限制及資料同步等問題,在 1998 年 6 月全球資訊網路協會(W3C)正式的通過一個同步多媒體整合語言,簡稱 SMIL的標準,這是一個新的標記式語言,網頁開發者只要用類似原有 HTML 的標記方式,就可以很容易的安排 網頁上的影像、聲音及文字各部分的時程,不必再像從前為了控制各種不同 的物件,而需要採用 JavaScript 或動態 HTML;並且使用 SMIL 的網頁也可以 節省頻寬的使用,在同一網頁只有被使用的時程資料才會被下載。

 
SMIL概念架構圖

 

特色、優缺點以及發展前景

優點

 

1.時間與空間

可以利用時間與空間來編輯,可在時間軸上進行控制和同步化,描述不同媒介的絕對和相對時間關係,如果使用一個超連結,以往連結過去必須從頭開始播放,但SMIL可以從某一時間點開始撥放

2.頻寬

網頁製作者可以先將低頻寬需求的文字、圖片從視訊中分離出來,再利用SMIL進行同步播放,大幅減少高頻寬需求的視訊,以提高頻寬的利用率,所以不論你在哪裡,即使是低頻寬,都可以使網頁播放多媒體特效,就像在看電視一般。

3.不同來源多媒體片段

假設要播放一個A來源的視頻,同時要B來源的聲頻,還有C來源的文字,SMIL可以輕易的作到

4.可以整合所有的影音多媒體檔案於同一個檔案

5.依照使用者需求

SMIL有一個switch標籤,使得網頁呈現會依照使用者的環境來顯示調整,例如使用者在低頻寬時,就傳出較低品質的圖型,也可滿足多國語言,例如在同一網頁中,包含各國語言的語音文件,然後根據使用者的參數設定字型下載符合的語言版本

6.smil中包括了web現有以及以後的技術

缺點

 

1.目前全面支持SMIL2.0的播放器太少,支持SMIL1.0的播放器卻很多。
2.各播放器不太相容
我們在*.smil文件中用的多媒體的格式必須考慮到播放器所能支持的格式。
但這問題應該不是最主要的, 因為現在的播放軟體支援的格式變的越來越多, 這問題應 該可以解決。
3.製作的工具不多
目前還沒有較好的SMIL編輯工具, GRiNS Editor for RealONE用起來,感覺也不是很好。往後如果有更多的公司, 去寫出可以編輯SMIL又好用的軟體, SMIL將會出現更多的編輯軟體
4.中文的支持能力有限
我們上面提到可以使用*.txt文件。但都只能使用英文,如果使用中文會出現亂碼

SMIL發展歷程以及標準演進

•從SMIL於1997規範被認可開始,SMIL一直進行格式規範或是編譯 撥放軟體的發展直到2008年一月 超過120項更新一直進行著
•最新的版本由2006年SMIL3.0第一次公開草稿
•一直到今年2008年一月SYMM宣告SMIL3.0為推薦候選

 

•1997年11月,第一次公開發行SMIL規範。
•1998年2月,第二次公開發行SMIL草案。
•1998年6月15日,W3C公佈SMIL(推薦)標準第1版(SMIL 1.0)。
•1999年3月,成立SYMM第2工作組。
•2001年6月,在經過600多次測試後,W3C發佈建議標準。
•2001年8月7日,SMIL 2.0成為W3C(推薦)標準。
•2005 2月: SYMM 小組釋出 SMIL 2.1
•2005 12月:W3C 推薦SMIL 2.1為使用標準

 

程式碼簡介

•檔名為 *.smil 
•直接使用記事本就可編寫,且使用real player來檢視成果。
•結構:

•<smil>

       <head>

•<!--此處為head的內文 -->

•       </head>

       <body>

<!--此處為body的內文 -->

       </body>

</smil>

•SMIL的編寫:

由<smil>開始,</smil>結束,看出是以斜直線為區分,有斜直線的為結束用法,例如: < head>< /head>、< body>< /body>等等。

•head 和 body:

為SMIL編寫的內文主軸,最少一定要有body的內容,head則不一定會用到,通常用於附加的內容例如時間作者之類的。

•標記、屬性、值:

以這段程式碼來說< img src="pic1.jpg"/>,img就是標記,src為屬性,雙引號內則為它的值。

•註解:

語法為< !-- … -->

 

 

 

所使用的軟體以及如何撥放SMIL文件

Player

1.Ambulant:

The AMBULANT Player is an open-source, SMIL 2.1 player. It contains a basic player UI framework and implements nearly the entire SMIL 2.1 Language profile. It also implements the SMIL 2.1 Mobile and Extended Mobile profiles.

2.Real player:

RealOne Player 支援 SMIL 2.0 Language Profile,它結合了 SMIL 的大多數(儘管不是全部)模組 ,除了支援大多數標準 SMIL 模組以外,RealNetworks 還開發了自己的幾個 SMIL 擴展。要使用這些擴展,開發人員必須遵守標準 XML 聲明,用添加了 Real 名稱空間的專用行來定義名稱空間

3.Other


SMIL 開發中的另一個參與者是以色列工具製作商 InterObject,它已開發了運行在標準 Windows 平臺和 PocketPC 上的 SMIL 2.0 播放器。InterObject 開發的播放器包括易於修改的基於用戶介面標記語言(User Interface Markup Language (UIML))的 skin GUI。

 

Editor

 

1.Smil gen and real slide show

均為RealNetworks公司出品,為了支持 SMIL 創作,Real 在 2001 年 9 月發佈了自己的 XML/SMIL 創作工具 SMILGen。

 

2.Go Live Studio

Adobe,它為 Web 設計者提供的視覺化創作程式 GoLive Studio 提供了 SMIL 和 QuickTime 編輯器。GoLive 旨在成為非常全面的套裝軟體;將 SMIL 包括為標準特性這一事實說明了它已為媒體生產廣泛接受。

 

3.Other

除了大的業界組織和供應商以外,較小的參與者也正在投身於 SMIL 支持行業。
例如,位於荷蘭的 Oratrix Development 製作了一個通用的 SMIL 編輯器(GriNS Pro Editor for SMIL 2.0)和專門針對 RealNetworks 的 RealOne 平臺的 SMIL 編輯器(GriNS Editor for Real One)。Oratrix 還提供了自己的 SMIL 播放器,GriNS Player for SMIL 2.0。
另一個新加入者是位於多倫多的 Confluent Technologies,它發佈了名為 Fluition 的 SMIL 創作工具。可以單獨購買 Fluition,但它也與 Real 的 RealPlayer 和 RealProducer 應用程式捆綁銷售。

 

Timing,Animation , Groups , Transitions , Layout

Timing

<seq begin="4s">
<par>
<seq>
<img src="../media/saaam.png" begin="6s" dur="2s" region="small_region3" regPoint="middle" fill="remove"/>
<video src="../media/3MON.rm" begin="2s" dur="10s" region="video_region" regPoint="middle" fill="remove"/>
</seq>
<textstream src="countdown.rt" region="countdown_region" dur="6s" fill="remove"/>
</par>
<par>
<textstream src="countdown.rt" region="countdown_region" begin="3s" dur="6s" fill="remove"/>
<img src="../media/hebe.png" begin="9s" dur="2s" region="small_region1" regPoint="middle" fill="freeze"/>
<img src="../media/sam1.png" begin="11s" dur="2s" region="small_region2" regPoint="middle" fill="freeze"/>
<img src="../media/sam2.png" begin="13s" dur="2s" region="small_region3" regPoint="middle" fill="freeze"/>
<img src="../media/sam3.png" begin="15s" dur="2s" region="small_region4" regPoint="middle" fill="freeze"/>
</par>
</seq>

Timing 截圖

Animation



<body>

<img src=“../media/Pietie.jpg” id=“image1” region=“image_region” dur="32s" fill="hold">

<!-- 縮圖-->

<animate targetElement="image_region" attributeName="width" from="256" to="128" begin="3s" dur="4s" fill="freeze"/>

<animate targetElement="image_region" attributeName="height" from="256" to="128" begin="3s" dur="4s" fill="freeze"/>

<!-- 右移 -->

<animate targetElement="image_region" attributeName="left" to="150" begin="8s" dur="4s" fill="freeze"/>

<!-- 下移 -->

<animate targetElement="image_region" attributeName="top" to="150" begin="13s" dur="4s" fill="freeze"/>

<!-- 左上移動 -->

<animateMotion targetElement="image_region" to="22,22" begin="18s" dur="4s" fill="freeze"/>

<!-- 右移 -->

<animateMotion targetElement="image_region" to="150,22" begin="23s" dur="2s" fill="freeze"/>


<!--往中間移動-->

<animateMotion targetElement="image_region" to="75,75" begin="26s" dur="1s" fill="freeze"/>

<!--重設圖片位置 -->

<set targetElement="image_region" attributeName="left" to="75" begin="28s" fill="freeze"/>

<set targetElement="image_region" attributeName="top" to="75" begin="28s" fill="freeze"/>

<!-- 放大圖片-->

<animate targetElement="image_region" attributeName="height" to="256" begin="28s" dur="4s" fill="freeze"/>

<animate targetElement="image_region" attributeName="width" to="256" begin="28s" dur="4s" fill="freeze"/>

<animateMotion targetElement="image_region" to="22,22" begin="28s" dur="4s" fill="freeze"/>

</img>

</body>

</smil>

Animation 截圖

Groups

1.


<smil xmlns="http://www.w3.org/2001/SMIL20/Language"
xmlns:rn="http://features.real.com/2001/SMIL20/Extensions">
<head>
<meta name="title" content="Click to Display a New Clip"/>
<meta name="author" content="495511052"/>
<layout>
<root-layout width="300" height="300" backgroundColor="black"/>
<region id="image_region" left="22" top="22" width="256" height="256">
<region id="text_region" height="40"/>
</region>
<regPoint id="middle" left="50%" top="50%" regAlign="center"/>
</layout>
</head>
<body>
<par>
<text src="data:,Click%20an%20Image%20to%20Display%20the%20Next%20Image" region="text_region" end="3s;image1.activateEvent" fill="remove" rn:backgroundOpacity="0%">
<param name="charset" value="iso-8859-1"/>
<param name="fontFace" value="Verdana"/>
<param name="fontPtSize" value="20"/>
<param name="fontWeight" value="bold"/>
<param name="fontColor" value="blue"/>
<param name="hAlign" value="center"/>
</text>
<excl>
<img src="../clips/number1.png" id="image1" region="image_region" begin="0s; image4.activateEvent" dur="indefinite" alt="Click for Next Image"/>
<img src="../clips/number2.png" id="image2" region="image_region" begin="image1.activateEvent" dur="indefinite" alt="Click for Next Image"/>
<img src="../clips/number3.png" id="image3" region="image_region" begin="image2.activateEvent" dur="indefinite" alt="Click for Next Image"/>
<img src="../clips/number4.png" id="image4" region="image_region" begin="image3.activateEvent" dur="indefinite" alt="Click for Next Image"/>
</excl>
</par>
</body>
</smil>

2.

<window type="scrollingnews" width="240" height="180" scrollrate="20" duration="60" extraspaces="ignore" bgcolor="#9CC8F4">
<p></p><p></p><p></p>
<font face="System">This RealText clip uses <font face="Courier New">syncBehavior="independent"</font>.
<br/><br/>It is not synchronzied with other clips in the parallel group, so moving
the timeline slider forward or backward has no effect on
this clip.
<br/><br/>You can restart this clip only by stopping, then restarting, the entire presentation.
<br/><br/>
<b>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
<p>11</p>
<p>12</p>
<p>13</p>
<p>14</p>
<p>15</p>
</b>
</font>
</window>






Groups 截圖

Transitions

<smil xmlns="http://www.w3.org/2001/SMIL20/Language"

xmlns:rn="http://features.real.com/2001/SMIL20/Extensions">

<head>

<meta name="title" content="Sample for Click"/>

<meta name="author" content="Eric"/>

<meta name="copyright" content="SMIL demo only."/>

<layout>

<root-layout width="256" height="256" backgroundColor="white"/>

<!-- 四個region位置的宣告 -->

<region id="region1" width="128" height="128" fit="fill"/>

<region id="region2" width="128" height="128" left="128" fit="fill"/>

<region id="region3" width="128" height="128" left="128" top="128" fit="fill"/>

<region id="region4" width="128" height="128" top="128" fit="fill"/>

</layout>

<!-- 使用四個transition,用的是radial sweep,而且從每個region的 radial sweep開始位置都不一樣 -->

<transition id="clock1" type="singleSweepWipe" subtype="clockwiseBottomRight" dur="2s"/>

<transition id="clock2" type="singleSweepWipe" subtype="counterClockwiseBottomLeft" direction="reverse" dur="2s"/>

<transition id="clock3" type="singleSweepWipe" subtype="clockwiseTopLeft" dur="2s"/>

<transition id="clock4" type="singleSweepWipe" subtype="counterClockwiseTopRight" direction="reverse" dur="2s"/>

</head>

<body>

<!--The restartDefault attribute ensures that the transitions occur only once. -->

<par dur="indefinite" restartDefault="never">

<!--以下為四個在click之前所會顯示的圖片 -->

<img id="image1" src="../media/man1.jpg" region="region1" dur="10s" fill="freeze"/>

<img id="image2" src="../media/man2.jpg" region="region2" dur="10s" fill="freeze"/>

<img id="image3" src="../media/man3.jpg" region="region3" dur="10s" fill="freeze"/>

<img id="image4" src="../media/man4.jpg" region="region4" dur="10s" fill="freeze"/>

<!--以下為四個在click之後所會顯示對應的圖片 -->

<img id="image5" src="../media/monkey1.jpg" region="region1" begin="image1.activateEvent" dur="10s" fill="freeze" transIn="clock1"/>

<img id="image6" src="../media/monkey2.jpg" region="region2" begin="image2.activateEvent" dur="10s" fill="freeze" transIn="clock2"/>

<img id="image7" src="../media/monkey3.jpg" region="region3" begin="image3.activateEvent" dur="10s" fill="freeze" transIn="clock3"/>

<img id="image8" src="../media/monkey4.jpg" region="region4" begin="image4.activateEvent" dur="10s" fill="freeze" transIn="clock4"/>

</par>

</body>

</smil>

Transitions 截圖

Layout

 




<smil xmlns="http://www.w3.org/2001/SMIL20/Language">
<head>
<meta name="title" content="XML design demo only"/>
<meta name="author" content="Dolphin"/>
<meta name="copyright" content="XML design demo only"/>
<!-- The layout defines a single region for video playback, and a singleregion for the pop-ups within the <topLayout> tag. -->
<layout>
<root-layout width="400" height="300" backgroundColor="black"/>
<region id="video_region"/>
<topLayout width="128" height="128" backgroundColor="white" open="onStart" close="onRequest">
<region id="image_region" backgroundColor="white"/>
</topLayout>
</layout>
</head>
<body>
<par>
<video src="../media/3MON.rmvb" id="vid" region="video_region"/>
<img src="../media/number1.png" region="image_region" begin="3s" dur="5s" fill="remove" backgroundColor="blue"/>
<img src="../media/number2.png" region="image_region" begin="9s" dur="5s" fill="remove" backgroundColor="red"/>
<img src="../media/number3.png" region="image_region" begin="15s" dur="5s" fill="remove" backgroundColor="black"/>
<img src="../media/number4.png" region="image_region" begin="20s" dur="1s" fill="remove" backgroundColor="green"/>
<img src="../media/number5.png" region="image_region" begin="22s" dur="2s" fill="remove"/>
<img src="../media/number6.png" region="image_region" begin="26s" dur="3s" fill="remove" backgroundColor="white"/>
</par>
</body>
</smil>

 
Layout 截圖

 

 

參考資料

 

W3c Synchronized Multimedia


http://www.w3.org/AudioVideo/


語意及網路研究服務中心


http://www.ws.org.tw/sws/index.php?option=com_content&task=view&id=22&Itemid=48

行動裝置上以SMIL為基礎之即時影音教學系統 郭楷彬 國立雲林科技大學資管所


http://turtle.ee.ncku.edu.tw/~andypony/teach/xml_html/xmlteach2_6_m.htm

http://www.csie.fju.edu.tw/~ie925101/home.htm

http://www.jm-mobile.com/demo/KaraokeDemos/Karaoke.html

http://www.quanwen.cn/doc/839157/

http://www.cwi.nl/projects/Ambulant/distPlayer.html

 

工作分派大綱

分工說明:

每個人選擇一項1~5的標題 以及一項應用以及該項目的投影片


分配說明:

1.簡介siml(介紹)2 pages 林竑廷



2.特色-優缺點 以及發展的前景(以後如何發展)2 pages 吳杰翰



3.發展歷程以及標準演進 2 pages 郭宸雨



4.程式碼(簡易的SMIL語法 一個簡易的程式碼 以及其屬性 註解)1 page at least 陳昱翰



5.使用何種軟體撰寫SMIL以及如何播放 2 pages 劉權德



6.實做

timing吳杰翰 ,animation林竑廷 ,groups劉權德 ,transitions陳昱翰 ,layout郭宸雨

 

 

ps. css程式碼 <code>有點問題 在dreamweaver可以正常呈現 但在送出後卻出現一些問題