隨著HTML5的引入，開發(fā)人員又獲得了一個(gè)發(fā)布視頻的新工具。除了占據(jù)統(tǒng)治地位的FlashPlayer——在聯(lián)網(wǎng)計(jì)算機(jī)中有99%都安裝了FlashPlayer——之外，HTML5也成為了視頻領(lǐng)域的主要播放器。

然而，HTML5標(biāo)準(zhǔn)并沒(méi)有嚴(yán)格規(guī)范視頻發(fā)布的所有方面，因此視頻格式之爭(zhēng)就不可避免，這使得開發(fā)人員和內(nèi)容發(fā)布者們備受其苦。這一篇文章及其后續(xù)一系列文章將會(huì)討論這方面的問(wèn)題，探討在這多變的環(huán)境下如何選擇方向。這第一篇將會(huì)討論如何將HTML5和FlashPlayer聯(lián)合起來(lái)使用，使得視頻在發(fā)布時(shí)能在最大范圍內(nèi)發(fā)布，以及為了達(dá)到這個(gè)目標(biāo)，需要如何創(chuàng)建videoassets。

接下來(lái)的后續(xù)文章將會(huì)講解如何選擇編碼軟件，如何使用Javascript來(lái)獲取眾多瀏覽器配置，并作出相應(yīng)調(diào)整，并看看當(dāng)前最流行的Javascriptvideoplayer哪個(gè)能真正幫助你解決問(wèn)題。

什么是HTML5？

首先要強(qiáng)調(diào)的是HTML5還不是一個(gè)標(biāo)準(zhǔn)。它還在不斷變化，這將給HTML5嘗鮮者帶來(lái)很大影響。HTML5標(biāo)準(zhǔn)草案制定始于2004年，制定者是一個(gè)名為WebHypertextApplicationTechnologyWorkingGroup(WHATWG)的組織，這個(gè)組織是一個(gè)行業(yè)聯(lián)合會(huì)，其中包括了Apple、MozillaFoundation以及OperaSoftware。后來(lái)，在2007年，WideWebConsortium(W3C)將其作為一個(gè)工作草案加以采用。這個(gè)標(biāo)準(zhǔn)的LastCall（對(duì)HTML5標(biāo)準(zhǔn)的最后形式尋求同行以及公眾的意見(jiàn)）是在2011年5月，盡管沒(méi)有人期望它能帶來(lái)一些突出的新特性，但它甚至連功能完善也算不上。專家估計(jì)W3C要到2014~2022年間才能批準(zhǔn)該標(biāo)準(zhǔn)，具體是哪一年還沒(méi)有定論（完全取決你聽的是誰(shuí)的預(yù)測(cè)和這個(gè)預(yù)測(cè)是什么時(shí)候做出的）。

一個(gè)有趣的事實(shí)是：盡管W3C現(xiàn)在使用HTML5作為這個(gè)標(biāo)準(zhǔn)的名字，WHATWG——這一HTML改革背后的主要推動(dòng)力量——卻希望在未來(lái)的工作中不使用編號(hào)命名。它希望堅(jiān)持使用“HTML”，讓它成為一個(gè)“活的標(biāo)準(zhǔn)”。

這一切意味著什么呢？在這一點(diǎn)上，這僅僅意味著HTML5早期嘗鮮者需要準(zhǔn)備好迎接改變，因?yàn)檫@個(gè)標(biāo)準(zhǔn)還在改變，這最后的改變可能還要經(jīng)歷好幾年。很多HTML5特性現(xiàn)在已經(jīng)可用了，很多專家都認(rèn)為HTML5標(biāo)準(zhǔn)不會(huì)出現(xiàn)革命性的變化了。

