推薦：使用CSS實現(xiàn)彈性視頻html5案例實踐
當(dāng)我編碼Elemin Theme（我最近設(shè)計的一個響應(yīng)式的站點）的時候，我遇到的一個跳幀就是，如何能讓嵌入式的視頻在尺寸變化上變得更加靈活;通過幾小時的尋找資料和實驗，我最終找到了解決辦法

　　HTML5將重塑Web世界？

　　2010年上半年的一個焦點事件，引起了很多人的關(guān)注，其中有不少人因這一事件第一次了解到HTML5的存在。初次了解HTML5的人可能會非常驚訝，HTML5規(guī)范早在6年前就開始制定了，如今盡管HTML5規(guī)范草案已經(jīng)非常好，但何時能真正成為標(biāo)準(zhǔn)卻仍然不確定。

　　的確，HTML5規(guī)范制定委員會工作進(jìn)展非常緩慢。因為關(guān)于如何改進(jìn)瀏覽器和改進(jìn)Web世界，不管是瀏覽器供應(yīng)商還是其他人都有太多的想法，而這些都要匯聚到HTML5規(guī)范中并達(dá)成一致，這需要時間。許多新的標(biāo)簽和JavaScript函數(shù)盡管已經(jīng)在一些瀏覽器上進(jìn)行了實驗，但互操作性和標(biāo)準(zhǔn)化問題還沒有解決。比如，Apple所做的HTML5演示雖然令人印象深刻，但它們也只在Safari上運(yùn)行良好。這就是為什么Flash的支持者嘲笑HTML5要把Web帶回到2000年瀏覽器大戰(zhàn)時代的原因。

　　雖然這種嘲笑可能讓HTML5的支持者很傷心，而且漫長的等待的確很難熬，但如果就此忽略HTML5卻是不對的。因為在HTML5的背后不僅有行業(yè)巨頭的推動，更為重要的是，標(biāo)準(zhǔn)化是IT技術(shù)發(fā)展的必然趨勢。就軟件而言，不論是瀏覽器還是相關(guān)的開發(fā)工具，都會不斷吸納周圍的各種技術(shù)，最后對其進(jìn)行標(biāo)準(zhǔn)化，這是技術(shù)發(fā)展的必然規(guī)律。

　　可以肯定的是，HTML5將改變互聯(lián)網(wǎng)的方方面面，顯然它不會完全取代Flash，但HTML5的確會重塑互聯(lián)網(wǎng)，使瀏覽器無需借助插件就可以做更多的工作，從位置跟蹤到把數(shù)據(jù)保存到云端。HTML5的標(biāo)簽將取代那些完成比較簡單任務(wù)的插件，至少在某些時候，它可以把一些高級的功能開發(fā)給更多的用戶。最終它可能使互聯(lián)網(wǎng)更安全、更高效、更靈活。

　　那么，即將成為新標(biāo)準(zhǔn)的HTML5到底會把我們帶向哪里？下面收集了開發(fā)者、程序員以及設(shè)計師的一些看法，從中可以了解到HTML5如何改變互聯(lián)網(wǎng)。

　　降低插件的重要性

　　從前，Web世界是非常歡迎瀏覽器插件的，因為它鼓勵創(chuàng)新的想法和大膽實驗，而聲音、動畫及其他一些非常生動的網(wǎng)頁，通過Sun、Adobe、RealAudio、微軟以及其他的一些公司開發(fā)的插件第一次在網(wǎng)絡(luò)呈現(xiàn)時也的確讓人耳目一新。然而，問題很快就出現(xiàn)了，插件的接口是向所有人開放的，每個人都在嘗試給舊的、以文本為基礎(chǔ)的世界增加新的功能，混亂不可避免。其中最有名的插件就是Flash，其他類似的插件更是數(shù)不勝數(shù)。

　　出于多種原因，Apple禁止Adobe的Flash在自己的平臺上運(yùn)行，這使得廣大Apple迷們不能在Apple平臺上看到Flash，而HTML5的流行將讓這種沖突不再出現(xiàn)，它將逐步淘汰那些相對封閉的開發(fā)體系：JavaFX的功能可能真的很強(qiáng)大，但既然JavaScript和Canvas對象就能做同樣的工作，為什么還要學(xué)習(xí)另一種語法？如果video標(biāo)簽?zāi)軐⒁?a href="http://www.ghpqjb.com/shipinjiaocheng/">視頻同步，誰需要Real的生態(tài)系統(tǒng)？

