本節書摘來自異步社區《HTML5多媒體應用開發》一書中的第2章，第2.1節,作者： 【愛】Ian Devlin 更多章節內容可以訪問云棲社區“異步社區”公眾號查看。

第2章　HTML5多媒體元素

現在你已經掌握了HTML5的簡史及其結構化元素，下面可以開始學習有關HTML5多媒體、多媒體元素和屬性的知識，以及它們所帶來的組合功能了。

HTML4.01沒有定義為網站帶來音頻和視頻的方法，這導致了交付多媒體內容的第三方插件（如Flash）的盛行。但是HTML5提供了這種必要的結構，通過Web瀏覽器在互聯網上傳遞音頻和視頻。

本章提供瀏覽器中多媒體的歷史，以及通過各個供應商發行的許多應用程序、播放器和插件回訪音頻和視頻的實現方法。然后，你將學習一些HTML5新元素，它們能讓你利用瀏覽器原生多媒體。

2.1　Web多媒體歷史

20世紀90年代初瀏覽器和Web的概念剛剛出現的時候，沒有任何多媒體。很快，圖像開始加入，但是充其量是窮人的多媒體。雖然隨著GIF動畫的出現，這些圖像可以成為動畫，但是這些動畫完全是非交互性的。即使在音頻和視頻文件出現時，互聯網技術在Web上傳遞這些文件的能力也很有限。互聯網連接很慢，而音頻和視頻文件很大，沒有人希望等待大文件的下載。文件下載之后，也必須使用獨立于Web瀏覽器的外部播放器來查看內容，這在當時很正常，很少有人為此抱怨。

互聯網連接速度的飛速提高帶來了更快地在Web上發送多媒體的能力，Web瀏覽器技術也同樣快速進步，自然地推出了現在稱之為原生多媒體的技術。

在你深入研究原生多媒體之前，我們先簡略地來看一看曾經被用來回放音頻和視頻文件（現在仍然作為桌面播放器）的外部播放器。

2.1.1　媒體播放器
媒體播放器是用于描述具有回放多媒體文件（如音頻和視頻）能力的一種軟件的標準術語，這種軟件通常有圖形用戶界面。

20世紀90年代中期，MIDI（樂器數碼接口）文件格式被用來在Web文檔上播放背景音樂，這種音樂通常自動播放。盡管MIDI音樂很令人討厭，但是畢竟是多媒體在瀏覽器上的開端。接著不同的供應商開發出了許多其他播放器，遍布于你的電腦上。

RealNetworks于1995年發布了其音頻播放器——RealAudio，第一次推出了使用專利的.ra和.ram音頻文件通過Web播放音頻的概念。RealAudio的進一步發展導致了1997年RealVideo的發布，它能使用基于H.263視頻格式的視頻流。這兩種播放器最后合并為RealPlayer，并被包含在Windows 98中作為可選工具。RealPlayer在今天仍然存在（最新的穩定版本為第14版）于許多平臺之上，它能夠播放多種音頻和視頻文件格式。

1995年Macromedia發布了第一個Shockwave版本，它起初是為Netscape瀏覽器開放的。當時，該公司流行的Director多媒體軟件使用戶能夠創建交互式的應用程序和動畫，并將其插入到Web文檔中。Macromedia還在開發另一個媒體播放器，2002年它發布了Shockwave Flash player，這個播放器支持視頻和音頻。Shockwave Flash player使用FutureWave軟件公司開發的SWF文件格式。SWF文件格式的主要目的是創建用于顯示動畫以及交換音頻、視頻和數據的更小文件。Adobe于2005年收購了Macromedia，Shockwave Flash player改名為Adobe Flash，這個特別的播放器成為通過瀏覽器傳遞多媒體時使用的播放器。

1996年Microsoft改進了過去的產品并且發表了DirectShow，之后成為Media Player 6.1，并作為Windows98的一部分發布（如圖2.1所示）。

隨著Windows 2000的發布，Microsoft發布了Windows Media Player7.1版本。這個版本具有大大改進的圖形界面，在總體上提供了更好的體驗。這個版本還自帶了Codec（編碼解碼器），用于創建和回放媒體內容的特殊文件協議。

注意：

第3章和第4章中你將分別看到有關HTML5音頻和視頻Codec的更多內容。
在后續的版本中，Microsoft改進了Media Player，持續不斷地改善這一產品。

Microsoft還致力于一個與Adobe Flash競爭的應用程序框架，可以運行瀏覽器插件（為其他更大的軟件應用如瀏覽器添加特定功能的一組小型軟件組件）以及其他豐富的互聯網應用程序。Microsoft Silverlight最早發行于2007年，支持許多不同的音頻和視頻格式，以及動畫和交互。一開始，它的采用率很低，但是到2011年6月，它已經滲透到大約73%的市場，而Adobe Flash保持著97%的市場份額。

蘋果公司也從早期就加入了多媒體播放器的競爭。它的第一個QuickTime版本發行于1991年，用于其System Software 6操作系統。QuickTime在1999年發布4.0版本之前僅用于Mac電腦，此后也能運行于Windows并支持MP3音頻播放。QuickTime 5和6能夠播放視頻和Flash，而第6版還支持MP4的回放。2005年發布了版本7，改進了MP4回放但是去掉了對Flash內容的支持。本書編寫期間最高版本的QuickTime是用于Mac OS的第10版，而不同特色的Microsoft Windows擁有較早的版本。