問(wèn)題在于，我們談?wù)摰亩际羌磳⒊蔀闃?biāo)準(zhǔn)的HTML5，實(shí)現(xiàn)這一標(biāo)準(zhǔn)是另外一回事。不同瀏覽器，以及同一瀏覽器的不同版本，對(duì)HTML5特性的支持程度都不盡相同。這使得開發(fā)人員面臨的問(wèn)題更為復(fù)雜。下面是支持基本HTML5視頻特性的瀏覽器以及移動(dòng)操作系統(tǒng)：

什么是HTML5視頻？

從根本上講，HTML5視頻是一系列markuptags以及Javascript文檔對(duì)象模型的拓展。HTML5視頻一個(gè)最簡(jiǎn)單的實(shí)現(xiàn)如下所示：

<video src=”vid.mp4″ width=”320″ height=”240″ controls></video> 

在我們能更好使用這個(gè)markup之前，我們需要意識(shí)到，這段代碼所呈現(xiàn)的僅僅是冰山一角。比這個(gè)markup更重要（同時(shí)也更復(fù)雜）的是其中引用的視頻內(nèi)容的格式。盡管“格式”這個(gè)詞用途十分寬泛，但它最核心的含義還是視頻和音頻數(shù)據(jù)的壓縮和解壓縮算法，以及相應(yīng)的可以解析并使用這些數(shù)據(jù)的container。簡(jiǎn)單來(lái)說(shuō)，container就是一個(gè)對(duì)視頻、音頻以及相關(guān)內(nèi)容的打包器，規(guī)定了用什么樣的規(guī)則來(lái)存放媒體數(shù)據(jù)。

HTML5開發(fā)者面臨的一個(gè)最大挑戰(zhàn)就是現(xiàn)在的HTML5標(biāo)準(zhǔn)草案并沒(méi)有推薦瀏覽器應(yīng)該支持的視頻格式。因此，各個(gè)瀏覽器背后的團(tuán)隊(duì)需要自己去決定什么視頻格式是最適合的。這就導(dǎo)致了不同瀏覽器對(duì)于視頻特性的不同實(shí)現(xiàn)，這成了內(nèi)容發(fā)布者必須跨越的困難。實(shí)際上，為了在使用率最高的幾個(gè)瀏覽器上均能發(fā)布HTML5視頻，開發(fā)者要么為每個(gè)視頻創(chuàng)建三個(gè)文件，要么依靠服務(wù)器解決方案，在播放時(shí)進(jìn)行編碼轉(zhuǎn)換（將視頻從一個(gè)格式轉(zhuǎn)化到另外一個(gè)格式）。

HTML5技術(shù)：多媒體(視頻及音頻)

容器（Containers）

在這篇文章中，我們將會(huì)把討論范圍限定在與HTML5以及Flash兼容的容器中，并主要討論這些容器的video以及audio部分。當(dāng)然，這些容器還可以支持一些附加的特性，如字幕、分章信息（chapterinformation）、元數(shù)據(jù)，以及這些數(shù)據(jù)類型的同步方式。在某些情況下，容器還支持其他一些可選項(xiàng)，如數(shù)字權(quán)限管理（DRM），基本的3D渲染選項(xiàng)，以及硬件渲染支持。

HTML5或Flash支持的基本有四個(gè)容器。不同視頻格式的優(yōu)缺點(diǎn)在很大程度上與這些容器包含的視頻或者音頻特性相關(guān)（我一會(huì)兒會(huì)談到這些），但是一些與具體容器相關(guān)的特性在這里也值得一提。

HTML5以及Flash的videocontainers

MPEG-4