　　那么，插件真的會全部消失嗎？也許吧，但這要取決于你想做的事情。如果你的目標(biāo)只是繪制圖像，那么Canvas對象可能就夠用了。但如果你想建立一個專業(yè)的3D世界，正如在復(fù)雜的Flash和Shockwave游戲中所看到的那樣，你可能還得依賴專有的插件技術(shù)，因為這些插件技術(shù)可以直接訪問視頻硬件，運(yùn)行3D游戲。

　　支持動態(tài)生成圖像

　　過去，網(wǎng)頁中顯示的圖像來自于直接下載的GIF或JPG圖像，而在HTML5中，圖像可能并不是直接來自圖像文件，而是由某個Canvas（畫布）對象臨時生成的。網(wǎng)絡(luò)上已經(jīng)出現(xiàn)了大量的非常好的圖形庫，這些圖形庫的存在使得動態(tài)生成圖像更加容易。

　　如今，JavaScript層可以根據(jù)數(shù)據(jù)進(jìn)行計算然后繪制出圖形。如果軟件開發(fā)商有足夠的時間和人才的話，完全可以讓網(wǎng)絡(luò)上的一切變得更加生動，而純文本內(nèi)容越來越少。Flash只是一個開端，HTML5環(huán)境讓W(xué)eb開發(fā)人員更易于開發(fā)出復(fù)雜的圖像。市場已經(jīng)出現(xiàn)了一些類似的工具，它們將進(jìn)一步提高Web開發(fā)人員駕馭圖像的能力，而且隨著工具的成熟，開發(fā)人員也將開發(fā)出更多更為專業(yè)的復(fù)雜圖形。

　　這里可能存在的一個問題是，這種圖像的處理可能會給客戶端處理器帶來很大負(fù)擔(dān)，比如對客戶端的處理器處理能力有一定要求。在過去，一些開發(fā)人員根本不敢用Flash插件，因為渲染和展現(xiàn)Flash內(nèi)容可能會給處理器帶來很大壓力，極大地影響用戶的最終體驗。未來這不應(yīng)該成為問題，開發(fā)者不應(yīng)該因擔(dān)心影響性能就不讓用戶體驗生動的圖像，只是開發(fā)者應(yīng)該做出一個折中的選擇。每一個抱怨Flash影響性能的人都應(yīng)該知道，這與技術(shù)本身沒有關(guān)系，問題來自設(shè)計師們?yōu)榱宋�引我們的注意力，他們過多地使用了這項技術(shù)。

　　允許Web程序利用本地存儲

　　Web程序員其實早就可以利用瀏覽器端的本地存儲空間存儲很多信息，比如IE允許最多300個Cookie，最多存儲4096個字節(jié)的內(nèi)容。不過，要開發(fā)真正實用的Web程序，可能需要比這更多的存儲空間。比如，以前的Dojo工具包使用Flash插件來分配用戶硬盤上的部分空間，把它留給瀏覽器使用，而現(xiàn)在很簡單了，使用HTML5就可以達(dá)到同樣的目的。

　　對于這部分存儲，程序員可以按照自己的需要任意使用，比如把云服務(wù)的應(yīng)用和數(shù)據(jù)保存在本地硬盤上。這也使得云應(yīng)用的交付、安裝和部署都非常像傳統(tǒng)的應(yīng)用程序。比如，無論是否有互聯(lián)網(wǎng)連接，云應(yīng)用程序都可以照常運(yùn)行，因為之前已經(jīng)從服務(wù)器上下載了HTML5應(yīng)用的JavaScript代碼，這部分代碼就保存在本地。

　　當(dāng)然，這種技術(shù)的應(yīng)用并不會影響云應(yīng)用的普及，因為現(xiàn)在的運(yùn)行模式與過去有很大不同，本地數(shù)據(jù)庫實際上扮演的是智能緩存的作用。另外，游戲開發(fā)人員可以在本地存儲一些情景信息和裝備信息，這樣可避免每次一連機(jī)就要下載這些信息，省了下載資料的時間。而不利的方面就是這些數(shù)據(jù)庫深埋在系統(tǒng)文件夾之中，這樣，進(jìn)行數(shù)據(jù)備份時就變得非常復(fù)雜。用戶如果想把數(shù)據(jù)從一臺機(jī)器遷移到另一臺機(jī)器，數(shù)據(jù)遷移工作可能就會變得更為復(fù)雜。

