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

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

接下來的后續(xù)文章將會講解如何選擇編碼軟件，如何使用Javascript來獲取眾多瀏覽器配置，并作出相應調整，并看看當前最流行的Javascriptvideoplayer哪個能真正幫助你解決問題。

什么是HTML5？

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

一個有趣的事實是：盡管W3C現在使用HTML5作為這個標準的名字，WHATWG——這一HTML改革背后的主要推動力量——卻希望在未來的工作中不使用編號命名。它希望堅持使用“HTML”，讓它成為一個“活的標準”。

這一切意味著什么呢？在這一點上，這僅僅意味著HTML5早期嘗鮮者需要準備好迎接改變，因為這個標準還在改變，這最后的改變可能還要經歷好幾年。很多HTML5特性現在已經可用了，很多專家都認為HTML5標準不會出現革命性的變化了。

問題在于，我們談論的都是即將成為標準的HTML5，實現這一標準是另外一回事。不同瀏覽器，以及同一瀏覽器的不同版本，對HTML5特性的支持程度都不盡相同。這使得開發(fā)人員面臨的問題更為復雜。下面是支持基本HTML5視頻特性的瀏覽器以及移動操作系統(tǒng)：

什么是HTML5視頻？

從根本上講，HTML5視頻是一系列markuptags以及Javascript文檔對象模型的拓展。HTML5視頻一個最簡單的實現如下所示：

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

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

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

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

容器（Containers）

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

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

HTML5以及Flash的videocontainers

MPEG-4

MPEG-4(更精確地說是MPEG-4,Part14)是由MovingPictureExpertsGroup控制的專有容器。.mp4文件拓展名已經為大家所熟知（有時候也用.m4v），MPEG-4無可爭議成了知名度最高的容器。它植根于Apple的QuickTime容器（通常使用.mov擴展名），是桌面端以及移動設備播放視頻的最常見的選擇。它是iTunesMac/Windows/iPhone/iPad/iTouch生態(tài)系統(tǒng)使用的容器。然而，由于專利及授權問題，這樣的狀況正在逐漸改變，而HTML5正在加速這個改變。作為一個容器，MPEG-4以支持數字權限管理而出名——數字權限管理對于一些內容發(fā)布者來說是必需的特性，另外，因為硬件加速（基于芯片的，在運行時進行編碼或解碼）大都支持該格式，這使得它更受歡迎。除了和HTML5規(guī)范相容，FlashPlayer也支持MPEG-4容器。

Ogg

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

WebM

Google最近引入了WebM容器用來發(fā)布免費的開放的音頻視頻內容。它使用.webm文件擴展名，它是基于Matroska容器之上的?，F在，硬件加速以及可以支持WebMaster文件了，并且據Adobe稱，FlashPlayer未來的版本也會支持WebM容器。

FlashVideo

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

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

容器的主要任務是將視頻和音頻內容結合到一起。如何操作屬性是編碼器（codecs）的任務。

視頻編碼

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

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

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

H.264

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

Theora

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

VP8

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

VP6

VP6是在FLVFlashVideoFormat中最為常用的編碼格式。它擁有高質量視頻，還有很吸引人的特性——支持alpha通道。VP6也是由On2技術開發(fā)的。VP6從屬于Macromedia(當然也就從屬于Adobe)，VP6受到專利和授權許可的保護。因為這一點，另外還因為該編碼格式的視頻需要FlashPlayer才能播放，使得FLVFlashVideoFormat對于開發(fā)人員來說，并不是一個很受歡迎的長期解決方案。但是，在某些特定的場合——特別是需要用到alpha通道的時候，開發(fā)人員還是會選擇該格式。

音頻編碼

和視頻編碼一樣，音頻編碼也有很多種，但我們主要會討論的是AAC,Vorbis以及MP3，因為它們是在HTML5以及Flashvideoassets中應用最廣泛的。

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

AAC

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

Vorbis

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

MP3

你一定知道MP3格式的。這幾乎是移動數字音頻設備的標準來，并且也被FLVFlashVideo格式采用。它受專利保護，需要收取授權費用，并且需要使用某幾種特定的編碼格式編碼。

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

就如你所看到的那樣，即使只是對視頻編碼格式和音頻編碼格式的一個簡單瀏覽，并簡單看了一下可以用于HTML5和Flashvideo的HTML5和Flashvideo的容器，就花了一些時間，還需要集中注意力才能完全理解。然而，這時間花得還是值得的，因為如果你想要在更大范圍內發(fā)布你的視頻內容，你就必須了解這些內容。為什么呢？因為在前面簡短提到的各種格式中，沒有一種格式是可以被各主流瀏覽器以及移動操作系統(tǒng)支持的。

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

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

其次，盡管Chrome在現在是支持所有三種視頻格式的，但是將來這種狀況可能會發(fā)生改變。Google發(fā)布聲明說，在Chrome發(fā)布version11.0的時候，將不再支持H.264編碼——這預示著HTML5領域將發(fā)生很大改變——盡管這個決定似乎推遲了。

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

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

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

升級后的HTML5markup

HTML5視頻標記的第一個版本看起來是下面這樣的：

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

這里關鍵的問題是視頻資源是通過<video>tag的src屬性定義的。這使得元素只能<video>有一個來源。因為沒有哪種視頻格式是通用的， 所以不推薦使用這種方法。

然而，如果你忽略掉src屬性，然后添加HTML5的<source> tags，如下所示，那么瀏覽器就會首先匹配第一個視頻來源，如果不支持，就會繼續(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視頻標記的這第二個版本是非常簡單的。它在最初定義了一個320x240像素的HTML5視頻元素，添加了一個可選的poster屬性，以便在視頻播放之前能顯示一個靜止畫面（在有些瀏覽器中，是在視頻加載之前顯示這個靜止畫面），并展現瀏覽器提供的播放控制按鈕。如果沒有最后這個屬性的話，可以讓開發(fā)者使用Javascript創(chuàng)建自己的控制按鈕。在這篇文章的后續(xù)文章中，我們將會講解這個具體過程。

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

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

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

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

loop:一個布爾值，決定在視頻播放一遍以后是否再從頭開始播放

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

潛藏的問題

如果你想要定位更廣范圍內的觀眾，你可能會遇到一些問題。幸運地是，這些問題的解決方案是非常簡單的：

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

AddTypevideo/ogg.ogv

AddTypevideo/mp4.mp4

AddTypevideo/webm.webm

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

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

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

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

現在，我們已經做完了所有工作，讓視頻能在更大范圍內播放。但是，面對和HTML5不兼容的瀏覽器，我們該如何做呢？

Flash視頻整合

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

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

回歸Flash

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

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

標記的最后一個例子。這個非常簡單的例子使用了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標記列出了上面所討論過的視頻格式，并在這些視頻格式都不支持時，最終落到FlashPlayer上。

回到HTML5

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

下面這個簡單的例子采用了 SWFObject JavaScript library來完成了任務。它不僅會檢測Flash Player是否存在，還會檢測是否使用滿足最低要求的版本。如果發(fā)現了一個Flash Player的兼容版本，SWFObject將會替換掉特定<div>中的內容，嵌入Flash Player。如果沒有發(fā)現兼容版本，SWFObject將不會有任何動作，而是讓<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> 

接下來還有什么?

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

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

關于FlashPlayer和HTML5各自最適合的實際場景的例子

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

處理這些工作的最佳Javascript庫的概覽

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