MPEG-4(更精確地說(shuō)是MPEG-4,Part14)是由MovingPictureExpertsGroup控制的專有容器。.mp4文件拓展名已經(jīng)為大家所熟知（有時(shí)候也用.m4v），MPEG-4無(wú)可爭(zhēng)議成了知名度最高的容器。它植根于Apple的QuickTime容器（通常使用.mov擴(kuò)展名），是桌面端以及移動(dòng)設(shè)備播放視頻的最常見(jiàn)的選擇。它是iTunesMac/Windows/iPhone/iPad/iTouch生態(tài)系統(tǒng)使用的容器。然而，由于專利及授權(quán)問(wèn)題，這樣的狀況正在逐漸改變，而HTML5正在加速這個(gè)改變。作為一個(gè)容器，MPEG-4以支持?jǐn)?shù)字權(quán)限管理而出名——數(shù)字權(quán)限管理對(duì)于一些內(nèi)容發(fā)布者來(lái)說(shuō)是必需的特性，另外，因?yàn)橛布铀伲ɑ谛酒模谶\(yùn)行時(shí)進(jìn)行編碼或解碼）大都支持該格式，這使得它更受歡迎。除了和HTML5規(guī)范相容，F(xiàn)lashPlayer也支持MPEG-4容器。

Ogg

Ogg是一個(gè)免費(fèi)的開放的容器格式，它是由Xiph.OrgFoundation維護(hù)的。盡管Xiph.OrgFoundation推薦使用.ogv文件擴(kuò)展名，但.ogg更為常見(jiàn)。Ogg最初是在LinuxOS中使用的，同時(shí)也被Mac以及Windows操作系統(tǒng)中的QuickTime組件所支持。WindowOS還可以使用WindowsMediaPlayer擴(kuò)展組件或者DirectShow過(guò)濾器來(lái)播放Ogg內(nèi)容。

WebM

Google最近引入了WebM容器用來(lái)發(fā)布免費(fèi)的開放的音頻視頻內(nèi)容。它使用.webm文件擴(kuò)展名，它是基于Matroska容器之上的。現(xiàn)在，硬件加速以及可以支持WebMaster文件了，并且據(jù)Adobe稱，F(xiàn)lashPlayer未來(lái)的版本也會(huì)支持WebM容器。

FlashVideo

FlashVideo容器使用了兩個(gè)容器。FLV是較老的專有格式，支持version7（2003年引入）以下的FlashPlayer。FlashPlayerversion9update3可以支持F4V格式（F4V格式是基于MPEG-4的）。（在前面已經(jīng)提到過(guò)了，當(dāng)使用version9update3及以上版本時(shí)，有效的MPEG-4容器是可以被支持的。）

FlashPlayer并不依賴于文件擴(kuò)展名來(lái)播放兼容的視頻文件，但針對(duì)這兩個(gè)容器通常分別使用.flv以及.f4v擴(kuò)展名。（F4V格式還包括針對(duì)受保護(hù)視頻的.f4p擴(kuò)展名。）FlashPlayer10.2及以上版本支持對(duì)FlashVideo的硬件加速。

容器的主要任務(wù)是將視頻和音頻內(nèi)容結(jié)合到一起。如何操作屬性是編碼器（codecs）的任務(wù)。

視頻編碼

視頻編碼是對(duì)視頻文件進(jìn)行編碼和解碼的算法。軟件以及硬件制造商（比如瀏覽器以及移動(dòng)設(shè)備背后的公司）需要決定使用什么容器和視頻編碼格式，以便來(lái)支持HTML5以及FlashVideo這樣的技術(shù)。用什么容器和視頻編碼格式取決于視頻質(zhì)量、文件大小、帶寬等類似的因素。

其中有一大因素是專利權(quán)以及授權(quán)證書費(fèi)用的影響，另外還有一個(gè)因素是人們對(duì)免費(fèi)開放的視頻編碼的需求，種種原因?qū)е铝爽F(xiàn)在開發(fā)者所面臨的視頻格式間的分歧。現(xiàn)在有很多視頻編碼，但是在這里，我們將集中于四種用于HTML5以及Flash發(fā)布的主要的視頻編碼：H.264,Theora,VP8,以及VP6。H.264以及VP6是有著嚴(yán)格受限的專利的編碼，需要收取授權(quán)費(fèi)用，而Theora和VP8則是免費(fèi)的。

選擇HTML5或者Flash支持的視頻編碼

H.264