每個供應商都有自己的多媒體交付方法，當然都不完美。在Web文檔中嵌入音頻和視頻沒有標準化的方法，因此，為了標準化多媒體的嵌入，audio和video元素成為了HTML5規范的一部分。

2.1.2　媒體播放器的問題
所有媒體播放器都有一個共同的問題，那就是最終用戶都需要安裝合適的插件，才能播放所需的音頻或者視頻。最早，所有這些插件都啟動各自的媒體播放器播放音頻或者視頻。之后出現了在瀏覽器中顯示多媒體的功能，但是彈出式窗口（在瀏覽器之外啟動合適的播放器）仍然很常見。如果所需的插件在系統中不存在，你就必須下載這個插件，這很麻煩，因為你需要經常更新插件。此外，來自不同供應商的不同插件可能互相沖突，導致瀏覽器不穩定。例如，VLC Media Player與Windows Media Player在Firefox中沖突，有時候在查看WMV文件時會導致Firefox崩潰。

安全也是一個問題，因為插件過去曾經是（現在仍然是）惡意軟件的主要目標。例子之一是2011年3月所發現的，Flash Player 10.2中的一個嚴重漏洞會導致遠程攻擊者在受感染的機器上執行任意代碼或者導致拒絕服務攻擊。

這些漏洞當然很快就被檢測到，供應商很快就為之加上了補丁，推出新的版本。但是這同樣意味著用戶必須在新版本出現后不斷地升級。

最流行的插件——Flash有一個重大的問題，是蘋果公司于2010年4月決定在iPhone和iPad上不支持Flash。這當然會使Flash內容完全無法用于這些設備上。

現在讓我們看看這些媒體播放器如何通過它們的插件播放HTML中必需的音頻或者視頻。

2.1.3　HTML元素
過去，為了在你的Web文檔中嵌入插件以啟動媒體播放器，你可以使用各種HTML元素。盡管使用這些元素是過去就完成的方法，你仍然必須知道這些元素和它們的用法，因為令人遺憾的是，并不是所有瀏覽器都支持HTML5多媒體。你將在第3章和第4章中看到更多有關瀏覽器對HTML5多媒體支持缺失的內容。

實際上，可以使用3種不同的HTML元素：

• applet
• embed
• object
  applet元素正如其名稱所示，僅用于嵌入Java小應用程序（applet），實際上在HTML4.01中已被棄用。該元素允許在所在的Web文檔中的任何地方嵌入一個Java applet。你很有可能永遠不需要使用這個元素，因為它已經過時，我們繼續后面的內容。

Embed元素由Netscape 2.0瀏覽器引入，允許開發人員在Web文檔中嵌入任何數據對象。如果必要的插件沒有安裝在系統上，通常會顯示一個警告和空的方框。用于播放一個MIDI文件的嵌入代碼示例如：

<embed src="myMidiFile.mid"height="60"width="144">

這里瀏覽器被告知myMidiFile.mid在指定位置以特定的大小嵌入到瀏覽器中。

注意：

embed元素在HTML5中正式退出，最終成為HTML規范的一個有效部分。但是大部分瀏覽器在HTML5之前就已經支持這個元素，實際上它從來就不是一個有效的元素。
Object元素替換了HTML4.01中的applet和embed元素（它們實際上都不存在于任何規范中），它所含的媒體更加通用，因此，它可以用于嵌入Java小應用、音頻和視頻。Object元素相當強大，可以接受大量參數和數據對象類型，但是這也造成了顯示的困難。下面的例子說明了Object元素如何嵌入一個Adobe Flash視頻文件：

<object type="application/x-shockwave-flash"width="512"p height="300"wmode="transparent"data="flvplayer.swf?p file=myFlashVideo.flv&autoStart=true"><param name="movie"value="flvplayer.swf?file=p myFlashVideo.flv&autoStart=true" /><param name="wmode" value="transparent" /><param name="allowscriptaccess"value="always"/><param name="allowfullscreen"value="always"/> </object>

上述代碼通過type屬性中的MIME（多用途互聯網郵件擴展）類型向瀏覽器指明object元素中的內容是Flash。這段代碼還設置了對象容器的高度和寬度，并使用wmode屬性通知瀏覽器HTML頁面的背景在Flash內容的透明部分顯露出來。data屬性用于指向包含容器實際內容的一個有效URL。

param元素用于向嵌入式內容添加不同的參數。正如你所看到的，例子中的一個param元素設置的movie參數與object元素中設置的data屬性值相同。這導致了重復，但是令人難過的是，這是必要的應變手段。如果瀏覽器不知道如何播放MIME類型為application/ x-shockwave-flash的對象，它將檢查下一個子元素并且了解能否播放該元素（在這個例子中是movie的param設置）。

wmode參數也再次設置，以防瀏覽器不理解對象聲明的第一個設置。其他兩個參數是：allowscriptaccess——允許HTML頁面與需要交互的對象進行交互；allowfullscreen——允許對象在用戶請求時全屏播放。

你可能同意，上述的代碼初看有點令人費解。幸運的是，HTML5使多媒體對象的嵌入比原來容易得多，因為多媒體現在對瀏覽器來說是原生功能。

總結

以上是生活随笔為你收集整理的《HTML5多媒体应用开发》——第2章　HTML5多媒体元素2.1　Web多媒体历史的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。