第二章 相關研究工作
第二節 同步多媒體整合語言
由於多媒體影音的播放是一個網頁製作熱門的新方向，SMIL 在未來多媒體應用領 域將有嶄新的風貌呈現，因此對多媒體網頁製作標準 SMIL(Synchronized Multimedia Integration Language)加以概述。本節共分為三小節，第一小節簡述發展緣起；第二小節 往往必須借助專業級網頁製作軟體，或是自行編譯控制程式使用。例如Dynamic HTML 雖然可以做到網頁物件的動態控制，仍必須透過Java Script 來製作，但以 Java Script 製 作有許多的困難，過程不僅複雜且無法完全控制視訊與聲音的播放，這對網頁設計者是 一個挑戰，因此要如何使用簡單的程式或語法來完成多媒體影音的播放是一個努力的新 方向[29]。
有鑑於此W3C(World Wide Web Consortium)於 1998 年發表了一套多媒體網頁製作 規範－SMIL 1.0(synchronized multimedia integration language )，參與制定該標準的公司 有Compaq、Gateway、IBM、Microsoft、RealNetworks、Oratrix 等，現階段已發展至 SMIL 2.0 版，提供了詳細內文的功能和完整的架構。SMIL 文件是以 XML 為基礎，用來描述 各個不同的物件應該在何時、何地呈現及該在何時、何地消失。除了傳統網頁在單一平 面上的設計之外，SMIL 引進了時間軸(Time Line)的觀念，所有的媒體元件可以在空間 上進行規劃，也可以在時間軸上進行控制與同步化。SMIL 可做為資料的檔案格式，也 可處理非結構化資料(如音訊、視訊等)，來控制多媒體的影像及聲音，屬於新一代的影 音技術[30]。
2.3.2 設計理念
SMIL 之主要目的為整合數種多媒體檔案(例如：文字、圖片、動畫、影片等)執行
的順序，使其呈現在網頁上，發揮影音同步的效果。網頁設計者能夠很快地學會使用 SMIL 來製作網頁，包括文字、圖片、動畫、影片等媒體都可以輕鬆地利用 SMIL 來規 劃製作。由於它採用的是純文字格式，任何文書處理都可以編寫。以下為SMIL 的設計 理念：
1. 提供多媒體物件在網頁上的佈局能有更大的創意空間
若網頁上有視頻、有文字，一般的情況其佈局呈現的方式是在一個區域播 放視頻(例如，螢幕的上部)，在另一個區域顯示文字(例如，螢幕的底部)。然而 在SMIL 的網頁中，所有的多媒體物件都被放置在 region 之中，網頁設計者可 以安排控制各個region 在網頁上的顯示，可以互相重疊，亦可利用<z-index>進 行三度空間的呈現，提供更大的創意設計空間。以圖1 為例，網頁設計者將所 有包括多媒體檔案都放置在一個標籤為region 之中，且可以在網頁中放入數個 region，使得物件直接由 region 控制，讓設計者能盡情發揮其創意而不受侷限。
<smil>
<head>
<meta name="noname" content="empty" skip-content="true" />
<layout type="text/smil-basic-layout">
<root-layout height="620" width="400" background-color="blue"
skip-content="true" />
<region id="region-0" height="517" width="400" left="0" top="0"
z-index="1" fit="hidden" skip-content="true" />
<region id="region-1" height="100" width="400" left="0" top="520"
z-index="2" fit="hidden" skip-content="true" />
</layout>
</head>
<body>
<par repeat="1" region="region-0">
<img id="img-1" region="region-0" src="NCTULIB_ FA_001_007_
01001_t.jpg" repeat="1" fill="remove" begin="0.0s" end="3.0s" />
<img id="img-2" region="region-0" src="NCTULIB_ FA_001_007_
01002_t.jpg" repeat="1" fill="remove" begin="3.0s" end="6.0s" />
<img id="img-3" region="region-0" src="NCTULIB_ FA_001_007_
01003_t.jpg" repeat="1" fill="remove" begin="6.0s" end="9.0s" />
<audio id="audio-1" region="region-0" src="NCTULIB_ FA_001_007_
01001.wav" repeat="1" fill="remove" begin="0.0s" end="3.0s" />
<audio id="audio-2" region="region-0" src="NCTULIB_ FA_001_007_
01002.wav" repeat="1" fill="remove" begin="3.0s" end="6.0s" />
<audio id="audio-3" region="region-0" src="NCTULIB_ FA_001_007_
01003.wav" repeat="1" fill="remove" begin="6.0s" end="9.0s" />
<textstream region="region-1" src="english.rt" repeat="1" fill="remove"/>
</par>
</body>
</smil>
圖 1 SMIL 之 region 範例
由圖1 之原始碼可看出畫面有二個區域，上方為視訊區(id="region-0")，下方為文字 區(id="region-1")。將 SMIL 之 region 範例以 RealOne Player 播放，呈現的效果如圖 2。
圖 2 RealOne Player 播放之範例
2. 解決網路傳輸速度問題及提高頻寬利用率
由於各個使用者連接到 Internet 的方式不盡相同，其連接的速度差別也很 大，因此必須製作不同的呈現模式以適應不同的傳輸速度。在傳統的方法中，
使用者必須選擇自己機器連接所對應的傳輸速度，但這並不是一個完美的方
<video src=”…” systemBitrate=”115200”/>
<seq systemBitrate=”57344”>
<img src=”img1.png” dur=”5s”/>
……
<img src=”img1.png” dur=”5s”/>
</seq>
<text src=”desc.html” dur=”30s”/>
</switch>
圖 3 smil 之頻寬範例
(2) 可選擇多語言：傳統的方法是讓使用者選擇不同語言版本的媒體文件，然
後從伺服器下載相對應的版本。媒體文件若以SMIL 規定加以組織，將可 以根據具體的語言設定來播放相對應版本。
4. 緊密結合現有的網頁技術
傳統的技術已不敷使用， SMIL 的出現正好可以取代傳統的技術。SMIL 以XML1.0 為基礎，含括現階段及未來的網頁技術，例如 CSS 樣式表、HTML 等。SMIL 可藉由 XML Namespace 整合到其他的 XML 應用環境[31]。
5. 整合數種多媒體檔案同步化的執行
利用 SMIL 簡單的語法即可控制各個多媒體物件的顯示。媒體物件的播放 可以是循序的、並行的、循序與並行混用，分別以seq 標籤、par 標籤並配合 switch 標籤，不必假借複雜的專業多媒體編輯軟體即可完成。
6. 能夠同時播放不同伺服器上的多媒體片段
SMIL 能同時播放在不同伺服器上的多媒體片段，例如，某一段電視採訪 的實況(視訊文件)加上解說(包括聲音解說和文字解說)。但是，視訊文件是甲伺 服器上的A 文件，音頻文件是乙伺服器上的 B 文件，而解說文字卻是丙伺服器 上的C 文件。傳統的方法對此束手無策，而 SMIL 可以做到。
7. 具有時間控制的功能
如果不想用整個視訊文件，而只想用其中的某一部分。傳統方法中唯一可 行的就是用剪輯軟體來剪輯。費時費力，偶而還會弄巧成拙，剪掉想要呈現的 視訊文件，而使用SMIL 技術則是易如反掌。假設視訊文件 A 的時間長度是 60 秒，需要的僅是10~15 秒部份，在此情況下可以用 SMIL 控制在該視訊文件 A 的第10 秒開始播放，播放到第 15 秒即結束[32]。
2.3.3 語言架構及語言概述
SMIL 文件是屬於 XML 文件的一種，其精簡文件架構如圖 4 所示：
<smil>
SMIL 以<smil>開始，以</smil>結束，程式由 head 和 body 兩大部分組成，其中 body 是必須要有的，而head 部分則看實際情況，但如果要寫出一個效果好的 SMIL 程式，head 部分仍是不可少的，一切標記都在這二者之間，標記和標記的屬性必須小寫。SMIL 文 件附加檔名爲SMIL 或 SMI，如此 SMIL 播放器(例如 RealOne Player)才能認出 SMIL 文 件，以採用正確的解碼方式解碼、播放[33]。
以下簡單描述head 部分及 body 部分。
1. head 部分：<head>元素包含與呈現(Presentation)時序行為無關的資訊，也就是附 加資訊，例如版權、作者、標題、基底位址等。其基本的格式是：<meta name="
" content=" " />，例如：<meta name="author " content="smil is so easy " />。
整個head 部分可由表 7 簡單表示之：
(1) 一個 SMIL 文件可將多個 layout 元素封裝在一個 switch 元素中，包含多個 可供選擇的佈局(Layout)。layout 元素的屬性有 id 、type，其中 type 屬性 規定layout 元素所使用的佈局語言。如果播放器不能解譯這種語言，它必 須跳過下一個“</layout>”標記之前的所有內容。type 屬性的預設值是
“text/smil-basic-layout”。
(2) 如果 layout 元素的 type 屬性值是“text/smil-basic-layout”，它可以包含 region、root-layout 元素，其中 region 元素控制媒體對象元素的位置，大 小和縮放，而root-layout 標記規範了最基本的、最底層的視窗，其他一切 視窗都在root-layout 的基礎上劃分出來[31]。
2. body 部分：“body”元素包含與此文件的時序和鏈接行為有關的訊息。“body”
可以包含的子元素有a、animation、audio、img、par、ref、seq、switch、text、
textstream、video 等。以下分別以同步元素(Synchronization Elements)、時間控 制加以介紹。
(1) 同步元素(Synchronization Elements)：
媒體物件的播放可以是循序的、並行的、循序與並行混用，分別以seq 標 籤、par 標籤並配合 switch 標籤來表示。
○1 循序的：“seq”元素的子元素構成一個時間序列，在<seq></seq>中間的 多媒體片段順序播放。循序的語法以圖5 說明，物件 a、b、c 以循序 的方式呈現，其中a 物件先播放 6 秒，緊接 b 物件播放 4 秒，間歇 2 秒後，c 物件再播放 5 秒。
<seq>
<img id=”a” dur=”6s” begin=”0s” region="region-0" src="nctulib_
fa_001_007_ 01001_t.jpg" />
<img id=”b” dur=”4s” begin=”6s” region="region-0" src="nctulib_
fa_001_007_ 01002_t.jpg" />
<img id=”c” dur=”5s” begin=”12s” region="region-0" src="nctulib_
fa_001_007_ 01003_t.jpg" />
</seq>
a b c
圖 5 SMIL 同步元素－seq 之範例
○2 並行的：<par>元素的子元素可以在時間上重疊，在<par></par>中間的 多媒體片段並行播放。並行的語法以圖 6 加以說明，a、b、c 物件以 平行方式呈現，其中a 物件與 b 物件在同一個時間點播放，待 a、b 物 件播放2 秒後，c 物件才開始播放。
<par>
<img id=”a” dur=”6s” begin=”0s” src="nctulib_
fa_001_007_ 01001.jpg"/>
<img id=”b” dur=”4s” begin=”0s” src="nctulib_
fa_001_007_ 01002.jpg"/>
<audio id="c" dur=”5s” begin=”2s” src="nctulib_
fa_001_007_ 01001.wav"/>
</par>
c b
a
圖 6 SMIL 同步元素－par 之範例
○3 並行混用：以 seq 標籤、par 標籤並配合 switch 標籤並行混用。圖 7 為 例， a 物件先播放 7 秒，接下來 b 物件和 c 物件以平行方式呈現，待 b、c 物件播放後，再顯示 d 物件 [34]。
<seq>
<img id=”a” dur=”7s” begin=”0s” src="nctulib_ fa_001_007_ 01001.jpg"/>
<par>
<img id=”b” dur=”4s” src="nctulib_ fa_001_007_ 01002.jpg"/>
<img id=”c” dur=”5s” src="nctulib_ fa_001_007_ 01003.jpg"/>
</par>
<img id=”d” dur=”6s” src="nctulib_ fa_001_007_ 01001.jpg"/>
</seq>
包含dur 屬性 、begin 和 end 屬性、clip-begin 和 clip-end 屬性、repeat 屬性 等。以下分別介紹：
○1 dur 屬性 ：規定元素的顯示時間長度。此屬性可以是一個時鐘值或字串 符 號“indefinite” 。 例 如 <img src="image1.jpg" dur="5s"/> 、 <img src="image2.jpg" dur="10s"/ >，其中 image1.jpg 時間持續了 5 秒，
image2.jpg 持續了 10 秒。
○2 begin 和 end 屬性：規定在什麼時間開始播放。例如<img src="image1.jpg"
begin="2" end="5s"/>，表示從 2 秒時開始播放，在 5 秒時結束，所以 實際上只有播放3 秒而已。
○3 clip-begin 和 clip-end 屬性是用在內部時間控制的屬性。這裏的內部指的 就是多媒體物件自己的時間線。前者規定在什麽時間開始播放，後者
規定什麽時間結束播放。其意涵由圖 8，即可充分了解。首先是 audio-1.wav 從其多媒體元素 5 秒處開始播放，播放 7 秒以後，
audio-2.wav 從其多媒體元素 2 秒處開始與 audio-1.wav 一起播放，
audio-1.wav 播放到其 15 秒處停止播放，audio-1.wav 播放了 15-5=10 秒。audio-2.wav 播放到其 15 秒處停止播放，audio-2.wav 播放了 15-2=13 秒。圖中灰色部分表示播放的部分[33]。
<smil>
<body>
<par>
<audio id="audio-1" src="nctulib_ fa_001_007_ 01001.wav " clip-begin="5s"
dur="10s"/>
<audio id="audio-1" src="nctulib_fa_001_007_01001.wav " clip-begin="2s"
clip-end="15s"/>
例如：<vedio src="otto.rm" dur="1min" repeat="3"/>，otto.rm 將重複播 放 3 次，若需要一直重複不斷的播放，只要將 repeat 屬性值設為
“indefinit”即可(repeat="indefinite")。
SMIL 包含各種媒體播放格式的網頁標準，具開放性、容易編輯的特性，在多媒體 領域中將會被廣泛的使用。目前一些多媒體廠商，包括Microsoft 的 Internet Explorer 5.5