《HTML5多媒体应用开发》——第2章 HTML5多媒体元素2.1 Web多媒体历史
本節(jié)書摘來自異步社區(qū)《HTML5多媒體應(yīng)用開發(fā)》一書中的第2章，第2.1節(jié),作者： 【愛】Ian Devlin 更多章節(jié)內(nèi)容可以訪問云棲社區(qū)“異步社區(qū)”公眾號查看。
第2章 HTML5多媒體元素
現(xiàn)在你已經(jīng)掌握了HTML5的簡史及其結(jié)構(gòu)化元素，下面可以開始學(xué)習(xí)有關(guān)HTML5多媒體、多媒體元素和屬性的知識，以及它們所帶來的組合功能了。
HTML4.01沒有定義為網(wǎng)站帶來音頻和視頻的方法，這導(dǎo)致了交付多媒體內(nèi)容的第三方插件（如Flash）的盛行。但是HTML5提供了這種必要的結(jié)構(gòu)，通過Web瀏覽器在互聯(lián)網(wǎng)上傳遞音頻和視頻。
本章提供瀏覽器中多媒體的歷史，以及通過各個供應(yīng)商發(fā)行的許多應(yīng)用程序、播放器和插件回訪音頻和視頻的實現(xiàn)方法。然后，你將學(xué)習(xí)一些HTML5新元素，它們能讓你利用瀏覽器原生多媒體。
2.1 Web多媒體歷史
20世紀(jì)90年代初瀏覽器和Web的概念剛剛出現(xiàn)的時候，沒有任何多媒體。很快，圖像開始加入，但是充其量是窮人的多媒體。雖然隨著GIF動畫的出現(xiàn)，這些圖像可以成為動畫，但是這些動畫完全是非交互性的。即使在音頻和視頻文件出現(xiàn)時，互聯(lián)網(wǎng)技術(shù)在Web上傳遞這些文件的能力也很有限。互聯(lián)網(wǎng)連接很慢，而音頻和視頻文件很大，沒有人希望等待大文件的下載。文件下載之后，也必須使用獨立于Web瀏覽器的外部播放器來查看內(nèi)容，這在當(dāng)時很正常，很少有人為此抱怨。
互聯(lián)網(wǎng)連接速度的飛速提高帶來了更快地在Web上發(fā)送多媒體的能力，Web瀏覽器技術(shù)也同樣快速進(jìn)步，自然地推出了現(xiàn)在稱之為原生多媒體的技術(shù)。
在你深入研究原生多媒體之前，我們先簡略地來看一看曾經(jīng)被用來回放音頻和視頻文件（現(xiàn)在仍然作為桌面播放器）的外部播放器。
2.1.1 媒體播放器
媒體播放器是用于描述具有回放多媒體文件（如音頻和視頻）能力的一種軟件的標(biāo)準(zhǔn)術(shù)語，這種軟件通常有圖形用戶界面。
20世紀(jì)90年代中期，MIDI（樂器數(shù)碼接口）文件格式被用來在Web文檔上播放背景音樂，這種音樂通常自動播放。盡管MIDI音樂很令人討厭，但是畢竟是多媒體在瀏覽器上的開端。接著不同的供應(yīng)商開發(fā)出了許多其他播放器，遍布于你的電腦上。
RealNetworks于1995年發(fā)布了其音頻播放器——RealAudio，第一次推出了使用專利的.ra和.ram音頻文件通過Web播放音頻的概念。RealAudio的進(jìn)一步發(fā)展導(dǎo)致了1997年RealVideo的發(fā)布，它能使用基于H.263視頻格式的視頻流。這兩種播放器最后合并為RealPlayer，并被包含在Windows 98中作為可選工具。RealPlayer在今天仍然存在（最新的穩(wěn)定版本為第14版）于許多平臺之上，它能夠播放多種音頻和視頻文件格式。
1995年Macromedia發(fā)布了第一個Shockwave版本，它起初是為Netscape瀏覽器開放的。當(dāng)時，該公司流行的Director多媒體軟件使用戶能夠創(chuàng)建交互式的應(yīng)用程序和動畫，并將其插入到Web文檔中。Macromedia還在開發(fā)另一個媒體播放器，2002年它發(fā)布了Shockwave Flash player，這個播放器支持視頻和音頻。Shockwave Flash player使用FutureWave軟件公司開發(fā)的SWF文件格式。SWF文件格式的主要目的是創(chuàng)建用于顯示動畫以及交換音頻、視頻和數(shù)據(jù)的更小文件。Adobe于2005年收購了Macromedia，Shockwave Flash player改名為Adobe Flash，這個特別的播放器成為通過瀏覽器傳遞多媒體時使用的播放器。
1996年Microsoft改進(jìn)了過去的產(chǎn)品并且發(fā)表了DirectShow，之后成為Media Player 6.1，并作為Windows98的一部分發(fā)布（如圖2.1所示）。
隨著Windows 2000的發(fā)布，Microsoft發(fā)布了Windows Media Player7.1版本。這個版本具有大大改進(jìn)的圖形界面，在總體上提供了更好的體驗。這個版本還自帶了Codec（編碼解碼器），用于創(chuàng)建和回放媒體內(nèi)容的特殊文件協(xié)議。
注意：
第3章和第4章中你將分別看到有關(guān)HTML5音頻和視頻Codec的更多內(nèi)容。
在后續(xù)的版本中，Microsoft改進(jìn)了Media Player，持續(xù)不斷地改善這一產(chǎn)品。
Microsoft還致力于一個與Adobe Flash競爭的應(yīng)用程序框架，可以運行瀏覽器插件（為其他更大的軟件應(yīng)用如瀏覽器添加特定功能的一組小型軟件組件）以及其他豐富的互聯(lián)網(wǎng)應(yīng)用程序。Microsoft Silverlight最早發(fā)行于2007年，支持許多不同的音頻和視頻格式，以及動畫和交互。一開始，它的采用率很低，但是到2011年6月，它已經(jīng)滲透到大約73%的市場，而Adobe Flash保持著97%的市場份額。
蘋果公司也從早期就加入了多媒體播放器的競爭。它的第一個QuickTime版本發(fā)行于1991年，用于其System Software 6操作系統(tǒng)。QuickTime在1999年發(fā)布4.0版本之前僅用于Mac電腦，此后也能運行于Windows并支持MP3音頻播放。QuickTime 5和6能夠播放視頻和Flash，而第6版還支持MP4的回放。2005年發(fā)布了版本7，改進(jìn)了MP4回放但是去掉了對Flash內(nèi)容的支持。本書編寫期間最高版本的QuickTime是用于Mac OS的第10版，而不同特色的Microsoft Windows擁有較早的版本。
每個供應(yīng)商都有自己的多媒體交付方法，當(dāng)然都不完美。在Web文檔中嵌入音頻和視頻沒有標(biāo)準(zhǔn)化的方法，因此，為了標(biāo)準(zhǔn)化多媒體的嵌入，audio和video元素成為了HTML5規(guī)范的一部分。
2.1.2 媒體播放器的問題
所有媒體播放器都有一個共同的問題，那就是最終用戶都需要安裝合適的插件，才能播放所需的音頻或者視頻。最早，所有這些插件都啟動各自的媒體播放器播放音頻或者視頻。之后出現(xiàn)了在瀏覽器中顯示多媒體的功能，但是彈出式窗口（在瀏覽器之外啟動合適的播放器）仍然很常見。如果所需的插件在系統(tǒng)中不存在，你就必須下載這個插件，這很麻煩，因為你需要經(jīng)常更新插件。此外，來自不同供應(yīng)商的不同插件可能互相沖突，導(dǎo)致瀏覽器不穩(wěn)定。例如，VLC Media Player與Windows Media Player在Firefox中沖突，有時候在查看WMV文件時會導(dǎo)致Firefox崩潰。
安全也是一個問題，因為插件過去曾經(jīng)是（現(xiàn)在仍然是）惡意軟件的主要目標(biāo)。例子之一是2011年3月所發(fā)現(xiàn)的，Flash Player 10.2中的一個嚴(yán)重漏洞會導(dǎo)致遠(yuǎn)程攻擊者在受感染的機(jī)器上執(zhí)行任意代碼或者導(dǎo)致拒絕服務(wù)攻擊。
這些漏洞當(dāng)然很快就被檢測到，供應(yīng)商很快就為之加上了補(bǔ)丁，推出新的版本。但是這同樣意味著用戶必須在新版本出現(xiàn)后不斷地升級。
最流行的插件——Flash有一個重大的問題，是蘋果公司于2010年4月決定在iPhone和iPad上不支持Flash。這當(dāng)然會使Flash內(nèi)容完全無法用于這些設(shè)備上。
現(xiàn)在讓我們看看這些媒體播放器如何通過它們的插件播放HTML中必需的音頻或者視頻。
2.1.3 HTML元素
過去，為了在你的Web文檔中嵌入插件以啟動媒體播放器，你可以使用各種HTML元素。盡管使用這些元素是過去就完成的方法，你仍然必須知道這些元素和它們的用法，因為令人遺憾的是，并不是所有瀏覽器都支持HTML5多媒體。你將在第3章和第4章中看到更多有關(guān)瀏覽器對HTML5多媒體支持缺失的內(nèi)容。
實際上，可以使用3種不同的HTML元素：
- applet
- embed
- object
applet元素正如其名稱所示，僅用于嵌入Java小應(yīng)用程序（applet），實際上在HTML4.01中已被棄用。該元素允許在所在的Web文檔中的任何地方嵌入一個Java applet。你很有可能永遠(yuǎn)不需要使用這個元素，因為它已經(jīng)過時，我們繼續(xù)后面的內(nèi)容。
Embed元素由Netscape 2.0瀏覽器引入，允許開發(fā)人員在Web文檔中嵌入任何數(shù)據(jù)對象。如果必要的插件沒有安裝在系統(tǒng)上，通常會顯示一個警告和空的方框。用于播放一個MIDI文件的嵌入代碼示例如：
<embed src="myMidiFile.mid"height="60"width="144">這里瀏覽器被告知myMidiFile.mid在指定位置以特定的大小嵌入到瀏覽器中。
注意：
embed元素在HTML5中正式退出，最終成為HTML規(guī)范的一個有效部分。但是大部分瀏覽器在HTML5之前就已經(jīng)支持這個元素，實際上它從來就不是一個有效的元素。
Object元素替換了HTML4.01中的applet和embed元素（它們實際上都不存在于任何規(guī)范中），它所含的媒體更加通用，因此，它可以用于嵌入Java小應(yīng)用、音頻和視頻。Object元素相當(dāng)強(qiáng)大，可以接受大量參數(shù)和數(shù)據(jù)對象類型，但是這也造成了顯示的困難。下面的例子說明了Object元素如何嵌入一個Adobe Flash視頻文件：
上述代碼通過type屬性中的MIME（多用途互聯(lián)網(wǎng)郵件擴(kuò)展）類型向瀏覽器指明object元素中的內(nèi)容是Flash。這段代碼還設(shè)置了對象容器的高度和寬度，并使用wmode屬性通知瀏覽器HTML頁面的背景在Flash內(nèi)容的透明部分顯露出來。data屬性用于指向包含容器實際內(nèi)容的一個有效URL。
param元素用于向嵌入式內(nèi)容添加不同的參數(shù)。正如你所看到的，例子中的一個param元素設(shè)置的movie參數(shù)與object元素中設(shè)置的data屬性值相同。這導(dǎo)致了重復(fù)，但是令人難過的是，這是必要的應(yīng)變手段。如果瀏覽器不知道如何播放MIME類型為application/ x-shockwave-flash的對象，它將檢查下一個子元素并且了解能否播放該元素（在這個例子中是movie的param設(shè)置）。
wmode參數(shù)也再次設(shè)置，以防瀏覽器不理解對象聲明的第一個設(shè)置。其他兩個參數(shù)是：allowscriptaccess——允許HTML頁面與需要交互的對象進(jìn)行交互；allowfullscreen——允許對象在用戶請求時全屏播放。
你可能同意，上述的代碼初看有點令人費解。幸運的是，HTML5使多媒體對象的嵌入比原來容易得多，因為多媒體現(xiàn)在對瀏覽器來說是原生功能。
總結(jié)
以上是生活随笔為你收集整理的《HTML5多媒体应用开发》——第2章 HTML5多媒体元素2.1 Web多媒体历史的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 《Cocos2d 跨平台游戏开发指南（第
- 下一篇： 《Exchange Server 201