也被稱為MPEG-4Part10或者高級(jí)視頻編碼（AdvancedVideoCoding，AVC）。H.264是由MPEG開發(fā)的，并在2003年成為標(biāo)準(zhǔn)。這是一個(gè)質(zhì)量很高的編碼格式，對(duì)于不同帶寬和不同CPU均有較好表現(xiàn)，從手機(jī)到藍(lán)光播放器，也有很好表現(xiàn)。它的標(biāo)準(zhǔn)中包括”profiles”，其值從Baseline到High不等，表示不同質(zhì)量以及可選特性。它還有一種動(dòng)態(tài)特性，可以讓文件根據(jù)不同播放條件調(diào)整視頻質(zhì)量。它擁有軟件及硬件加速支持，并在各類設(shè)備中廣泛使用，從移動(dòng)設(shè)備到高分辨率視頻、DVD等。H.264是MPEG-4容器的一部分，在FlashVideo中也應(yīng)用廣泛，也是F4V容器的一部分。

Theora

Theora是一個(gè)免費(fèi)開放的視頻編碼格式。其他的容器可以使用Theora作為視頻編碼，該編碼通常和Ogg格式聯(lián)系起來(lái)。On2技術(shù)是Theora的前身，就跟VP3一樣。在On2公開發(fā)布VP3以后，Theora在VP3的基礎(chǔ)上演變而來(lái)，現(xiàn)在，該視頻編碼格式是由Xiph.OrgFoundation進(jìn)行維護(hù)的。它需要授權(quán)協(xié)議，但是不受專利所阻，不像之前VP3還有專利限制，執(zhí)行免費(fèi)增值的模式。Theora原本是為L(zhǎng)inux而開發(fā)的，但是也受到Mac以及Windows操作系統(tǒng)的支持（通過(guò)一些開源的編碼器/解碼器）。

VP8

也是通過(guò)On2技術(shù)開發(fā)的。VP8編碼格式以它的高質(zhì)量視頻、低復(fù)雜度解碼而出名，它有著和H.264Highprofile一樣的視頻質(zhì)量，但其解碼復(fù)雜度和H.264Baselineprofile一樣。Google從On2那里收購(gòu)了VP8，將其作為WebMcontainer的視頻編碼格式。Google承諾說(shuō)將不會(huì)再執(zhí)行與之相關(guān)的專利條款，而讓VP8成為免稅的，這使得VP8成為H.264一個(gè)很具吸引力的替代選擇。它通常是由軟件編碼和解碼來(lái)支持，但也有使用硬件加速的，并且硬件加速還在發(fā)展。

VP6

VP6是在FLVFlashVideoFormat中最為常用的編碼格式。它擁有高質(zhì)量視頻，還有很吸引人的特性——支持alpha通道。VP6也是由On2技術(shù)開發(fā)的。VP6從屬于Macromedia(當(dāng)然也就從屬于Adobe)，VP6受到專利和授權(quán)許可的保護(hù)。因?yàn)檫@一點(diǎn)，另外還因?yàn)樵摼幋a格式的視頻需要FlashPlayer才能播放，使得FLVFlashVideoFormat對(duì)于開發(fā)人員來(lái)說(shuō)，并不是一個(gè)很受歡迎的長(zhǎng)期解決方案。但是，在某些特定的場(chǎng)合——特別是需要用到alpha通道的時(shí)候，開發(fā)人員還是會(huì)選擇該格式。

音頻編碼

和視頻編碼一樣，音頻編碼也有很多種，但我們主要會(huì)討論的是AAC,Vorbis以及MP3，因?yàn)樗鼈兪窃贖TML5以及Flashvideoassets中應(yīng)用最廣泛的。

選擇HTML5或者Flash支持的音頻編碼

AAC

