Top Banner
10-1 認認認認 認認認認認 何何何何何何 何何何何何何何何何 何何何何 何何何何何 何何何何何何何何何何何 體一,體, 何何 何何何何何何何何何何何何 何何何何何何何何何何何何何 何何何何何何 體,體。, 何何 何何何何何何何何何何何何何何何何何何 何何何何何何 何何何 何何何 體、、、、 何何 何何何何何何何何何何何 何何何何何何 何何何 何何 何 、,一一體。
26

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

Dec 31, 2015

Download

Documents

garth-church

10-1  認識多媒體檔案的格式. 何謂多媒體 媒體是一種傳達資訊的工具,而多媒體顧名思義,則是結合了許多不同種類的媒體,讓使用者可以透過這些媒體有更多的想像空間可以發揮。簡單的來說,多媒體就是結合了我們在日常生活之中會看到、聽到的文字、影像、圖形、聲音、動畫和影片等等的元素,將其整合為一個單一媒體。. 常用的多媒體輔助程式. 早期的瀏覽器當然不太支援多媒體的效果,網頁除了文字和圖片和 Midi 音樂就無法處理,目前的瀏覽器雖說可以用來播放音效、影片和動畫,但實際的播放動作其實是靠其他輔助程式來完成的。. 多媒體輔助程式與檔案類型. - PowerPoint PPT Presentation
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: 10-1  認識多媒體檔案的格式

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

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

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

常用的多媒體輔助程式

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

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

多媒體輔助程式與檔案類型

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

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

Windows Media Player

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

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

RealOne Player

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

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

Flash

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

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

常見的多媒體檔案類型

ASF:是 Microsoft 為了和 Real player競爭而發展出來的一種可以直接在網上觀看視頻節目的檔案壓縮格式!由於它使用了 MPEG4的壓縮演算法,所以壓縮率和圖像的質量都很不錯。

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

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

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

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

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

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

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

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就得要較新的播放程式,或配合外掛程式才能播放。

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

10-2  網頁音效的設定

你希望網頁瀏覽者一進入你的網站,就聽到悅耳動人的音樂其實很簡單,不論是透過超連結的設定或是背景音樂都可以達到此目的。在介紹如何設定前筆者要先提醒你,要在網頁加入音效或音樂檔案時,務必考慮到檔案的體積。

目前最常被使用的檔案為 Midi 檔案,因為此類型體積較小,網路傳輸快,而大家熟悉的 MP3 檔案體積相對龐大許多,所以較少使用。

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

設定音效檔案的超連結

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

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

將音效檔案加入網頁中

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

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

透過 <EMBED> 標籤來設定

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

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

音效檔案的連結

當你要在網頁中加入音效檔案時,音效檔案必須和網頁存在一起,若放在子資料夾中,雖然沒有連結錯誤的狀況,但實際上並無法播放音樂,這點要請你特別注意。

如果網頁觀眾的瀏覽器無法支援 <EMBED> 標籤,那網頁中同樣會出現檔案的超連結,讓使用者透過點選連結的方式來收聽音樂。音樂預設只會播放一次,若你希望音樂不斷的重複循環播放,那可以加入『 LOOP』屬性,屬性值為『 TRUE』。沿用上一個範例,程式如下,設定後範例網頁為 10-2-4.htm。

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

透過 <OBJECT> 標籤來設定

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

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

10-3  替網頁加上背景音樂

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

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

不顯示播放面板 使用 <EMBED> 標籤或 <OBJECT> 標籤來設定背景音樂和

加入音效檔案其實是完全一樣的方法,唯一的差別是設定背景音樂時,自然不能看到播放程式的面板囉。那怎麼把面板隱藏起來呢,很簡單,將面板的高和寬都設定為『 1』就看不到面板的存在了,但是仍舊可以聽到音樂。

透過 <BGSOUND> 標籤來設定 當你要透過 <BGSOUND> 標籤來設定背景音樂時,預設

就不會出現播放的面板,所以不論音量的大小、聲道都必須透過程式來設定,範例網頁程式如下,網頁名稱為 10-3-2.htm。

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

10-4  視訊與動畫的應用

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

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

透過 <EMBED> 設定影片

要在網頁中加入影片檔案同樣可以透過 <A HREF> 標籤來設定超連結,讓檔案透過多媒體播放程式來處理,或是透過 <EMBED> 標籤透過面板來播放影片,在光碟中有二個 WAV 的影片檔案,試將影片檔案加入範例網頁中,並分別設定面板的高和寬,設定後程式如下。

當你設定面板視窗的大小時,要注意到影片的大小,若視窗太小時就無法看到完整的影片了,一般會將控制面板設定寬至少為 300 以上、高至少為 250 以上,以上例筆者將視窗的寬改為『 350』、高改為『 280』,程式如下。

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

使用 <IMG> 標籤來加入影片

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

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

播放 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">

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

10-5  使用 GIF 檔案讓網頁更多變

在介紹加入圖片時,曾經使用 <IMG> 標籤加入JPEG 或 GIF 圖檔,這裡要介紹的 GIF 圖檔本身就具備動畫的功能。 GIF 圖檔有個特色,就是你可以將數張圖片合成連續的片段存成 GIF圖檔,因此圖檔本身就具備了動態的效果。

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

認識 GIF 動畫

GIF 動畫所使用的檔案格式為 GIF89a ,一般的繪圖軟體可處理的 GIF 檔案為 GIF87a格式,所以要製作 GIF 動畫一般得透過專門的動畫編輯軟體,或者透過 Photoshop7以上版本的 ImageReady 也可以製作動畫。

如果你懶得自己製作動畫也可以透過網路下載,網路上不少網頁都提供了 GIF 動畫檔案可以下載,提供給使用者更多的選擇。

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

透過 ImageReady 來製作動畫

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