10-1 認識多媒體檔案的格式

1. 10-1　認識多媒體檔案的格式 • 何謂多媒體 • 媒體是一種傳達資訊的工具，而多媒體顧名思義，則是結合了許多不同種類的媒體，讓使用者可以透過這些媒體有更多的想像空間可以發揮。簡單的來說，多媒體就是結合了我們在日常生活之中會看到、聽到的文字、影像、圖形、聲音、動畫和影片等等的元素，將其整合為一個單一媒體。

2. 常用的多媒體輔助程式 • 早期的瀏覽器當然不太支援多媒體的效果，網頁除了文字和圖片和Midi音樂就無法處理，目前的瀏覽器雖說可以用來播放音效、影片和動畫，但實際的播放動作其實是靠其他輔助程式來完成的。

3. 多媒體輔助程式與檔案類型 • 甚麼是輔助程式呢！就是當你透過網頁點選檔案類型時，會啟動並處理的程式。例如當你在網頁上點選某個超連結，這個超連結所連接的檔案類型是系統不認識的檔案類型或無法處理的檔案時，會出現檔案下載視窗，詢問是否要下載檔案。

4. Windows Media Player • 這是內建於Windows系統中的多媒體播放程式，可以處理的檔案類型包括了MPEG、AVI、MP3、ASF、WAV等檔案。不過建議你先升級到Media Player 9，目前最新版的為Media Player 10，它支援的多媒體檔案類型更多，特別是線上影音串流的多媒體檔案。

5. RealOne Player • Redia Player也是大家常用的播放軟體，用來播放RA、RMVB等多媒體檔案，目前最新的版本為Real one Player 10也就是RealOne Player。所支援的多媒體檔案包括RM、RAM、RMVB、WAV等多達五十餘種，不少線上廣播或是影片都採用RM方式來播放。

6. Flash • 這是近年來最熱門的動畫軟體，由於Flash是向量的動畫檔案，所以檔案體積小，加入軟體本身的功能及Action程式，讓動畫成品相當多變性，幾乎每個公司網站都可以找到Flash的動畫。瀏覽器要處理Flash動畫的播放，必須要安裝Flash Player程式，目前的IE6已經可以處理基本的動畫，但若採用新版Flash MX 2004所製作的Flash動畫，還是必須下載最新版的Flash Player才行。

7. 常見的多媒體檔案類型 • ASF：是Microsoft為了和Real player競爭而發展出來的一種可以直接在網上觀看視頻節目的檔案壓縮格式！由於它使用了MPEG4的壓縮演算法，所以壓縮率和圖像的質量都很不錯。

8. REAL VIDEO：Real Video(RA、RAM)格式可說是視頻流技術的先驅，早期以網路上播放為主，當然畫質不會太好，但目前配合新的視頻壓縮格式也能製作出較高畫質的檔案，當然這類的檔案就不適合放上網路。要播放Real Video格式當然是使用Real Player這套播放軟體，不過隨著壓縮格式的不同，軟體版本的支援性也有差異。一般免費版的Real one player 可以處理多數的RA檔案，部份RMVB檔案必須要花錢買Real one play plus版才能順利播放。

9. DIVX：DIVX 視頻編碼技術是一種新的視頻壓縮格式，它由 Microsoft mpeg4v3 修改，使用 MPEG4 壓縮演算法。他最大的優點就是影片品質好，而且檔案體積也會過於龐大。一部DVD片子可以壓縮到2張光碟大小，而且品質還保留DVD的畫質。加上對硬體的要求不高，所以漸漸成為網路上最常見的格式。要播放DivX視頻編碼技術的影片，必須要安裝DivX的解碼器才行。

10. AVI：AVI這個微軟從Windows 3.1就發表的視頻格式已經存在許久了，影像的畫質好但相對檔案體積也較為龐大。

11. MPEG：MPEG格式包括了 MPEG-1、MPEG-2和 MPEG-4。MPEG-1主要應用在VCD的製作、MPEG-2 則是應用在DVD的製作(壓縮)方面。MPEG-4 是一種新的壓縮演算法，使用這種演算法的ASF格式可以將一部120分鐘長的電影壓縮到300M左右，作為網路上的觀賞之用，使用此演算法的DIVX格式也可以壓縮到 600M 左右。MPEG1格式的檔案多數的播放程式都可以播放，MPEG-2和MPEG-4就得要較新的播放程式，或配合外掛程式才能播放。

12. 10-2　網頁音效的設定 • 你希望網頁瀏覽者一進入你的網站，就聽到悅耳動人的音樂其實很簡單，不論是透過超連結的設定或是背景音樂都可以達到此目的。在介紹如何設定前筆者要先提醒你，要在網頁加入音效或音樂檔案時，務必考慮到檔案的體積。 • 目前最常被使用的檔案為Midi檔案，因為此類型體積較小，網路傳輸快，而大家熟悉的MP3檔案體積相對龐大許多，所以較少使用。

13. 設定音效檔案的超連結 • 當你按下網頁上的音效檔案超連結時，Internet Explorer會告知你目前點選了一個音訊或視訊檔案的連結，你可以直接透過Internet Explorer的視窗來播放，若點選『是』會開啟Internet Explorer中的媒體工具列，來播放這個檔案。