高級(jí)音頻編碼（AdvancedAudioCoding，AAC）被設(shè)計(jì)為Mp3格式的可能替代者。在相同的比特率(碼率)下，它有比MP3更好的質(zhì)量。此外，人們可以使用任何比特率(碼率)編碼AAC文件，而MP3編碼卻要在某幾種特定的碼率下。AAC是用在MPEG-4容器中的音頻編碼格式之一，也是該容器中最常用于處理HTML5兼容性的音頻編碼。該格式支持?jǐn)?shù)字權(quán)限管理，但是卻受到專利及授權(quán)的限制。它一般是通過(guò)軟件解碼，但是也存在硬件解碼。

Vorbis

Vorbis通常是用在Ogg容器中，但也可以用于MP4,WebM以及其他格式。在廣泛應(yīng)用于Flash和HTML5的音頻編碼格式中，這是唯一一個(gè)免費(fèi)開放的編碼格式，不受專利限制。事實(shí)上，Vorbis的開發(fā)正開始于MP3格式開始收授權(quán)費(fèi)用之時(shí)。與MP3以及ACC相比，Vorbis有更好地音頻質(zhì)量，而文件體積更小，并且，在游戲產(chǎn)業(yè)中很受歡迎。這個(gè)格式最初是用于Linux以及Android上的，但同時(shí)也受到Mac以及Windows操作系統(tǒng)的支持（通過(guò)QuickTimeComponents以及DirectShowfilters，以及一些dedicatedsoftwareplayers）。

MP3

你一定知道MP3格式的。這幾乎是移動(dòng)數(shù)字音頻設(shè)備的標(biāo)準(zhǔn)來(lái)，并且也被FLVFlashVideo格式采用。它受專利保護(hù)，需要收取授權(quán)費(fèi)用，并且需要使用某幾種特定的編碼格式編碼。

容器/編碼格式與瀏覽器的兼容性

就如你所看到的那樣，即使只是對(duì)視頻編碼格式和音頻編碼格式的一個(gè)簡(jiǎn)單瀏覽，并簡(jiǎn)單看了一下可以用于HTML5和Flashvideo的HTML5和Flashvideo的容器，就花了一些時(shí)間，還需要集中注意力才能完全理解。然而，這時(shí)間花得還是值得的，因?yàn)槿绻阆胍诟蠓秶鷥?nèi)發(fā)布你的視頻內(nèi)容，你就必須了解這些內(nèi)容。為什么呢？因?yàn)樵谇懊婧?jiǎn)短提到的各種格式中，沒(méi)有一種格式是可以被各主流瀏覽器以及移動(dòng)操作系統(tǒng)支持的。

因此，一切仿佛回到了1997年初，那時(shí)候開發(fā)人員的一大工作就是處理瀏覽器和操作系統(tǒng)間的不一致。下面這張表簡(jiǎn)單描述了視頻格式（容器，視頻編碼以及音頻編碼）和主流桌面瀏覽器以及移動(dòng)操作系統(tǒng)間的兼容性。

這張表中有幾點(diǎn)是值得注意的。首先，空格表示不支持，非空表格表示支持的視頻格式的版本。（星號(hào)表示可以通過(guò)第三方軟件如插件提供支持）

其次，盡管Chrome在現(xiàn)在是支持所有三種視頻格式的，但是將來(lái)這種狀況可能會(huì)發(fā)生改變。Google發(fā)布聲明說(shuō)，在Chrome發(fā)布version11.0的時(shí)候，將不再支持H.264編碼——這預(yù)示著HTML5領(lǐng)域?qū)l(fā)生很大改變——盡管這個(gè)決定似乎推遲了。

最后，沒(méi)有一種格式受到所有瀏覽器的支持。在現(xiàn)代瀏覽器中，可以使用聯(lián)合使用MPEG-4以及WebM，以覆蓋所有HTML5用戶。然后，如果一個(gè)用戶用的是version3.6的Firefox，只有Ogg視頻才能滿足要求。

