smil 網路多媒體內容技術
DESCRIPTION
教育部資通訊科技人才培育先導型計畫 數位電視與廣播教學推動聯盟中心. SMIL 網路多媒體內容技術. 葉耀明 國立台灣師範大學資訊工程系 [email protected]. 內容大綱. 網路電視的好伙伴： SMIL SMIL 發展 SMIL 特色 SMIL 檔結構 SMIL 指令 範例. 網路電視的好伙伴： SMIL. SMIL 是同步多媒體整合語言（ Synchronized Multimedia Integration Language ）的縮寫，唸 (smile) - PowerPoint PPT PresentationTRANSCRIPT
內容大綱• 網路電視的好伙伴： SMIL
• SMIL 發展• SMIL 特色• SMIL 檔結構• SMIL 指令• 範例
網路電視的好伙伴： SMIL
• SMIL 是同步多媒體整合語言（ Synchronized Multimedia Integration Language ）的縮寫，唸 (smile)
• 由 W3C(World Wide Web Consortium) 組織訂定的多媒體控制語言。
SMIL 整合網路的視訊多媒體
SMIL 發展• SMIL 1.0 標準於 1998 年 6 月 15 日公佈• SMIL 2.0 標準於 2004 年 11 月 5 日公佈 ( 第二版 2005 年 1 月 7 日 )
• 最新的 SMIL 穩定版本是 2005 年 12 月推出的 SMIL 2.1 版本
• SMIL 3.0 的第一版草稿於 2006 年 12 月公佈• 參與制定標準的公司眾多，其中包括 Compa
q 、 Gateway 、 IBM 、 Microsoft 、 RealNetworks 、 Oratrix 等。
SMIL 特色 (1/4)
就像用 HTML 可以做網頁。 SMIL 是一種用來製作多媒體的 XML 語言。
對 XML 的相容性。 SMIL 已經漸漸成為網頁多媒體的主流， 讓網頁製作者在任何支援 SMIL 的客戶 / 伺服器的平台上編輯動態的， 混合各式檔案格式的網頁。
SMIL 特色 (2/4)
經由對時間的控制， 展示出聲光兼具的多媒體。 SMIL 標示多媒體檔案何時 (when) 和那裡 (where) 的播放， 比如同時播放兩條影像流 , 或播放現場多媒體。 SMIL 讓網頁編輯者可以對時間的控制， 比如不需要重新編輯聲音檔， 就可以更改聲音播放的時間。
簡單易學。 SMIL 是一個簡單的文字檔， 任何人都可以使用自己最喜歡的文字編輯程式來寫。
SMIL 特色 (3/4)• 可控制的多媒體傳送。 SMIL 根據不同的頻
寬提供多媒體的傳送， 這讓觀賞的人有更佳的視聽響受。
• 檔案格式為 .SMIL• 支援多樣的檔案格式。 SMIL 支援各種不同
的檔案格式， 像 RA, RM, AU, WAV, MIDI, AVI, 文字 , JPG, GIF, MPEG 等等。
• 支援各種不同的編輯語言。 SMIL 讓網頁製作者組合不一樣的組合語言在一起，比如 MIDI 和 JPG 的組合。
SMIL 特色 (4/4)
訂製多樣的多媒體。因為 SMIL 是一個簡單的文字檔，它幾乎可以支援各種瀏覽器。
所有的檔案不需要另外編輯或轉換即可使用在 SMIL 。
MediaPlayer 和 RealPlayer 都可以讓你即時播放 SMIL 檔，不須要等下載。
MMS(Multimedia Messaging Service ) 為SMIL 的子集，可使用於手機 (mobile telephone) 多媒體簡訊
SMIL player software
• AMBULANT [2] • Helix Player • QuickTime Player • RealPlayer • Totem • Windows Media Player (Playlist Files) • KMPlayer • t68
File Types supported by SMIL 2.0
• img– A still image, just like one you would use in an HTML page (JPEG, GIF, PNG, et
c).• video
– A video, possibly also containing audio (MPEG, AVI, MOV, etc).• audio
– Stand-alone audio, either compressed or raw (MP3, WAV, AU, etc).• animation
– An animation, usually using vector graphics (SVG, SWF, VML, etc).• text
– Plain old text, promoted to the level of media object (TXT, ASCII, etc).• textstream
– A stream of plain old text along with timing (and possibly other) information (SUB, RT, SAMI, etc). (Think of a news ticker or subtitles.)
• SMIL distinguishes between discrete (images, text) and continuous (video, audio, animation, textstream) media.
SMIL 有十大控制模組• 1 、同步模組 (Timing and Synchronization Modules)• 2 、節奏控制模組 (Time manipulations Modules)• 3 、動畫模組 (Animation Modules)• 4 、內容控制模組 (Content Control Modules )• 5 、版面配置模組 (Layout Modules)• 6 、鏈結模組 (Linking Modules)• 7 、媒體物件模組 (Media Object Modules)• 8 、中介資訊模組 (MetaInformation Modules)• 9 、結構模組 (Structure Modules)• 10 、特效模組 (Transition Effects Modules)
Channels (Sections) of SMIL
可以播放旁白或對影像的註解
主題 Slide Show即時股票新
聞
多媒體文件可以被切分成好幾個 Sections (or Channels) ， 每個 channel 可以被指定播放不同的媒體。 (下面是個例子 )
SMIL 語法 – General Appearance
<?xml version="1.0"?><!DOCTYPE smil PUBLIC "-//W3C//DTD SMIL 2.0//EN" "http://www.w3.org/2001/SMI
L20/SMIL20.dtd"><smil xmlns="http://www.w3.org/2001/SMIL20/Language"> <head> <layout>
………此區描述所有 channel 的位置大小 , 並為 channels命名 </layout> </head> <body> <par>
<!------ 將你的多媒體引進 channel -------- > <text id="text_channel1" src="xfile_chinese.rt" region="text_channel"/> <video id="video1" src="xfile_movie3.rm" region="videochannel"/> </par> </body></smil>
如何在 SMIL 內加入影音檔 ?
• 只要使用簡單標籤• 照片檔 <img src="picture.jpg"/>
• 視訊檔 <video src="movie.mpg"/>
對影音檔加說明• 使用 alt, longdesc屬性 (方便看不到或不能播放此媒體者使用，身心障礙者 )
• 照片檔 <img src="party.jpg" alt="a picture of me from my
wild bachelor party" longdesc="party.txt"/>• 視訊檔 <video src="game.mpg" alt="a movie of one of th
e games from my wild bachelor party" longdesc="game.txt"/>
切影片的片段來播放• 例如有一段 30min 影片，要切影片的片段• 從影片第 20秒開始播放<video src="movie.mpg" clipBegin="20s"/>• 切除影片最後 3 分 30秒<video src="movie.mpg" clipEnd="26:30"/>• 只播放一個畫面<video src="movie.mpg" clipBegin="14:55.7"
clipEnd="14:55.7"/>
播放一系列的影片• 使用 <seq>元件來串聯影片<seq> <video src="ad1.mpg" alt="ad for a new co
mputer"/> <video src="ad2.mpg" alt="ad for an intern
et service provider"/> <video src="ad3.mpg" alt="ad for a SMIL a
d blocker"/></seq>
同時播放多個影片• 通常可使用在子母畫面 (Picture-in-Picture) 的應用中
• 使用 <par> 來同步播放<par> <video src="ad1.mpg" alt="ad for a new comput
er"/> <video src="ad2.mpg" alt="ad for an internet ser
vice provider"/> <video src="ad3.mpg" alt="ad for a SMIL ad bloc
ker"/></par>
SMIL 內時間的表示法• "16"
– 16 seconds (the same as "16s")• "02:45:14.273"
– 2 hours, 45 minutes, 14 seconds, and 273 milliseconds• "07:00"
– 7 minutes• "30m"
– 30 minutes• "1h"
– 1 hour• "1.48"
– 1 second and 480 milliseconds• "1480ms"
– 1480 milliseconds (the same as above)
插入影片播放間隔• 使用 begin屬性，配合 <seq><seq> <video src="ad1.mpg" alt="ad for a new co
mputer"/> <video src="ad2.mpg" alt="ad for an intern
et service provider" begin="00:02"/> <video src="ad3.mpg" alt="ad for a SMIL a
d blocker" begin="00:02"/></seq>
插入影片播放間隔• 使用 begin屬性，配合 <par><par> <!-- The following audio clip should play during all of the a
dvertisements --> <audio src="ad_music.mp3" alt="subliminal advertising en
hancer"/> <video src="ad1.mpg" alt="ad for a new computer"/> <video src="ad2.mpg" alt="ad for an internet service provi
der" begin="00:17"/> <video src="ad3.mpg" alt="ad for a SMIL ad blocker" begi
n="00:34"/></par>
插入影片播放間隔• 使用 begin屬性， 採用相對時間• <par>• <!-- The following audio clip should play during all of the
advertisements -->• <audio src="ad_music.mp3" alt="subliminal advertising e
nhancer"/>• <video id="ad1" src="ad1.mpg" alt="ad for a new comput
er"/>• <video id="ad2" src="ad2.mpg" alt="ad for an internet se
rvice provider" begin="ad1.end+00:02"/>• <video id="ad3" src="ad3.mpg" alt="ad for a SMIL ad blo
cker" begin="ad2.end+00:02"/>• </par>
巢狀同步控制• 利用 <par> 和 <seq> 的巢狀架構做同步控制<par> <!-- The following audio clip should play during all of the advertisemen
ts --> <audio src="ad_music.mp3" alt="subliminal advertising enhancer"/> <seq> <video src="ad1.mpg" alt="ad for a new computer"/> <video src="ad2.mpg" alt="ad for an internet service provider" begi
n="00:02"/> <video src="ad3.mpg" alt="ad for a SMIL ad blocker" begin="00:02"/
> </seq></par>
重覆播放• 重覆播放次數 : repeatCount屬性<audio src="ring.wav" alt="telephone ring" re
peatCount="4"/>
• 重覆播放時間 : repeatDur
<audio src="ring.wav" alt="telephone ring" repeatDur="16s"/>
小範例 : 電話鈴• 利用音訊檔和動態圖片檔同步<par> <audio id="ring" src="ring.wav" alt="telephone ring" repeatCount="4"/
><img src="jumping_phone.gif" alt="a violently ringing telephone" begin
="ring.repeat"/></par>• 同步改善<par><audio id="ring" src="ring.wav" alt="telephone ring" repeatCount="4"/><img src="jumping_phone.gif" alt="a violently ringing telephone" begin
="0; ring.repeat"/></par>
範例<smil>
<head>
<layout>
<root-layout height="350" width="600" background-color="#ffffcc" title="SMIL version 1.0 Introduction"/>
<region id="text_0" width="600" height="350" top="0" left="0" z-index="2" />
<region id="text_1" width="207" height="253" top="48" left="300" z-index="3" />
<region id="smil_gif" width="207" height="253" top="48" left="93" z-index="3" />
</layout>
</head>
<body> <par> <seq><text src="http://www.multimedia4everyone.com/smil_intro/media/smil2.rt" region
="text_0" begin="2.00s" /> <par><text src="http://www.multimedia4everyone.com/smil_intro/media/xml2.rt" region
="text_0" /> <seq><audio src="http://www.multimedia4everyone.com/smil_intro/media/label2.rm" b
egin="11.00s" end="16.56s" /></seq> </par> <par><text src="http://www.multimedia4everyone.com/smil_intro/media/basic.rt" region
="text_0" /> <seq>
<audio src="http://www.multimedia4everyone.com/smil_intro/media/basic3.rm" begin="1.00s" end="16.13s" /></seq>
</par>
<par> <text src="http://www.multimedia4everyone.com/smil_intro/media/nested2.rt" region="text
_0" /> <seq><audio src="http://www.multimedia4everyone.com/smil_intro/media/nested5.rm" be
gin="4.00s" end="12.29s" /></seq> </par> <par><img src="http://www.multimedia4everyone.com/smil_intro/media/smil.gif" region="s
mil_gif" begin="1.00s" end="80.00s"/> <seq><text src="http://www.multimedia4everyone.com/smil_intro/media/order.rt" region
="text_1" /> <text src="http://www.multimedia4everyone.com/smil_intro/media/order2.rt" region="text
_1" /> <text src="http://www.multimedia4everyone.com/smil_intro/media/order3.rt" region="text
_1" /> <text src="http://www.multimedia4everyone.com/smil_intro/media/bye.rt" region="text_1"
/> </seq></par></seq></par> </body></smil>
三種 SMIL應用範例• 子母畫面設計 (Picture-in-Picture)
– region
• 畫面區域超連結設計 (Interaction with user) – Anchor – Area
• 卡拉 OK設計 – Animation
子母畫面設計 (Picture-in-Picture)
• Region 使用– Arranging media in SMIL is done (usually) as a two-step process.
First, a region is created, and then a media object is tied to that region. For creating regions, SMIL has the element <region>. It has a number of attributes (11 to be exact) for specifying where it should be located and how media in the region should be displayed. Here is a brief description of each:
子母畫面設計範例 (1)<?xml version="1.0"?><!DOCTYPE smil PUBLIC "-//W3C//DTD SMIL 2.0//EN" "http://www.w3.
org/2001/SMIL20/SMIL20.dtd"><smil xmlns="http://www.w3.org/2001/SMIL20/Language" xml:lang="e
n" title="Picture-in-Picture Television"><head> <layout> <topLayout width="320px" height="240px"> <region id="main-video" left="0%" top="0%" width="100%" height
="100%"> <region id="corner-video" left="67%" top="67%" width="33%" heig
ht="33%" fit="scale" soundLevel="0%"/> </region> </topLayout> </layout>
子母畫面設計範例 (2)
</head><body> <par> <video id="chameleon-video" src="chameleon.mpg" alt
="an animated chameleon" region="main-video"/> <video id="earthquake-video" src="earthquake.mpg" alt
="San Fransisco earthquake aftermath" region="corner-video“ end="chameleon-video.end"/>
</par></body></smil>
畫面區域超連結設計(Interacting with the User)
• 像 HTML 的做法，用 <a> anchor element
超連結設計範例<a href="http://www.w3.org/" alt="the World Wide Web Con
sortium"> <text src="w3.txt" alt="a brief of the W3C"/></a><a href="second.smil" alt="the next presentation in the seri
es" show="replace"> <animation src="credits.svg" alt="the names of the maker
s of this presentation"/></a><a href="pause.smil" alt="simple animated pause loop" sho
w="new" sourcePlaystate="pause" accesskey="p"> <img src="pause.png" alt="two vertical bars"/></a>
卡拉 OK 設計 • 使用 Animation 來產生歌曲的同步字幕
同步字幕
Color Animations (<animateColor>)
• Here is an animation of a television screen fading to black:
<video src="television.mpg" alt="bright television">
<animateColor to="#000000" dur="10s"/>
</video>
結語• SMIL 是功能很強的 Interactive TV 整合工具
• SMIL 可提供 iTV數位內容在創意上的發揮空間
謝謝各位 !