14. 將音效檔案加入網頁中 • 你可以讓檔案直接透過輔助程式來處理，也可以直接將輔助程式的面板加入網頁中，讓使用者可以透過網頁來播放音樂或停止播放音樂，這時就不會啟動輔助程式了。要將音效檔案加入網頁中有二個方法，第一是使用<EMBED>標籤，第二則是透過<OBJECT>標籤。

15. 透過<EMBED>標籤來設定 • <EMBED>標籤是專用來加入網頁音效的檔案，直接在標籤之後加入音效檔案的連結，不論是WAV、MP3或是Midi檔案皆可，程式的寫法如下。 • <embed src="../midi/totoro1.mid"></embed>

16. 音效檔案的連結 • 當你要在網頁中加入音效檔案時，音效檔案必須和網頁存在一起，若放在子資料夾中，雖然沒有連結錯誤的狀況，但實際上並無法播放音樂，這點要請你特別注意。 • 如果網頁觀眾的瀏覽器無法支援<EMBED>標籤，那網頁中同樣會出現檔案的超連結，讓使用者透過點選連結的方式來收聽音樂。音樂預設只會播放一次，若你希望音樂不斷的重複循環播放，那可以加入『LOOP』屬性，屬性值為『TRUE』。沿用上一個範例，程式如下，設定後範例網頁為10-2-4.htm。

17. 透過<OBJECT>標籤來設定 • <OBJECT>標籤可以在網頁中加入音效檔案、影片檔案和各種的Active X物件，由於可以加入的檔案類型較多，相對程式的寫法也比較複雜。所以多數人再加入網頁音效時，還是會透過<EMBED>標籤來設定比較簡單。

18. 10-3　替網頁加上背景音樂 • 背景音樂是網頁常見的多媒體效果，當瀏覽網頁時會有不同的播放背景音樂，常用來當作背景音樂的檔案纇型有WAV檔、MIDI檔、ReadAutio檔、ASF檔等，不過一般最常使用的是MIDI檔，因為其檔案容量小，不會因為播放音樂而拖慢網頁讀取的速度。

19. 不顯示播放面板 • 使用<EMBED>標籤或<OBJECT>標籤來設定背景音樂和加入音效檔案其實是完全一樣的方法，唯一的差別是設定背景音樂時，自然不能看到播放程式的面板囉。那怎麼把面板隱藏起來呢，很簡單，將面板的高和寬都設定為『1』就看不到面板的存在了，但是仍舊可以聽到音樂。 • 透過<BGSOUND>標籤來設定 • 當你要透過<BGSOUND>標籤來設定背景音樂時，預設就不會出現播放的面板，所以不論音量的大小、聲道都必須透過程式來設定，範例網頁程式如下，網頁名稱為10-3-2.htm。

20. 10-4　視訊與動畫的應用 • 影片檔案的類型相當多，一般會放在網頁上的影片以WAV、ASF檔案居多，這當然是因為檔案的體積小，若要加入如Direct或Flash等動畫檔案，那必須透過<OBJECT>標籤來設定程式才行。

21. 透過<EMBED>設定影片 • 要在網頁中加入影片檔案同樣可以透過<A HREF>標籤來設定超連結，讓檔案透過多媒體播放程式來處理，或是透過<EMBED>標籤透過面板來播放影片，在光碟中有二個WAV的影片檔案，試將影片檔案加入範例網頁中，並分別設定面板的高和寬，設定後程式如下。 • 當你設定面板視窗的大小時，要注意到影片的大小，若視窗太小時就無法看到完整的影片了，一般會將控制面板設定寬至少為300以上、高至少為250以上，以上例筆者將視窗的寬改為『350』、高改為『280』，程式如下。

22. 使用<IMG>標籤來加入影片 • 另一個可以用來加入影片的方法，就是透過<IMG>標籤的『DYNSRC』屬性，使用這個標籤的好處是不會出現控制面板而只有影片視窗，不過只有Internet Explorer才支援這種方法。

23. 播放Flash影片 • 要加入Flash影片，同樣是使用<OBJECT>標籤，和之前加入音樂不同的是，因為處理的程式不同了，所設定的程式代碼也就不同，HTML程式語法基本的寫法如下。 • <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0">

24. 10-5　使用GIF檔案讓網頁更多變 • 在介紹加入圖片時，曾經使用<IMG>標籤加入JPEG或GIF圖檔，這裡要介紹的GIF圖檔本身就具備動畫的功能。GIF圖檔有個特色，就是你可以將數張圖片合成連續的片段存成GIF圖檔，因此圖檔本身就具備了動態的效果。

25. 認識GIF動畫 • GIF動畫所使用的檔案格式為GIF89a，一般的繪圖軟體可處理的GIF檔案為GIF87a格式，所以要製作GIF動畫一般得透過專門的動畫編輯軟體，或者透過Photoshop7以上版本的ImageReady也可以製作動畫。 • 如果你懶得自己製作動畫也可以透過網路下載，網路上不少網頁都提供了GIF動畫檔案可以下載，提供給使用者更多的選擇。

26. 透過ImageReady來製作動畫 • 要透過ImageReady來製作動畫，首先當然是準備圖片囉。你可以只使用一張圖片來製作動畫，或是將數張圖片混合為一張圖片，筆者準備了三張圖片檔案來製作動畫檔案分別是Bird01~Bird03.psd。