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">
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> 標簽，定義兩種格式的音頻文件。如下：
<audio controls autoplay>
<source src="audio/平凡之路.ogg" type="audio/ogg">
<source src="audio/彼岸.mp3" type="audio/mpeg">
</audio>
<source> 是 HTML5 中新增加的元素，作用就是為媒體元素（比如 <video> 和 <audio>）定義媒體資源，該標簽允許定義兩個音頻頻/視頻文件共浏覽器根據它對媒體類型的支持進行選擇。該標簽有3個屬性：src 屬性規定媒體文件的 URL， type 屬性規定媒體元素的類型， medai 屬性指定媒體資源的類型（文件為什麼樣的媒體/設備進行了優化）。浏覽器使用該屬性，以決定是否下載，即確定是否可以播放該文件，如果它不能，它可以選擇不下載文件。該屬性可接受多個值，但是目前幾乎所有主流浏覽器都不支持此屬性。
在使用 <audio> 標簽時，必須把音頻文件轉換為不同的格式，確保所有浏覽器都支持，但是在老式浏覽器中該元素無效，比如 IE8 就不支持該元素，而 IE8 以上的新版本浏覽器都可以使用。
所有浏覽器都支持以 mp3 或 ogg 來播放音頻，但如果不支持 <audio> 元素，可以在 <audio> 標簽中嵌套使用 <embed> 元素，但使用<embed> 元素無法回退來顯示錯誤消息。兼容代碼如下：
<audio autoplay>
<source src="audio/甘心情願.mp3" type="audio/mpeg">
<source src="audio/平凡之路.ogg" type="audio/ogg">
<embed src="audio/海浪.mp3" height="100" width="300">
</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> 標簽，定義兩種視頻格式的文件。如下：
<video width="320px" height="240px" controls autoplay>
<source src="video/如果你也聽說.webm" type="video/webm">
<source src="video/預謀.mp4" type="video/mp4">
</video>
幾乎所有浏覽器都支持 MP4 格式的視頻播放，但是在老式浏覽器中 <video> 元素無效，比如 IE8 就不支持該元素，而 IE8 以上的新版本浏覽器都可以使用。對於不支持 <video> 元素的浏覽器，可以在 <video> 標簽中嵌套使用 <embed> 元素，但使用 <embed> 元素無法回退來顯示錯誤消息，也可以使用 <object>元素。兼容代碼如下：
<video width="320px" height="240px" controls autoplay>
<source src="video/預謀.mp4" type="video/mp4">
<source src="video/如果你也聽說.webm" type="video/webm">
<embed src="video/愛就愛了.mp4" width="480px" height="270px">
</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>）元素定義外部文本軌道，比如字幕文件或其他包含文本的文件，當媒體播放時，這些文件是可見的。