　　或許混合云的出現(xiàn)可能解決這一問題，混和云允許云端和本地都保存有數(shù)據(jù)，而本地計算機(jī)只是緩存數(shù)據(jù)，最終版本保存在云中，這樣從任意一臺計算機(jī)上就可以訪問到。

　　簡化Web開發(fā)中的數(shù)據(jù)提取

　　曾從網(wǎng)頁中提取過數(shù)據(jù)的Web開發(fā)人員都知道，現(xiàn)有的HTML結(jié)構(gòu)除了告訴瀏覽器這些信息在哪里之外，幾乎不能再提供任何有意義的信息。而開發(fā)人員需要了解與數(shù)據(jù)本身有關(guān)的信息，這些信息能幫助程序員了解這些數(shù)據(jù)的真正含義。 HTML5中所謂的微格式（Microformat）引入了一種新的機(jī)制，它在HTML中新增了一些專門的標(biāo)簽，可以幫助程序員分析標(biāo)簽之中的數(shù)據(jù)的真實含義。

　　沒有人能夠預(yù)測微格式到底將帶給網(wǎng)絡(luò)多少改變，但很容易看出，這種新的機(jī)制將給程序員帶來很大方便，幫助程序員開發(fā)出更有效率的Web應(yīng)用。比如，如果有一個好的、標(biāo)準(zhǔn)的方式來表示日期和時間，那么程序員在為網(wǎng)站開發(fā)與時間有關(guān)的Web程序時，就無需另外編寫專門的代碼來分析或者猜測別人可能用的什么時間格式。這樣，日歷、時間表、日程安排等需要從多個數(shù)據(jù)源收集時間信息的應(yīng)用也就變成非常簡單的工作了。

　　支持位置服務(wù)

　　在Web世界里，過去我們只知道其IP地址，那些數(shù)字對應(yīng)著一個什么樣的真實世界我們根本不知道。比如，某臺電腦究竟在哪里，過去幾乎不可能知道，而現(xiàn)在出現(xiàn)的位置服務(wù)可以解決這個問題。HTML5標(biāo)準(zhǔn)中允許JavaScript詢問瀏覽器用戶的地理位置，比如緯度和經(jīng)度信息。通常桌面系統(tǒng)不支持這一功能（因為需要有GPS或Wi-Fi），但如果終端是手持智能手機(jī)，這個功能就可以發(fā)揮作用。

　　今天，沒有人能知道聰明的程序員會基于這些位置信息創(chuàng)建出什么應(yīng)用來，但有一點可以肯定，未來一定可能以一種變幻莫測和難以置信的方式將把虛擬世界與現(xiàn)實世界整合到一起。

　　讓W(xué)eb視頻播放更流暢

　　HTML5中的video標(biāo)簽使Web開發(fā)人員很容易地把視頻內(nèi)容與網(wǎng)頁中的其他內(nèi)容整合起來，也讓那些從事jQuery和PHP開發(fā)的人員可以加入到Web開發(fā)隊伍中，使得Web開發(fā)不再僅僅是Flash、Silverlight和JavaFX開發(fā)人員的專利。

　　盡管這一設(shè)想看起來很誘人，但面臨的困難依然不少，因為HTML5標(biāo)準(zhǔn)中沒有指定任何編解碼器，而每個人都想發(fā)布自己的視頻和聲音編解碼器。這就意味著我們用一種混亂取代另一個混亂：只是過去我們把嵌入到瀏覽器中的軟件稱為插件，而今天把它稱為編解碼器而已。因此，今天我們雖然有了一個標(biāo)準(zhǔn)的video標(biāo)簽，但瀏覽器可能知道也可能不知道到底如何解釋這些視頻內(nèi)容。