更進(jìn)一步，如果一個(gè)用戶還沒(méi)有將他慣用的瀏覽器升級(jí)到和HTML5兼容的版本，那么，使用FlashPlayer播放視頻則是更好的選擇。結(jié)果，為了讓一個(gè)視頻覆蓋面更廣，我們需要將這個(gè)視頻做成三個(gè)甚至更多版本。

但有意思的事情還不止于此。除了一些策略上的決定，比如Google放棄對(duì)H.264的支持，其他一些因素，如bugs，個(gè)體差異以及各平臺(tái)間一致性的缺乏，使得即使是同一個(gè)瀏覽器或者操作系統(tǒng)，對(duì)視頻的處理方式也不盡相同。在這篇文章的后面還會(huì)談到其中的一些議題，但是，總而言之，想要成功將視頻發(fā)布到不同平臺(tái)還是需要做些規(guī)劃，并需要一些基礎(chǔ)。因此，我們將會(huì)去探究我們之前所簡(jiǎn)要介紹的HTML5markup的一個(gè)升級(jí)版本。通過(guò)了解HTML5視頻的tag，并注意已經(jīng)存在的一些問(wèn)題，就能有效處理前面所說(shuō)的問(wèn)題了。

升級(jí)后的HTML5markup

HTML5視頻標(biāo)記的第一個(gè)版本看起來(lái)是下面這樣的：

<video src=”vid.mp4″ width=”320″ height=”240″ controls></video> 

這里關(guān)鍵的問(wèn)題是視頻資源是通過(guò)<video>tag的src屬性定義的。這使得元素只能<video>有一個(gè)來(lái)源。因?yàn)闆](méi)有哪種視頻格式是通用的， 所以不推薦使用這種方法。

然而，如果你忽略掉src屬性，然后添加HTML5的<source> tags，如下所示，那么瀏覽器就會(huì)首先匹配第一個(gè)視頻來(lái)源，如果不支持，就會(huì)繼續(xù)向下匹配。

<video width=”320″ height=”240″ poster=”vid.png” controls> 
  <source src=”vid.webm” type=’video/webm; codecs=”vp8, vorbis”‘> 
  <source src=”vid.mp4″ type=’video/mp4; codecs=”avc1.42E01E, mp4a.40.2″‘> 
  <source src=”vid.ogv” type=’video/ogg; codecs=”theora, vorbis”‘> 
</video> 

HTML5視頻標(biāo)記的這第二個(gè)版本是非常簡(jiǎn)單的。它在最初定義了一個(gè)320x240像素的HTML5視頻元素，添加了一個(gè)可選的poster屬性，以便在視頻播放之前能顯示一個(gè)靜止畫面（在有些瀏覽器中，是在視頻加載之前顯示這個(gè)靜止畫面），并展現(xiàn)瀏覽器提供的播放控制按鈕。如果沒(méi)有最后這個(gè)屬性的話，可以讓開發(fā)者使用Javascript創(chuàng)建自己的控制按鈕。在這篇文章的后續(xù)文章中，我們將會(huì)講解這個(gè)具體過(guò)程。

Video元素還另外一些屬性，如下所示：

preload:指明需要預(yù)加載多少視頻資源。選項(xiàng)包括none,metadata(用于獲取dimensions,duration,firstframe,等數(shù)據(jù))以及auto讓瀏覽器加載盡可能多的視頻資源)

autoplay:一個(gè)布爾值，決定是否一加載視頻就播放視頻。

audio:指明初始音頻狀態(tài)（現(xiàn)在只支持muted）

loop:一個(gè)布爾值，決定在視頻播放一遍以后是否再?gòu)念^開始播放

在上面實(shí)例代碼中的第一個(gè)sourcetag中，是一個(gè)WebM視頻文件。如果這個(gè)文件不支持，則使用MPEG-4文件。如果也不支持MPEG-4文件，則使用Ogg視頻文件。在各種情況中，type屬性指明了播放所需要的容器類型以及編碼標(biāo)準(zhǔn)。

潛藏的問(wèn)題

