1 / 39

SMIL 網路多媒體內容技術

教育部資通訊科技人才培育先導型計畫 數位電視與廣播教學推動聯盟中心. SMIL 網路多媒體內容技術. 葉耀明 國立台灣師範大學資訊工程系 ymyeh@csie.ntnu.edu.tw. 內容大綱. 網路電視的好伙伴： SMIL SMIL 發展 SMIL 特色 SMIL 檔結構 SMIL 指令 範例. 網路電視的好伙伴： SMIL. SMIL 是同步多媒體整合語言（ Synchronized Multimedia Integration Language ）的縮寫，唸 (smile)

gregory-richard
Download Presentation

SMIL 網路多媒體內容技術

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 教育部資通訊科技人才培育先導型計畫 數位電視與廣播教學推動聯盟中心 SMIL網路多媒體內容技術 葉耀明 國立台灣師範大學資訊工程系 ymyeh@csie.ntnu.edu.tw

  2. 內容大綱 • 網路電視的好伙伴：SMIL • SMIL發展 • SMIL特色 • SMIL檔結構 • SMIL指令 • 範例

  3. 網路電視的好伙伴：SMIL • SMIL是同步多媒體整合語言（Synchronized Multimedia Integration Language）的縮寫，唸(smile) • 由W3C(World Wide Web Consortium)組織訂定的多媒體控制語言。

  4. SMIL整合網路的視訊多媒體

  5. 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月公佈 • 參與制定標準的公司眾多，其中包括Compaq、Gateway、IBM、Microsoft、RealNetworks、Oratrix等。

  6. SMIL特色 (1/4) • 就像用 HTML 可以做網頁。SMIL 是一種用來製作多媒體的XML語言。 • 對 XML 的相容性。SMIL 已經漸漸成為網頁多媒體的主流， 讓網頁製作者在任何支援 SMIL 的客戶/伺服器的平台上編輯動態的， 混合各式檔案格式的網頁。

  7. SMIL特色(2/4) • 經由對時間的控制， 展示出聲光兼具的多媒體。 SMIL 標示多媒體檔案何時(when)和那裡(where)的播放， 比如同時播放兩條影像流, 或播放現場多媒體。SMIL 讓網頁編輯者可以對時間的控制， 比如不需要重新編輯聲音檔， 就可以更改聲音播放的時間。 • 簡單易學。SMIL 是一個簡單的文字檔， 任何人都可以使用自己最喜歡的文字編輯程式來寫。

  8. SMIL特色(3/4) • 可控制的多媒體傳送。 SMIL 根據不同的頻寬提供多媒體的傳送， 這讓觀賞的人有更佳的視聽響受。 • 檔案格式為.SMIL • 支援多樣的檔案格式。SMIL 支援各種不同的檔案格式， 像 RA, RM, AU, WAV, MIDI, AVI, 文字, JPG, GIF, MPEG 等等。 • 支援各種不同的編輯語言。SMIL 讓網頁製作者組合不一樣的組合語言在一起，比如 MIDI 和 JPG 的組合。

  9. SMIL特色(4/4) • 訂製多樣的多媒體。因為 SMIL 是一個簡單的文字檔，它幾乎可以支援各種瀏覽器。 • 所有的檔案不需要另外編輯或轉換即可使用在 SMIL。 • MediaPlayer和RealPlayer都可以讓你即時播放 SMIL 檔，不須要等下載。 • MMS(Multimedia Messaging Service )為SMIL的子集，可使用於手機(mobile telephone)多媒體簡訊

  10. SMIL player software • AMBULANT[2] • Helix Player • QuickTime Player • RealPlayer • Totem • Windows Media Player (Playlist Files) • KMPlayer • t68

  11. File Types supported by SMIL 2.0 • img • A still image, just like one you would use in an HTML page (JPEG, GIF, PNG, etc). • 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.

  12. 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)

  13. 主題Slide Show 即時股票新 聞 可以播放旁白或對影像的註解 Channels (Sections) of SMIL 多媒體文件可以被切分成好幾個Sections (or Channels)， 每 個channel可以被指定播放不同的媒體。(下面是個例子)

  14. SMIL 語法 –General Appearance <?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"> <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>

  15. 如何在SMIL內加入影音檔? • 只要使用簡單標籤 • 照片檔 <img src="picture.jpg"/> • 視訊檔 <video src="movie.mpg"/>

  16. 對影音檔加說明 • 使用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 the games from my wild bachelor party" longdesc="game.txt"/>

  17. 切影片的片段來播放 • 例如有一段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"/>

  18. 播放一系列的影片 • 使用<seq>元件來串聯影片 <seq> <video src="ad1.mpg" alt="ad for a new computer"/> <video src="ad2.mpg" alt="ad for an internet service provider"/> <video src="ad3.mpg" alt="ad for a SMIL ad blocker"/> </seq>

  19. 同時播放多個影片 • 通常可使用在子母畫面(Picture-in-Picture)的應用中 • 使用<par>來同步播放 <par> <video src="ad1.mpg" alt="ad for a new computer"/> <video src="ad2.mpg" alt="ad for an internet service provider"/> <video src="ad3.mpg" alt="ad for a SMIL ad blocker"/> </par>

  20. 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)

  21. 插入影片播放間隔 • 使用begin屬性，配合<seq> <seq> <video src="ad1.mpg" alt="ad for a new computer"/> <video src="ad2.mpg" alt="ad for an internet service provider" begin="00:02"/> <video src="ad3.mpg" alt="ad for a SMIL ad blocker" begin="00:02"/> </seq>

  22. 插入影片播放間隔 • 使用begin屬性，配合<par> <par> <!-- The following audio clip should play during all of the advertisements --> <audio src="ad_music.mp3" alt="subliminal advertising enhancer"/> <video src="ad1.mpg" alt="ad for a new computer"/> <video src="ad2.mpg" alt="ad for an internet service provider" begin="00:17"/> <video src="ad3.mpg" alt="ad for a SMIL ad blocker" begin="00:34"/> </par>

  23. 插入影片播放間隔 • 使用begin屬性， 採用相對時間 • <par> • <!-- The following audio clip should play during all of the advertisements --> • <audio src="ad_music.mp3" alt="subliminal advertising enhancer"/> • <video id="ad1" src="ad1.mpg" alt="ad for a new computer"/> • <video id="ad2" src="ad2.mpg" alt="ad for an internet service provider" begin="ad1.end+00:02"/> • <video id="ad3" src="ad3.mpg" alt="ad for a SMIL ad blocker" begin="ad2.end+00:02"/> • </par>

  24. 巢狀同步控制 • 利用<par>和<seq>的巢狀架構做同步控制 <par> <!-- The following audio clip should play during all of the advertisements --> <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" begin="00:02"/> <video src="ad3.mpg" alt="ad for a SMIL ad blocker" begin="00:02"/> </seq> </par>

  25. 重覆播放 • 重覆播放次數: repeatCount屬性 <audio src="ring.wav" alt="telephone ring" repeatCount="4"/> • 重覆播放時間: repeatDur <audio src="ring.wav" alt="telephone ring" repeatDur="16s"/>

  26. 小範例:電話鈴 • 利用音訊檔和動態圖片檔同步 <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>

  27. 範例 <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>

  28. <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" begin="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>

  29. <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" begin="4.00s" end="12.29s" /></seq> </par> <par><img src="http://www.multimedia4everyone.com/smil_intro/media/smil.gif" region="smil_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>

  30. 三種SMIL應用範例 • 子母畫面設計(Picture-in-Picture) • region • 畫面區域超連結設計(Interaction with user) • Anchor • Area • 卡拉OK設計 • Animation

  31. 子母畫面設計(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:

  32. 子母畫面設計範例(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="en" 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%" height="33%" fit="scale" soundLevel="0%"/> </region> </topLayout> </layout>

  33. 子母畫面設計範例(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>

  34. 畫面區域超連結設計(Interacting with the User) • 像HTML的做法，用 <a> anchor element

  35. 超連結設計範例 <a href="http://www.w3.org/" alt="the World Wide Web Consortium"> <text src="w3.txt" alt="a brief of the W3C"/> </a> <a href="second.smil" alt="the next presentation in the series" show="replace"> <animation src="credits.svg" alt="the names of the makers of this presentation"/> </a> <a href="pause.smil" alt="simple animated pause loop" show="new" sourcePlaystate="pause" accesskey="p"> <img src="pause.png" alt="two vertical bars"/> </a>

  36. 卡拉OK設計 • 使用Animation來產生歌曲的同步字幕 同步字幕

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

  38. 結語 • SMIL是功能很強的Interactive TV整合工具 • SMIL可提供iTV數位內容在創意上的發揮空間

  39. 謝謝各位!

More Related