　　在洛杉磯任教的HTML5應(yīng)用開發(fā)講師Erich Ocean認(rèn)為編解碼器的戰(zhàn)爭仍在繼續(xù)。計算機(jī)開發(fā)人員和Mozilla組織如果認(rèn)為他們能為視頻專業(yè)人士制定視頻標(biāo)準(zhǔn)，那就大錯特錯了。他說，我們看到谷歌的新視頻格式在一些地方得到了使用，比如在YouTube網(wǎng)站，但永遠(yuǎn)不會像H.264那樣普及。

　　盡管視頻播放可能面臨比較混亂的局面，因為無法讓大家達(dá)成一致，但是新的video標(biāo)簽肯定會讓互聯(lián)網(wǎng)視頻內(nèi)容越來越豐富，網(wǎng)頁將成為視頻內(nèi)容的主要發(fā)布源地，而同時單純的文字內(nèi)容也會越來越少。只是這對孩子的教育未必是好事，因為現(xiàn)在的孩子們變得越來越習(xí)慣于看動畫，而很少花時間來閱讀，更別提書寫了。

　　Widget將更豐富

　　在iframe中運(yùn)行的Widget讓網(wǎng)頁可以把其他網(wǎng)站的內(nèi)容（比如天氣預(yù)報）嵌入進(jìn)來，非常實用也非常受歡迎，但由于安全方面的原因，這些Widget一直運(yùn)行在一個相對獨(dú)立的環(huán)境中，與網(wǎng)頁中的其他內(nèi)容基本保持隔離狀態(tài)。

　　而HTML5為這些Widget提供了一個相互通信的標(biāo)準(zhǔn)機(jī)制。盡管它們?nèi)匀徊荒軌蛳嗷ミM(jìn)入對方的運(yùn)行環(huán)境中，但它們已經(jīng)可以相互發(fā)送信息來協(xié)同工作了。

　　廣告商對此早就期盼已久，它們非常希望能把分散到同一個網(wǎng)頁各個位置的旗幟廣告整合起來，而從開發(fā)的角度來說，開發(fā)人員也一定會找到其他實際用途。例如，在Web頁面上播放的網(wǎng)球比賽畫面可以和左右兩邊的球員信息同步起來，這在HTML 1.0時代是難以想象的。

　　不過，可以發(fā)送信息、相互通信機(jī)制只是一個開始，下一個亟待解決的是通信協(xié)議的問題，因為至今還沒有這方面的一個標(biāo)準(zhǔn)。只有為傳遞信息設(shè)立一個標(biāo)準(zhǔn)后，兩個不同開發(fā)團(tuán)隊開發(fā)出來的Widget之間才有可能相互通信。換句話說，通信雙方需要更多的標(biāo)準(zhǔn)詞匯。

　　提高瀏覽器的安全性

　　每個瀏覽器插件都是一個單獨(dú)的應(yīng)用程序，不同的瀏覽器插件是由不同的程序員按照不同的標(biāo)準(zhǔn)開發(fā)的，發(fā)布時間不同，安全模式也不同。很自然地，有些插件會比其他的更安全。隨著瀏覽器中的插件越來越多，要跟蹤每個瀏覽器插件中可能存在的安全漏洞越來越復(fù)雜。比如，你企業(yè)中去年年末某個時候的安全漏洞到底是出在插件還是瀏覽器，最后是通過升級瀏覽器而不是升級插件來解決的還是反過來，可能很難有人記得那么清楚。

　　把很多功能內(nèi)置到HTML5而不是使用插件可以大大降低安全風(fēng)險，避免與插件開發(fā)有關(guān)的多個環(huán)節(jié)出現(xiàn)問題，更可以防止有人故意利用插件中的API安裝惡意代碼。因為相對而言，F(xiàn)irefox、Chrome或IE瀏覽器等的安全性通常會經(jīng)過更多的人（包括安全小組）的審計，如果安全小組認(rèn)為某個瀏覽器安全，一般來說，其安全風(fēng)險肯定要少得多。

　　不過，這里所說的安全性有所改善帶有一定程度的主要臆測。這個世界總會有一些人把它們的聰明才智用到邪道上，他們完全可能利用HTML5的某種特性來從事一些惡意行為。只是現(xiàn)在沒有人能夠預(yù)測HTML5的新功能中到底可能隱藏著哪些危險。

　　簡化Web開發(fā)