如果你想要定位更廣范圍內(nèi)的觀眾，你可能會(huì)遇到一些問(wèn)題。幸運(yùn)地是，這些問(wèn)題的解決方案是非常簡(jiǎn)單的：

首先，確認(rèn)你的服務(wù)器支持你所需要播放的各種視頻的格式。一個(gè)簡(jiǎn)單的方法是創(chuàng)建一個(gè).htaccess文件，將這個(gè)文件放在和你的HTML文件相同的目錄下，并使用AddType指令，添加所需要的媒體類型：

AddTypevideo/ogg.ogv

AddTypevideo/mp4.mp4

AddTypevideo/webm.webm

iOS3.x不支持poster屬性。要將其從<video>tag的src屬性定義的。這使得元素只能<video>tag中去掉。

在iPadiOS3.x上，如果不將mp4<source> 列在第一個(gè)，則視頻不會(huì)播放。

低于2.3的Android版本不支持type屬性。要將其從MP4sourcetag中去掉（在Android上只支持MP4容器）。

因此，為了克服HMTL5發(fā)布視頻的一些問(wèn)題，讓視頻在老版本的iOS以及Android上也能播放，要使用HTML5markup第四個(gè)版本。要注意，在這個(gè)版本中去掉了video元素的poster屬性，并將MP4source列在第一個(gè)，MP4source后的type屬性也去掉了。

<video width=”320″ height=”240″ controls> 
  <source src=”vid.mp4″> 
  <source src=”vid.webm” type=’video/webm; codecs=”vp8, vorbis”‘> 
  <source src=”vid.ogv” type=’video/ogg; codecs=”theora, vorbis”‘> 
</video> 

現(xiàn)在，我們已經(jīng)做完了所有工作，讓視頻能在更大范圍內(nèi)播放。但是，面對(duì)和HTML5不兼容的瀏覽器，我們?cè)撊绾巫瞿兀?/p>

Flash視頻整合

盡管FlashPlayer的宣傳有些過(guò)分，但它仍不失為一個(gè)廣為使用的令人印象深刻的好產(chǎn)品。在很多情況下，你需要使用FlashPlayervideodelivery來(lái)支持某些特性。我將會(huì)在本文的后續(xù)部分闡述這些特性。更重要的是，HMTL5在大多數(shù)情況下是無(wú)法使用的，它遠(yuǎn)不如FlashPlayer那樣具有滲透力。

在NetMarketShare中一份關(guān)于桌面瀏覽器版本的統(tǒng)計(jì)數(shù)據(jù)中，現(xiàn)在使用的瀏覽器中，有將近50%的瀏覽器是和HTML5不兼容的。這將會(huì)隨著用戶逐步升級(jí)他們的瀏覽器而改變，并且移動(dòng)市場(chǎng)也會(huì)使得HTML5視頻發(fā)布逐漸成為必須。但是，在現(xiàn)在，忽略FlashPlayer無(wú)疑就意味著放棄了很大一部分觀眾。幸運(yùn)的是，在需要的時(shí)候，你仍然可以對(duì)你的頁(yè)面進(jìn)行編碼，以發(fā)布Flash內(nèi)容——不管你是從HTML5轉(zhuǎn)到這里還是直接就選用了Flash，并在需要的時(shí)候再換到HTML5。

回歸Flash

同時(shí)使用HTML5和FlashPlayer來(lái)發(fā)布視頻最簡(jiǎn)單的方法就是利用瀏覽器解析HTML的方式。你可以回憶一下，當(dāng)使用<video>以及<source>標(biāo)簽的時(shí)候，一個(gè)和HTML5兼容的瀏覽器會(huì)遍歷所有資源，直到找到一個(gè)兼容的視頻格式未知。如果一個(gè)瀏覽器不支持這些HTML5 <video>元素，這些標(biāo)簽就會(huì)被忽略，但這種過(guò)程可以以某種方式繼續(xù)。

