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