　　在一家Web軟件開發(fā)公司工作的開發(fā)人員的話很有代表性，它簡明扼要地闡述了HTML5可能帶來的變化。他說：我更喜歡HTML5，主要是因為它使我能夠在一個統(tǒng)一的開發(fā)環(huán)境下進(jìn)行開發(fā)，這個環(huán)境就是瀏覽器加JavaScript再加上DOM，而不必在Flash世界和HTML5的世界之間來回切換。未來只要掌握一門開發(fā)語言和一個工具集，就可以開發(fā)任何插件。

　　他補(bǔ)充說，我認(rèn)為，對于用戶而言好處也是很明顯的，而現(xiàn)在Flash仿佛在互聯(lián)網(wǎng)世界里另外創(chuàng)立了一片天地。

　　的確，HTML5采用了統(tǒng)一的語言（JavaScript）、統(tǒng)一的數(shù)據(jù)模型（XML和DOM）和統(tǒng)一的表現(xiàn)規(guī)則（CSS）來表現(xiàn)文本、音頻、視頻和圖形，對于開發(fā)者而言無疑的是非常理想的，基于一個統(tǒng)一的標(biāo)準(zhǔn)開發(fā)環(huán)境，工作肯定會簡單不少。但要讓一切都成為現(xiàn)實挑戰(zhàn)仍然是巨大的，一個突出問題是工具的缺乏，現(xiàn)在HTML5的相關(guān)工具方面還很少。不可否認(rèn)，F(xiàn)lash的流行與Adobe為Flash的開發(fā)提供了非常好用的工具密不可分。

　　鏈接：HTML的演進(jìn)歷程

　　HTML全稱是超文本標(biāo)示語言(Hypertext Markup Language)，是用來描述網(wǎng)頁的一種規(guī)范。正是這些容納在尖括號里的簡單標(biāo)簽，構(gòu)成了如今的 Web。

　　HTML的第一個官方版本是由IETF (互聯(lián)網(wǎng)工程任務(wù)組) 推出的 HTML 2.0。后來，W3C 取代 IETF 的角色，成為HTML標(biāo)準(zhǔn)制訂的組織，上個世紀(jì)90年代的后半葉，HTML 的版本被頻繁修改，直到1999年的HTML 4.01，至此，HTML到達(dá)了它的第一個巔峰。

　　HTML在HTML 4.01 之后的第一個修訂版本就是 XHTML 1.0，其中X代表 eXtensible。 XHTML 1.0 是基于HTML 4.01 的，并沒有引入任何新標(biāo)簽或?qū)傩�，唯一的區(qū)別是語法，HTML對語法比較隨便，而XHTML則要求XML般的嚴(yán)格語法。后來，W3C又推出了XHTML 1.1。

　　對 W3C 而言，到了 HTML 4已經(jīng)是功德圓滿，他們的下一步工作是XHTML 2.0，希望將Web帶向XML的光明未來。然而，來自O(shè)pera、Apple以及 Mozilla 的代表不滿意W3C的工作，他們自發(fā)組織成立了超文本應(yīng)用技術(shù)工作組，這就是WHATWG，他們致力于HTML5 規(guī)范。

　　在WHATWG致力于HTML5的同時，W3C繼續(xù)他們的XHTML 2.0。不過，W3C在XHTML 2.0方面的工作慢慢地陷入困境，后來終止了XHTML 2.0的工作，并于2007年組建了一個新的HTML工作組，他們非常明智地選擇了 WHATWG 的成果作為基礎(chǔ)，致力于制訂HTML5規(guī)范。

　　經(jīng)過多年的醞釀，HTML5的草案于2008年發(fā)布，目前W3C正在對它進(jìn)行進(jìn)一步完善�，F(xiàn)在，關(guān)于HTML5何時會正式成為標(biāo)準(zhǔn)還沒有一個明確的說法。好消息是，2012年HTML5可能會被接納為候選標(biāo)準(zhǔn)。不過，可以預(yù)料的是，HTML5無論何時能成為標(biāo)準(zhǔn)，HTML5要被所有瀏覽器提供商所接納肯定是一個比較長期的過程。

分享：突破canvas語法限制 讓他支持鏈?zhǔn)秸Z法
突破canvas語法限制,有很多的朋友可能還不相信，本文將詳細(xì)介紹如何讓canvas支持鏈?zhǔn)秸Z法，需要了解的朋有可以參考下