即，可以在HTML5資源列表后加上一個(gè)Flashvideoplayerobject，這意味著和HTML5兼容的瀏覽器一定可以找到需要的資源，而其他瀏覽器則使用FlashPlayer播放視頻。（這當(dāng)然是建立在安裝了FlashPlayer的假設(shè)的基礎(chǔ)上。）這種方法通過(guò)KrocCamen’sVideoforEverybodytechnique得以普及，并受到歡迎，因?yàn)檫@種技術(shù)不需要Javascript或者復(fù)雜的編碼。

標(biāo)記的最后一個(gè)例子。這個(gè)非常簡(jiǎn)單的例子使用了Adobe開發(fā)的OpenSourceMediaFrameworkStrobeplayer作為Flash視頻的播放器。

<video width=”320″ height=”240″ controls> 
  <source src=”vid.mp4″> 
  <source src=”vid.webm” type=’video/webm; codecs=”vp8, vorbis”‘> 
  <source src=”vid.ogv” type=’video/ogg; codecs=”theora, vorbis”‘> 
  <object width=”320″ height=”240″> 
    <param name=”movie” value=”StrobeMediaPlayback.swf”> 
    <param name=”flashvars” value=”src=http://yourdomain.com/vid.mp4″> 
    <param name=”allowFullScreen” value=”true”> 
  </object> 
</video> 

這就是所需要的一切。正如你所看的那樣，HTML5標(biāo)記列出了上面所討論過(guò)的視頻格式，并在這些視頻格式都不支持時(shí)，最終落到FlashPlayer上。

回到HTML5

如果你想要優(yōu)先使用FlashPlayer，在其不被支持的時(shí)候再使用HTML5——也許你是想要提供某種特殊性能，或者是希望有更為一致的播放器控制——你可以使用Javascript來(lái)完成這個(gè)任務(wù)。

下面這個(gè)簡(jiǎn)單的例子采用了 SWFObject JavaScript library來(lái)完成了任務(wù)。它不僅會(huì)檢測(cè)Flash Player是否存在，還會(huì)檢測(cè)是否使用滿足最低要求的版本。如果發(fā)現(xiàn)了一個(gè)Flash Player的兼容版本，SWFObject將會(huì)替換掉特定<div>中的內(nèi)容，嵌入Flash Player。如果沒(méi)有發(fā)現(xiàn)兼容版本，SWFObject將不會(huì)有任何動(dòng)作，而是讓<div>中的HTML5代碼完成工作。

<script type=”text/javascript” src=”swfobject.js”></script> 
<script type=”text/javascript”> 
  var flashvars = {}; 
  var params = {}; 
  var attributes = {}; 
  flashvars.src = ”http://yourdomain.com/vid.mp4″; 
  swfobject.embedSWF(“StrobeMediaPlayback.swf”, ”flashcontent”,  ”320″, ”240″,”10.0.0″, false, flashvars, params, attributes); 
</script> 
<body> 
  <div id=”flashcontent”> 
    <video width=”320″ height=”240″ controls> 
      <source src=”vid.mp4″> 
      <source src=”vid.webm” type=’video/webm; codecs=”vp8, vorbis”‘> 
      <source src=”vid.ogv” type=’video/ogg; codecs=”theora, vorbis”‘> 
    </video> 
  </div> 
</body> 

接下來(lái)還有什么?

我希望這篇文章提供了基本的要素讓你可以了解如何讓視頻在更大范圍內(nèi)發(fā)布，并了解一些所需的技術(shù)背景。在本文的后續(xù)文章中，我們將會(huì)討論以下內(nèi)容實(shí)現(xiàn)這些基本的要素：

選擇合適的編碼軟件包創(chuàng)建視頻文件

關(guān)于FlashPlayer和HTML5各自最適合的實(shí)際場(chǎng)景的例子

典型播放器解決方案的示例Javascript代碼

處理這些工作的最佳Javascript庫(kù)的概覽

原文鏈接：Deliver video seamlessly to desktop and mobile devices