HTML 多媒體

時間 2019-12-04

標籤 html 多媒體欄目 HTML 简体版

原文原文鏈接

一、多媒體簡介

　　Web 上的多媒體指的是音效、音樂、視頻和動畫，多媒體有多種不一樣的格式，它能夠是聽到或看到的任何內容，文字、圖片、音樂、音效、錄音、電影、動畫等等。在互聯網上，幾乎在全部網站都能發現嵌入網頁中的多媒體元素，現代瀏覽器已支持多種多媒體格式。css

　　第一代瀏覽器只支持文本，並且即便是對文本的支持也僅限於單一字體和單一顏色，隨後誕生了支持顏色、字體和文本樣式的瀏覽器，還增長了對圖片的支持。不一樣的瀏覽器以不一樣的方式處理對音效、動畫和視頻的支持，某些元素可以之內聯的方式處理，而某些則須要額外的插件。html

二、多媒體格式

　　多媒體元素（好比音頻和視頻）存儲於媒體文件中。肯定媒體類型最經常使用的方法就是查看文件擴展名，例如當瀏覽器獲得文件擴展名爲 .html 時，他會自動識別該文件是 HTML 頁面。.xml 擴展名指示 XML 文件，而 .css 擴展名指示樣式表，圖片格式則經過 .gif 或 .jpg 來識別。多媒體元素也擁有帶有不一樣擴展名的文件格式，好比 .mp三、.mp四、.wmv 以及 .swf。git

　　(1)、音頻格式web

　　最多見的就是 mp3 格式的音樂文件，MP3 是一種音頻壓縮技術，其全稱是動態影像專家壓縮標準音頻層面3（Moving Picture Experts Group Audio Layer III），簡稱爲MP3，它被設計用來大幅度地下降音頻數據量。小程序

　　如下是常見的六種音頻格式：瀏覽器

　　①、MP3 格式，文件擴展名 .mp3。網絡

　　MP3 文件其實是 MPEG 文件的聲音部分，MP3 是其中最受歡迎的針對音樂的聲音格式。ide

　　②、WAV 格式，文件擴展名 .wav。oop

　　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、.rmvb、.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。

三、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 須要安裝插件才能顯示此內容。

四、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 嗎？個人電腦默認使用酷狗播放音樂，點擊打開以後，自啓動酷狗音樂播放該音頻，而點擊保存則下載該音頻。

五、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> 元素一樣擁有方法、屬性和事件。

六、內聯媒體

　　當你在網頁中包含媒體元素，或者做爲網頁的組成部分時，它被稱爲內聯媒體，當聲音包含在網頁中時，它被稱爲內聯音頻，而當視頻被包含在網頁中時，它被稱爲內聯視頻。

　　若是你打算在 web 應用程序中使用內聯媒體時，你須要意識到不少人都以爲內聯媒體使人惱火，好比打開頁面以後就播放視頻廣告，或者播放音樂，而且用戶能夠自行關閉瀏覽器中的內聯媒體選項。

　　所以建議只在用戶但願看到內聯媒體的地方包含它們，好比在用戶須要聽到錄音或者看到視頻時，點擊某個連接，打開頁面而後播放媒體。或者爲了加強動態交互，增長用戶體驗，能夠在用戶鼠標劃過特定內容時，播放簡短的音效，使頁面內容更生動。

　　注意：在播放視頻文件時，必定要測試好文件再使用，不然顯示在瀏覽器上，可能只有畫面而沒有聲音。

　　<audio> 和 <video> 元素都支持使用 DOM 進行控制，<audio> 和 <video> 元素的方法、屬性和事件可使用 JavaScript 進行操做，其中的方法可用於播放、暫停以及加載等。其中的屬性（好比時長、音量等）能夠被讀取或設置。其中的 DOM 事件可通知咱們，比說 <video> 元素開始播放、已暫停，已中止等等。