1、多媒體簡介 Web 上的多媒體指的是音效、音樂、視頻和動畫，多媒體有多種不同的格式，它可以是聽到或看到的任何內容，文字、圖片、音樂、音效、錄音、電影、動畫等等。在互聯網上，幾乎在所有網站都能發現嵌入網頁中的多媒體元素，現代瀏覽器已支持多種多媒體格式。 第一代瀏覽器只支持文本，而且即使是對文本的支
1、多媒體簡介
Web 上的多媒體指的是音效、音樂、視頻和動畫，多媒體有多種不同的格式，它可以是聽到或看到的任何內容，文字、圖片、音樂、音效、錄音、電影、動畫等等。在互聯網上，幾乎在所有網站都能發現嵌入網頁中的多媒體元素，現代瀏覽器已支持多種多媒體格式。
第一代瀏覽器只支持文本，而且即使是對文本的支持也僅限於單一字體和單一顏色，隨後誕生了支持顏色、字體和文本樣式的瀏覽器，還增加了對圖片的支持。不同的瀏覽器以不同的方式處理對音效、動畫和視頻的支持，某些元素能夠以內聯的方式處理，而某些則需要額外的插件。
2、多媒體格式
多媒體元素（比如音頻和視頻）存儲於媒體文件中。確定媒體類型最常用的方法就是查看文件擴展名，例如當瀏覽器得到文件擴展名為 .html 時，他會自動識別該文件是 HTML 頁面。.xml 擴展名指示 XML 文件，而 .css 擴展名指示樣式表，圖片格式則通過 .gif 或 .jpg 來識別。多媒體元素也擁有帶有不同擴展名的文件格式，比如 .mp3、.mp4、.wmv 以及 .swf。
(1)、音頻格式
最常見的就是 mp3 格式的音樂文件，MP3 是一種音頻壓縮技術，其全稱是動態影像專家壓縮標準音頻層面3（Moving Picture Experts Group Audio Layer III），簡稱為MP3，它被設計用來大幅度地降低音頻數據量。
以下是常見的六種音頻格式：
①、MP3 格式，文件擴展名 .mp3。
MP3 文件實際上是 MPEG 文件的聲音部分，MP3 是其中最受歡迎的針對音樂的聲音格式。
②、WAV 格式，文件擴展名 .wav。
WAV 是由微軟公司推出的一種聲音文件格式，它是最早的數字音頻格式，用於保存 Windows平臺的音頻信息資源，被 Windows平臺及其應用程式廣泛支持。WAV 是最接近無損的音樂格式，與 CD 相差無幾，因此 WAV 格式對存儲空間需求太大不便於交流和傳播。
③、WMA 格式，文件擴展名 .wma。
WMA（Windows Media Audio），質量優於 MP3，相容大多數播放器，除了 iPod，他也是最常見的一種音樂文件格式，WMA 文件可作為連續的數據流來傳輸，這使它對於網路電臺或線上音樂很實用。
④、APE 格式，文件擴展名 .ape。
APE 是流行的數字音樂無損壓縮格式之一，是非常流行的一種音樂格式，WAV 格式體積過大，而 APE 格式大概只有原 CD 的一半，因此便於存儲。
⑤、FLAC 格式，文件擴展名 .flac。
FLAC 也是流行的無損音頻壓縮格式之一，不同於其他有損壓縮如 MP3，FLAC 是無損壓縮，也就是說音頻以 FLAC 編碼壓縮後不會丟失任何信息，可以還原音樂光碟音質，目前常見的無損壓縮數字音樂格式就是：APE 和 FLAC。
⑥、MIDI 格式，文件擴展名 .mid 或 .midi。
MIDI（Musical Instrument Digital Interface）是一種針對電子音樂設備（比如合成器和音效卡）的格式，MIDI 文件不含有聲音，但包含可被電子產品（比如音效卡）播放的數字音樂指令。因為 MIDI 格式僅包含指令，所以 MIDI 文件極其小巧。因此 MIDI 得到了廣泛的平臺上大量軟體的支持，大多數流行的瀏覽器都支持 MIDI 格式。
(2)、視頻格式
MP4 是最常見的一種視頻播放格式，如果經常下載電影，那麼對於 AVI、WMV、.swf 或 .flv 也不會陌生。3GP 是一種常用於手機播放視頻的格式，他一種 3G 流媒體的視頻編碼格式，是 MP4 格式的一種簡化版本，減少了儲存空間和較低的頻寬需求，讓手機上有限的儲存空間可以使用。
以下是常見的五種視頻格式：
①、MP4 格式，文件擴展名 .mp4。
MP4 即 Mpeg-4 是一種針對網際網路的新視頻格式， 並且是 HTML5 支持的視頻格式。
MPEG（Moving Pictures Expert Group，動態圖像專家組）格式是網際網路上最流行的格式，它是跨平臺的，得到了所有最流行的瀏覽器的支持。MPEG 是針對運動圖像和語音壓縮制定國際標準的組織，專門負責音頻和視頻標準，他用於視頻的文件擴展名還有 .mpg 等。
②、AVI 格式，文件擴展名 .avi。
AVI (Audio Video Interleave) 格式是由微軟開發的，所有運行 Windows 的電腦都支持 AVI 格式，它是網際網路上很常見的格式，但非 Windows 電腦並不是總能夠播放。
③、Flash 格式，文件擴展名 .swf 或 .flv。
Flash 格式是由 Macromedia(納斯達克：MACR) 公司開發的，該格式需要額外的組件來播放，但是該組件會預裝到 Firefox 或 IE 之類的瀏覽器上。
④、RealVideo 格式，文件擴展名有四種格式：.ra、.rm、.ram、.rmvb。
RealVideo 格式是由 Real Media 針對網際網路開發的，該格式允許低帶寬條件下（線上視頻、網路電視）的視頻流，由於是低帶寬優先的，所以質量常會降低。
⑤、QuickTime 格式，文件擴展名 .mov。
QuickTime 格式是由蘋果公司開發的，該格式也是網際網路上常見的格式，但是 QuickTime 電影不能在沒有安裝額外組件的 Windows 電腦上播放。
註意：HML5 的最新標準支持 MP3， WAV 和 Ogg 音頻格式，視頻格式只支持 MP4，WebM 和 Ogg 格式。
Ogg 全稱是 OGG Vorbis， 是一種新的音頻壓縮格式，Vorbis 是這種音頻壓縮機制的名字，文件擴展名是 .ogg。該文件格式在網上實在是太難找了，音頻文件還能找見，視頻文件反正我是一個都沒找見，但是可以使用視頻轉換器轉換格式，先後下載了魔音工廠和格式工廠，但都支持 OGG 音頻文件的轉換，並不能轉換為 OGG 格式的視頻，所幸大多數瀏覽器都支持 MP4 格式的視頻文件，最後又下載里狸窩視頻轉換器，終於是可以將一個 MP4 文件轉換為 WebM 格式了，但同樣也不支持 OGG 視頻的轉換。據說可以使用 Miro Video Converter 和 Easy HTML5 Video 將任何格式的視頻轉換為 HTML5 視頻格式，目前還沒有嘗試。
WebM 是由 Google 提出的，是一個開放、免費的媒體文件格式，該影片格式其實是以 Matroska（即 MKV）容器格式為基礎開發的新容器格式，裡面包括了 VP8 影片軌和 Ogg Vorbis 音軌。WebM 項目旨在為對每個人都開放的網路開發高質量、開放的視頻格式，其重點是解決視頻服務這一核心的網路用戶體驗，WebM 標準的視頻更加偏向於開源並且是基於 HTML5 標準的，擴展名為 .webm。
3、HTML 插件
插件的功能是擴展 HTML 瀏覽器的功能，插件有也被稱為輔助應用程式，是可由瀏覽器啟動的程式，輔助程式可用於播放音頻和視頻，以及其他。插件可以通過 <object> 標簽或者 <embed> 標簽添加在頁面中，大多數輔助應用程式允許用戶來控制部分或全部播放設置，比如後退、暫停、停止和播放。
(1)、<object> 元素
<object> 元素定義了在 HTML 文檔中嵌入的對象，該標簽用於插入對象，例如在網頁中嵌入 Java 小程式，PDF 閱讀器，Flash 播放器。目前大多數主流瀏覽器都支持 <object> 標簽。
插入視頻：<object data="demo.swf" width="200" height="50"></object>
Firefox 不支持將該標簽用於插入視頻。
Chrome 支持使用該標簽播放 Flash 格式的視頻，但是無播放控制項，直接播放，IE 不支持。
IE 和 Chrome 支持使用該標簽播放 MP4 格式的視頻，IE8 及之前版本不支持。
或者插入一張圖片：<object data="icon.jpg"></object>
<object> 元素可用於包含 HTML 文件：<object data="index.html" width="100%" height="500px"></object>
(2)、<embed> 元素
<embed> 元素定義了一個容器，用來嵌入外部應用或者插件。目前所有主流瀏覽器都支持 <embed> 元素。
插入視頻：<embed src="demo.mp4" width="480" height="270">
Firefox 需要安裝插件才能顯示此內容。
IE 和 Chrome 支持使用該標簽播放 MP4 格式的視頻，並且 IE8 及之前版本也支持。
只有 Chrome 支持使用該標簽播放 Flash 格式的視頻，但是無播放控制項，直接播放。
或者插入一張圖片：<embed src="icon.jpg">
在 IE 中會顯示滾動條，在 Chrome 和 Firefox 中顯示圖片大小，無滾動條，IE8 及之前版本不支持。
<embed> 元素同樣可用於包含 HTML 文件：<embed src="index.html" width="100%" height="500px">
IE 和 Chrome 支持，IE8 及低版本不支持，Firefox 需要安裝插件才能顯示此內容。
4、HTML 音頻（Audio）
聲音在 HTML 中可以以不同的方式播放，在 HTML5 出現之前在網頁中播放音頻並不容易，需要確保音頻文件在所有瀏覽器中（IE，Chrome，Firefox，Safari，Opera）和所有硬體上（PC，Mac，iPad，iPhone）都能夠播放。
(1)、使用插件
瀏覽器插件是一種擴展瀏覽器標準功能的小型電腦程式，插件可以使用 <object> 標簽或者 <embed> 標簽添加在頁面上，這些標簽定義資源（通常非 HTML 資源）的容器，根據類型，它們會由瀏覽器自動顯示，也會由外部插件顯示。
(2)、使用 <object> 元素
<object> 標簽可以定義外部內容的容器，主要被用來定義一個嵌入式世的對象。object 對象一個優點是，對於不支持該元素或者未顯示該元素的瀏覽器，就會執行位於 <object> 和 </object> 之間的代碼，通過這種方式，我們能夠嵌套多個 object 元素，每個對應一個瀏覽器。使用該元素嵌入音頻如下：
<object data="audio/海浪.mp3" width="300" height="100">暫不支持。</object>
存在的問題：①：在 Chrome 下可直接播放，IE 限制網頁運行腳本或 ActiveX 控制項，點擊允許阻止內容後，即可播放，但是 Firefox 不支持該標簽用於插入音頻，也不支持 ActiveX 控制項。②：如果瀏覽器不支持該音頻格式，就無法播放該音頻。③：如果把該文件轉換為其他格式，仍然無法在所有瀏覽器中播放。
(3)、使用 <embed> 元素
<embed> 標簽也可以定義外部內容的容器，主要被用來定義一個容器，用於嵌入外部應用或者插件。這是一個 HTML5 標簽。該元素沒有關閉標簽，因此不能使用替代文本。使用該元素嵌入音頻如下：
<embed src="audio/甘心情願.mp3" width="300" height="100" />
存在的問題：①：不同的瀏覽器對音頻格式的支持不同。②：如果用戶的電腦未安裝插件，就無法播放音頻。雖然 Firefox 支持 Ogg 格式，但還是需要安裝插件來顯示內容。③：如果把該文件轉換為其他格式，仍然無法在所有瀏覽器中播放。
(4)、使用 HTML5 <audio> 元素
<audio> 是 HTML5 中新增加的元素，主要被用來定義聲音，比如音樂或其他音頻流，目前所有主流瀏覽器都支持該標簽。使用該元素嵌入音頻如下：
<audio src="audio/帝都.wav" controls autoplay></audio>
使用 <audio> 元素，只能規定一個音頻文件，對於不支持此格式的瀏覽器，就無法播放，比如上面的例子，IE 就不支持 WAV 格式，播放器顯示：錯誤，音頻播放已中止，在 IE 中限制網頁運行腳本或 ActiveX 控制項，點擊允許阻止內容後，則顯示：錯誤：音頻類型不受支持或文件路徑無效，在 Chrome 和 Firefox 中可正常播放。
<audio> 元素如果不使用屬性，就無法播放音頻。上面的例子，讓我們能在頁面上看到播放器，並且在打開頁面之後即可播放，完全得益於這兩個屬性：controls 和 autoplay。controls 屬性用於向用戶顯示音頻控制項，也就是播放器，用戶可以自行操作，比如播放/暫停。autoplay 屬性規定音頻在就緒後馬上播放。該元素還有幾個重要屬性：src 規定媒體文件的 URL。loop 屬性規定每當音頻結束時重新開始播放。muted 屬性規定音頻輸出為靜音。preload 屬性規定是否在頁面載入後載入音頻。該屬性有3個值：preload="none|auto|meta"，當值為 none 時，規定當頁面載入後不載入音頻，當值為 auto 時，規定當頁面載入後載入整個音頻，當值為 meta 時，規定當頁面載入後只載入元數據。
要想音頻支持所有瀏覽器，可以在 <audio> 標簽中嵌套使用 <source> 標簽，定義兩種格式的音頻文件。如下：
1 <audio controls autoplay> 2 <source src="audio/平凡之路.ogg" type="audio/ogg"> 3 <source src="audio/彼岸.mp3" type="audio/mpeg"> 4 </audio>
<source> 是 HTML5 中新增加的元素，作用就是為媒體元素（比如 <video> 和 <audio>）定義媒體資源，該標簽允許定義兩個音頻頻/視頻文件共瀏覽器根據它對媒體類型的支持進行選擇。該標簽有3個屬性：src 屬性規定媒體文件的 URL， type 屬性規定媒體元素的類型， medai 屬性指定媒體資源的類型（文件為什麼樣的媒體/設備進行了優化）。瀏覽器使用該屬性，以決定是否下載，即確定是否可以播放該文件，如果它不能，它可以選擇不下載文件。該屬性可接受多個值，但是目前幾乎所有主流瀏覽器都不支持此屬性。
在使用 <audio> 標簽時，必須把音頻文件轉換為不同的格式，確保所有瀏覽器都支持，但是在老式瀏覽器中該元素無效，比如 IE8 就不支持該元素，而 IE8 以上的新版本瀏覽器都可以使用。
所有瀏覽器都支持以 mp3 或 ogg 來播放音頻，但如果不支持 <audio> 元素，可以在 <audio> 標簽中嵌套使用 <embed> 元素，但使用<embed> 元素無法回退來顯示錯誤消息。相容代碼如下：
1 <audio autoplay> 2 <source src="audio/甘心情願.mp3" type="audio/mpeg"> 3 <source src="audio/平凡之路.ogg" type="audio/ogg"> 4 <embed src="audio/海浪.mp3" height="100" width="300"> 5 </audio>
在 IE8 以及更低版本的瀏覽器中，會自動播放 <embed> 元素中規定的音頻，但是 IE 會限制網頁運行腳本或 ActiveX 控制項，需要點擊允許阻止內容後，才可播放。
註意：所有瀏覽器都支持 MP3 格式的音頻。 IE 和 Safari 不支持 Ogg 格式，而 Chrome、Firefox 和 Opera 都支持此格式。Chrome、Firefox、Safari 和 Opera 都支持 WAV 格式，但是 IE 不支持，IE 只支持 MP3格式。
(5)、使用超鏈接
如果網頁包含指向媒體文件的超鏈接，大多數瀏覽器會使用"插件"來播放文件。如下是一個指向 MP3 文件的超鏈接，當用戶點擊該鏈接後，瀏覽器會啟動"插件"來播放該文件：
<a href="audio/十三電音.mp3" target="_blank">播放音樂！</a>
上面的代碼，在 Chrome 和 Firefox 中點擊鏈接後瀏覽器會啟動插件播放該音頻，而在 IE 中（包括 IE8 及之前版本）點擊鏈接後會提示：要打開或保存來自 XX 的 十三電音.mp3 嗎？我的電腦預設使用酷狗播放音樂，點擊打開之後，自啟動酷狗音樂播放該音頻，而點擊保存則下載該音頻。
5、HTML 視頻（Video）
同在 HTML 中播放音頻一樣，在頁面中播放視頻也有很多種方法，同樣也需要確保視頻文件在所有瀏覽器中和所有硬體上都能夠播放，也可以使用 <object> 和 <embed> 標簽來完成視頻的播放，但前邊我們說這兩個標簽主要被用來定義一個嵌入的插件，因此不建議使用這2個標簽來插入音頻或者視頻，最好是使用 HTML5 中 <audio> 和 <video> 標簽來顯示音頻和視頻。
(1)、使用 HTML5 <video> 元素
<video> 是 HTML5 中新增加的元素，主要被用來定義視頻，比如電影片段或其他視頻流，目前所有主流瀏覽器都支持該標簽。使用該元素嵌入視頻如下：
<video src="video/如果你也聽說.mp4" width="320px" height="240px" controls autoplay></video>
使用 <video> 元素，也只能規定一個視頻文件，對於不支持此格式的瀏覽器，就無法播放，在 IE 中播放視頻時，IE 會限制網頁運行腳本或 ActiveX 控制項，點擊允許阻止內容後，開始播放。
同樣的，<video> 元素如果不使用屬性，就無法播放視頻。如果為視頻規定了尺寸，而忘了規定播放控制項和就緒後播放的屬性，那麼在瀏覽器中就顯示規定尺寸大小的黑塊。controls 和 autoplay 屬性規定向用戶顯示播放控制項和就緒後馬上播放。src 屬性規定要播放視頻的 URL。width 和 height 屬性用於設置視頻播放器的寬度和高度，需要註意：不能使用這兩個屬性來縮小視頻，這樣會迫使用戶下載原始的視頻，即時他在網頁中顯示的很小。規定視頻的高度和寬度是一個好習慣，如果設置這些屬性，在頁面載入時會為視頻預留出空間，如果沒有設置這些屬性，那麼瀏覽器就無法預先確定視頻的尺寸，這樣就無法為視頻保留合適的空間，瀏覽器會自動定義顯示大小，結果是，在頁面載入的過程中，其佈局也會產生變化，造成意想不到的結果。loop 屬性規定每當視頻結束時重新開始播放。muted 屬性規定視頻頻輸出為靜音。preload 屬性：如果出現該屬性，則視頻在頁面載入時進行載入，並預備播放。如果使用 "autoplay"，則忽略該屬性。該屬性有3個值：preload="none|auto|meta"，當值為 none 時，指示頁面載入後不載入音頻/視頻。當值為 auto 時，指示頁面載入後則載入音頻/視頻。當值為 meta 時，指示當頁面載入後僅載入音頻/視頻的元數據。
要想視頻支持所有瀏覽器，也可以在 <video> 標簽中嵌套使用 <source> 標簽，定義兩種視頻格式的文件。如下：
1 <video width="320px" height="240px" controls autoplay> 2 <source src="video/如果你也聽說.webm" type="video/webm"> 3 <source src="video/預謀.mp4" type="video/mp4"> 4 </video>
幾乎所有瀏覽器都支持 MP4 格式的視頻播放，但是在老式瀏覽器中 <video> 元素無效，比如 IE8 就不支持該元素，而 IE8 以上的新版本瀏覽器都可以使用。對於不支持 <video> 元素的瀏覽器，可以在 <video> 標簽中嵌套使用 <embed> 元素，但使用 <embed> 元素無法回退來顯示錯誤消息，也可以使用 <object>元素。相容代碼如下：
1 <video width="320px" height="240px" controls autoplay> 2 <source src="video/預謀.mp4" type="video/mp4"> 3 <source src="video/如果你也聽說.webm" type="video/webm"> 4 <embed src="video/愛就愛了.mp4" width="480px" height="270px"> 5 </video>
(2)、使用超鏈接
播放視頻也可使用超鏈接方式，如果網頁包含指向媒體文件的超鏈接，大多數瀏覽器會使用"插件"來播放文件。如下是一個指向 MP4 文件的超鏈接，當用戶點擊該鏈接後，瀏覽器會啟動"插件"來播放該文件：
<a href="video/好樂Day.mp4">播放視頻！</a>
上面的代碼，在 Chrome 和 Firefox 中點擊鏈接後瀏覽器會啟動插件播放該視頻，而在 IE 中（包括 IE8 及之前版本）點擊鏈接後會提示：要打開或保存來自 XX 的 好樂Day.mp4 嗎？點擊打開之後，自啟動本地預設視頻播放器播放該視頻，而點擊保存則下載該視頻。
(3)、使用優酷
如果你希望在網頁中播放視頻，還有一種方法就是使用優酷等視頻網站，不過你需要先把顯示的視頻上傳到優酷網上，然後在網頁中使用 <embed> 標簽將視頻鏈接地址插入到 HTML 代碼中即可播放，這是在 HTML5 出現之前在網頁中顯示視頻最簡單的方法。
註意：所有瀏覽器都支持 MP4 格式的視頻， IE 和 Safari 既不支持 Ogg 格式也不支持 WebM 格式， Chrome 和 Firefox 既支持 Ogg 格式也支持 WebM 格式，IE 只支持 MP4 格式。
<video> 元素可使用 DOM 進行控制，<video> 元素同樣擁有方法、屬性和事件。
6、內聯媒體
當你在網頁中包含媒體元素，或者作為網頁的組成部分時，它被稱為內聯媒體，當聲音包含在網頁中時，它被稱為內聯音頻，而當視頻被包含在網頁中時，它被稱為內聯視頻。
如果你打算在 web 應用程式中使用內聯媒體時，你需要意識到很多人都覺得內聯媒體令人惱火，比如打開頁面之後就播放視頻廣告，或者播放音樂，並且用戶可以自行關閉瀏覽器中的內聯媒體選項。
因此建議只在用戶希望看到內聯媒體的地方包含它們，比如在用戶需要聽到錄音或者看到視頻時，點擊某個鏈接，打開頁面然後播放媒體。或者為了增強動態交互，增加用戶體驗，可以在用戶滑鼠划過特定內容時，播放簡短的音效，使頁面內容更生動。
註意：在播放視頻文件時，一定要測試好文件再使用，否則顯示在瀏覽器上，可能只有畫面而沒有聲音。
<audio> 和 <video> 元素都支持使用 DOM 進行控制，<audio> 和 <video> 元素的方法、屬性和事件可以使用 JavaScript 進行操作，其中的方法可用於播放、暫停以及載入等。其中的屬性（比如時長、音量等）可以被讀取或設置。其中的 DOM 事件可通知我們，比說 <video> 元素開始播放、已暫停，已停止等等。
7、HTML 多媒體標簽
<audio> (H5) 標簽定義了聲音，比如音樂或其他音頻流。
<video> (H5) 標簽定義視頻，比如影片或者其他視頻流。
<source> (H5) 標簽為媒體元素（比如 <video> 和 <audio>）定義媒體資源，並且允許規定2個不同的音頻或視頻文件格式供不支持某種格式的瀏覽器選擇。
<track> (H5) 標簽為媒體（<video> 和 <audio>）元素定義外部文本軌道，比如字幕文件或其他包含文本的文件，當媒體播放時，這些文件是可見的。
