深入分析:Flash vs. HTML5 網路影音格式落誰家?

深入分析:Flash vs. HTML5 網路影音格式落誰家?

Steve Jobs在"Thoughts on Flash"一文中,談及網路影音時,多次提到HTML5與H.264兩項標準。新聞整理中我們也預告將就「廣告、影音、遊戲」三方面應用來作深入分析。要是這些技術名詞聽得霧煞煞,看完這篇文章,就能搞懂在影音播放上,他們到底在爭些什麼?未來網路影音又會因此而引起什麼軒然大波!

首先,借用Steve Jobs說的一段話:

Adobe一再反覆宣稱Apple的行動裝置不能提供"完整的網路體驗",因為網路上75%的影片是Flash格式。但他們沒說這些影片幾乎所有都屬於一個更為先進的格式:H.264。

光是這一段,可能就令人不曉得他在說什麼,讓我們先作名詞解釋。Flash影片也就是我們常見的FLV檔,是一種影片格式(Container),播放FLV時需要Flash Player。而H.264是影片編碼(Codec),可以適用於多種影片格式,像是QuickTime的MOV檔、Flash的FLV檔。而目前在YouTube等各大網路影音上的FLV檔,多採用H.264作為編碼,所以它們既是Flash,又是H.264。

深入分析:Flash vs. HTML5 網路影音格式落誰家?

▲影片編碼/格式怎麼分,看這圖就能夠了解。

了解兩者之間差異以後,就能開始來說明Flash與HTML5在網路影片應用上的差別,首先,讓我們談談電腦上的運作差異,以及問題的癥結點:

電腦瀏覽器兩者差在哪?又有哪些問題?

首先,讓我們以Windows配合Google Chrome瀏覽器說明播放YouTube影片時的運作模式:

深入分析:Flash vs. HTML5 網路影音格式落誰家?

  1. Flash:YouTube上的FLV影片得透過一個SWF(Shockwave Flash)播放器播放,而這個播放器會呼叫Flash Player Plug-In來播放影片。
  2. HTML5:YouTube上的M4V影片直接利用<Video>標籤即可透過播放,而播放器是以JavaScript寫成,一切都以瀏覽器內建功能完成。

這兩種模式的優缺點,又可以由「穩定性」與「順暢度」兩項來說明:

穩定性

Flash Player最大的問題就是容易當,想必各位讀者們在玩遊戲、看影片時遇過Flash Player出問題的經驗。早先Flash Player一當,就會讓瀏覽器一起當掉。於是Google Chrome一推出時,就強調每個程序都是分離的,如此一來瀏覽器就不會跟隨一起掛掉。隨後Mac OS X 10.6的Safari也加入這功能,Firefox 3.6.4版也會加入。

▲Google Chrome是最早加入外掛分離功能的瀏覽器,Flash當了也不要緊。

然而,這樣的功能僅是避免瀏覽器與Flash Player陪葬,要是Flash Player的穩定性不改進的話,問題還是沒解決。而HTML5利用<video>標籤和JavaScript來播放影片,不需任何外掛就能達成,是相對穩定許多的。

順暢度

另一件事是,當網路影片從480p,逐漸支援到720p與1080p時,光是播放影片就要耗用相當多的CPU計算資源。桌上型電腦有時播放都相當吃力,更別提CULV筆電以及使用ATOM的小筆電了。於是Flash Player 10.1版中加入了硬體解碼支援,利用GPU加速來降低CPU資源的耗用。之前也有實際測試數據比較Flash與HTML5誰比較吃資源,顯示出,不管哪一種技術,硬體加速是降低CPU耗用的唯一解。

深入分析:Flash vs. HTML5 網路影音格式落誰家?

在該項實測中,Mac上Safari播放HTML5影片耗用資源相當少,主要是因為Safari遇到H.264影片時,會呼叫OS X內的QuickTime X進行解碼,而QuickTime X就直接支援硬解。當時Apple尚未放出硬解API,使得Flash Player 10.0與10.1完全沒有差異。日前Apple公佈硬解API,Adobe也隨即推出Flash Player 10.1 Gala For Mac,加入硬解功能,CPU耗用也明顯減少。微軟也宣告將在IE9中支援HTML5影片播放與H.264硬解。

比較這兩點,Flash Player除了穩定性問題,支援跨平台(不包括Linux)、跨瀏覽器硬體解碼是比HTML5具有優勢。而HTML5最大的問題在於瀏覽器內建編碼不統一,這一點後面會再討論,讓我們看看在行動裝置上的狀況。

行動裝置:效能與電力吃重

Steve Jobs文章也談到,目前大多數的行動裝置晶片都支援H.264硬體解碼,而目前行動裝置主流晶片幾乎都採ARM架構,T客邦過去也有不少文章介紹ARM是什麼。的確,ARM11、ARM Cortex-8、Cortex-9大多支援H.264硬體解碼,但Adobe也宣稱手機上的Flash Player 10.1將會支援硬解。

深入分析:Flash vs. HTML5 網路影音格式落誰家?

但是就算支援硬解,影片與硬體間夾了一個Flash Player當中間層時,電池電力表現又如何呢?很可惜的,目前T客邦未能取得實機測試。但是依照FlashMobileBlog的實測,採用Wi-Fi連線,Nexus One能夠觀看3小時的YouTube影片,但Nexus One官方數據中,單機影片播放可長達7小時。扣去無線網路串流消耗的電力,與Steve Jobs所提及的iPhone可播放10小時H.264影片,但播放Flash影片僅有5小時,比例大致是相同的2:1,可見得Flash耗電的確是個問題。無論如何,再過幾天,Adobe將於Google I/O開發者大會上展示供Android使用的Flash Player 10.1,也極有可能隨著Android 2.2版「Froyo(Frozen Yogurt)」一起更新,屆時就見真章。

不過,如果Adobe不能實際證明Flash在行動裝置上不耗電的話,透過HTML5直接串流H.264影片還是目前行動裝置的最佳解決方案。

▲Adobe曾於年初WMC大會上展示搭載Flash Player的Android手機(來源:Slashgear

HTML5影音的癥結點:瀏覽器支援解碼不一

深入分析:Flash vs. HTML5 網路影音格式落誰家?

▲隨著微軟的表態,這次不能說IE "Who Care"了(註一)。

Steve Jobs發表公開信後,一名歐洲自由軟體協會(FSFE,Free Software Foundation Europe)的實習生Hugo Roy寫了一封公開信,認為H.264不是開放標準,應符合五項該協會的定義。Steve Jobs回信表示:

所有的影片編碼都有著專利。Ogg Theora與其他"開放原始碼"的編碼目前背後有著一個正在組織中的專利聯盟(註二)。不幸地,我們不能因為某件事物是開放原始碼,就代表或承認它並未侵犯到其他人的專利。開放標準並不同於免授權費或開放原始碼。

當Firefox內建OGG編碼時,我們就曾寫過文章說明編碼的問題;介紹YouTube時,也曾經說明過各家瀏覽器支援的編碼不一。不過到底為什麼H.264不受Mozilla與Opera所採用,還要進一步說明才行。

深入分析:Flash vs. HTML5 網路影音格式落誰家?

▲要在瀏覽器內使用H.264?拿出五百萬美金來吧。

  1. H.264又稱為MPEG 4 Part 10,與MPEG 2一樣需要授權金,並統一由MPEG LA這個專利聯盟管理收受。使用MPEG 4標準編碼/解碼都需要付出授權金,一年產品總數在10萬個以下時免費,但超過10萬時,每個產品將收0.2美元的授權金,超過500萬時,授權金降為0.1美元,上限則是500萬美元。
  2. 網路上免費內容,如YouTube等影音網站可免費使用到2016年。但如果收月租費提供影片內容,像NetFlix,就要依照使用者數量收取授權金;如果用於PPV(Pay Per View)以及VOD(Video on Demand),像是MOD與bbtv數位有線電視上的付費影集、電影,超過12分鐘的內容,也要付售價2%的授權金。最多以500萬美元為上限。

因為這樣的授權金規定,支持GPL協定的Mozilla基金會,以及支持開放標準的Opera,都力挺開放原始碼的OGG Theora格式,而未內建H.264編碼。所以儘管它們都支援HTML5<Video>標籤,但卻無法播放H.264格式影片。

HTML5影片在行動裝置上,除了微軟Windows Mobile系統上的IE不支援HTML5外,其他採用WebKit核心瀏覽器的手機也大多支援H.264編碼,成為共通格式沒太大的問題。但是回到電腦上時,畢竟Opera是商業公司,不排除未來內建H.264的可能;但Mozilla基金會就會變成推動上的鐵板一塊,全球佔30%的Firefox使用者,就是看不到H.264編碼的影片。

而Google,將會是打開這僵局的重要角色。Google去年併購了On2這家研發影片編碼的公司,並且傳言將會於Google I/O大會上,將旗下的VP8編碼開放原始碼。如此一來,具有接近H.264編碼低流量、高品質,又開放原始碼的VP8,將有成為一統HTML5影音的黑馬。

結論:HTML5影片的下一步在電視,規格統一才有取代Flash的機會

然而,Google若要推動VP8編碼,Opera與Mozilla基於支持開放格式應該會加入支援,微軟我們不確定,但依照Steve Jobs力挺H.264的態度,當然不會妥協。不過Google手上的YouTube持有40%的網路影片,只要YouTube上的內容逐漸由Flash、H.264轉向VP8,就會造成實質(de facto)的壓力,讓各家都加入支援。但這樣會不會與Google "Do no Evil"的信條相衝突呢?月中Google I/O大會上見真章。

深入分析:Flash vs. HTML5 網路影音格式落誰家?

▲微軟CEO Steve Ballmer的三屏一雲概念,正好可以用來說明Flash與HTML5的戰爭。

不過,就筆者個人的預測,Google將VP8開源化的主要目的並不是為了讓它成為HTML5的編碼標準,而是為了進軍電視市場作準備。首先,早在數年前,Google Adsense就推出的InVideo廣告,能在YouTube影片播放時讓你自行播放廣告。今年一月,YouTube也推出租借影片服務,首批影片就是日舞影展2010年的影片。三月中,華爾街日報報導Google將與Intel、Logitech、Sony合作進攻電視與機上盒市場,同樣也會在Google I/O上發表。

雖然目前還不知道Google打算怎麼跨足電視領域獲利,但是前面提到H.264繁瑣複雜的權利金規定,Google將VP8編碼開源化後,自然就不需要付給MPEG LA組織這筆錢。至於VP8會不會推廣成為HTML5影音編碼標準呢?慢慢來吧。同時也別忘了,Apple去年不斷傳出將提供網路電視訂閱服務,配合旗下的AppleTViAd平台,甚至i系列產品與App Store,未來在電視這領域,又會是一場激戰。

當然,三屏一雲只有一朵雲,YouTube一則影片上傳,光是FLV格式就十種,加上供HTML5使用的H.264版本,就足以讓佔用的容量爆增。如果VP8、OGG Theora編碼都要支援的話,想必就算是Google也會倍感沈重。而網路影音由過去QuickTime、Real、WindowsMedia三雄鼎立,到Flash以高普及率一統天下為止花了非常長的時間;要是HTML5的編碼格式是合久必分的必然趨勢,那也希望別讓大家等得太久。儘快催生出共同標準才是最重要的事。

深入分析:Flash vs. HTML5 網路影音格式落誰家?

▲根據Encoding.com統計,H.264佔整體網路影音66%,是目前實質上的贏家。

結論大致上有四點:

  1. 行動平台上:Flash如果耗電問題依然嚴重,HTML5與H.264影片就會是較好的影片格式;
  2. 電腦平台上:HTML5瀏覽器如果沒有共同的內建編碼,普及性就無法與Flash相比,需要時間;
  3. 電視平台上:內容、廣告等龐大利益,未來將會成為HTML5與Flash的下一個戰場;
  4. Apple軟體、硬體,手機、電腦一條鞭的狀況要大步往HTML5走當然沒阻礙,但以外的世界還大得很。

註一:IE9雖然支援HTML5<Video>功能、H.264編碼和硬體解碼,但是僅支援Windows Vista以上版本。如此一來Windows XP + IE 6~8會成為不支援HTML5的殭屍,只能靠Google Chrome Frame解決,還有換瀏覽器。

註二:微軟過去曾將WMP9編碼開放原始碼化,結果各家公司都來要求編碼的權利,於是組成了VC-1這個專利聯盟(Patents Pool),一共由16家公司組成,微軟也包含在內。

董福興
作者

使用 Facebook 留言

22c03acfcd9023adcdd871738e758a26?size=48&default=wavatar
1.  Zionic (發表於 2010年5月04日 13:52)
如果蘋果或微軟願意幫火狐出這500萬應該很快Flash就垮台了=.=".....
D41d8cd98f00b204e9800998ecf8427e?size=48&default=wavatar
2.  regmax (發表於 2010年5月04日 13:56)
貴站的文章真的越來越有料了
報導也看得出來有盡量維持媒體中立性
不像隔壁X科技編輯一群蘋果迷一昧的抱蘋果大腿

果然從書籤裡刪掉X科技保留T客邦是對的=P
Zion-X
3.  Zion-X (發表於 2010年5月04日 14:06)
並不能說癮科技一昧的抱著蘋果大腿,他們只是把新的消息釋出而已
雖然說該站內近期iPad的新聞相當多,也只能說不想看得就別看了吧
就像前陣子北二高的事件一樣,你覺得轉到哪一個電視台會看不到這則新聞呢?
這是近期科技業的焦點,所以就會聚焦在上面
而且蘋果也不像很多公司會一點一點的釋出消息,所以總是在發表的那陣子大爆發
不過這邊倒是有個比癮科技好很多的地方,就是不太有人為了蘋果在筆戰
每次在癮科技看到蘋果的消息,下面就是一堆護航者跟反蘋果勢力在對罵
只能說那邊很多人實在是不理性阿......
D41d8cd98f00b204e9800998ecf8427e?size=48&default=wavatar
4.  阿山 (發表於 2010年5月04日 17:48)
這篇文章非常有料,從技術面分析這場網路影音格式大戰,個人收獲良多。
2a6d8172d2f2244ae36100d85c5b4e7b?size=48&default=wavatar
5.  tangerine (發表於 2010年5月04日 20:39)
關於 Ogg Theora 到底是不是和 H.264 一樣「低流量、高品質」,還是純粹只有開放原始碼這點優勢,不是說說就算,詳情如下面這篇文章有詳細的比較與測試。

http://blog.bobchao.net/2009/06/35-7a.html

所以問題不是出在於 Mozilla 願不願意出這個錢,而是 OGG Theora 本身是完全開放而自由的。
H.264 的優勢是本身幾乎可以說是業界標準,並不是說它本身所需流量低品質高(這根本只是藉口),所以說即使到時候換 VP8 上陣,還是會碰到和 OGG Theora 完全一樣的問題。
董福興
6.  董福興 (發表於 2010年5月05日 01:35)
@tangerine
如果要對Codec做更深入的分析,我會建議您讀由Jason Garrett-Glaser,一位H.264編碼與FFMpeg開發者所撰寫的〈Flash, Google,VP8 and the future of internet Video〉( http://x264dev.multimedia.cx/?p=292 )這篇包含回應在內長到不可思議的文章根本就是技術面的大補丸,看完一定會功力大增。
F30f541cf78e32f8515bc9f97153aab2?size=48&default=wavatar
8.  itstoolate (發表於 2010年5月05日 10:08)
這篇文章是蠻中立的...
撇開新仇舊恨不說
flash的確是快要沒有競爭性了

另外,癮科技真的沒有很抱大腿啦
以這件事而言,他們比較沒有中立,而是偏向支持flash那一邊
倒是我覺得他們的編輯,不是很中立,常常報導事情就像是寫自己部落格一樣
就算是翻譯主站新聞,過程中也夾帶了太多個人觀點。
宅用語也就罷了,我只希望他們不要忽視自己身為「編輯」的專業性
而不是「部落客」
9b93e2b249338aa938a8d0969531401b?size=48&default=wavatar
9.  路人假 (發表於 2010年5月05日 11:33)
"而目前在YouTube等各大網路影音上的FLV檔,多採用H.264作為編碼,所以它們既是Flash,又是H.264。"這句話有誤。FLV檔案格式裡,無法採用H.264編碼的影片,應該是MP4檔案才是採用H.264編碼的
Ff8ce6701e6c617ff0add24ce55d6d14?size=48&default=wavatar
11.  阿麒 (發表於 2010年5月05日 13:04)
微軟有DirectShow這項支援
裝過解碼包後
影片格式支援應該不是問題
C7b6cb5e6b88de38e3a0fe456011a132?size=48&default=wavatar
12.  toppy368 (發表於 2010年5月05日 13:13)
我以網頁設計的立場來看,HTML5加上影片格式的選擇並非完全的取代Flash,而是有點像CSS與HTML的關係一樣,將功能區分開來,因為原本Flash只是用來表現網頁動畫效果,只是後來有人把它拿來播影片,而Flash本來的設計就不是用來播放影片,這樣改變用途的話,這格式表現出來的效果當然會有差,現在HTML5+影片格式(如h.264或其他檔案格式)並非完全的取代Flash,它頂多只讓Flash可以回歸網頁的互動效果而不用屈就於影片效果,因此我覺得Flash並不會因此完全的消失不見,只是回歸原本的功能而已

目前的HDTV好像也逐漸採用h.264(至少公視的Hihd是採用此格式,官方說是MPEG4的h.264),以後也許電視台可以直接將廣告的影片直接用HTML5+h.264檔上傳,節省轉檔處裡的麻煩
Df7a201ac449f9f43bfe07397fca2bf6?size=48&default=wavatar
13.  Eric (發表於 2010年5月05日 14:08)
真的是超有料文章,我已經轉到噗浪上了!
貴站文章的質量真的是越來越好,雖然有些消息會慢個幾天報導,但至少都是言之有物(相較於蘋科技而言)

蘋科技真的是...當電視台看吧,太閒時轉過去看看笑話就好


希望你們繼續努力!^^
189cd9dfc40aa585367d656296e625e4?size=48&default=wavatar
14.  CHCOOBOO (發表於 2010年5月05日 15:09)
to toppy368 :
HTML5是用code就能做到很多事,但對程設經驗比較低的美工來講,應該就是相當難以上手的作業
相反的,Flash的易用性,也讓網頁美工進化了很多,但是帶來的就是相當佔用CPU資源...一方面是Flash Player本身播放效率不佳,另一方面應該是美工人員不懂得對Flash最佳化。

像我還在用舊筆電,只有P-M 750(1.86G)
遇到Flash為主體的網頁,或是Flash廣告很多的網頁就相當痛苦
就算不播影片就能讓我的電腦變得相當遲頓
雖然已經用了Flash Block的外掛
但這個外掛也會讓Flash為主體的網頁變得不方便使用
變成兩難的局面

87714c384fef4bff34272bc44f2555ff?size=48&default=wavatar
15.  iDang (發表於 2010年5月05日 16:29)
对贵站的这篇文章很感兴趣,不是否可转载?
以查看贵站的版权声明,但我站是商业网站,不是能否磋商一下本文的转载事宜?
望回复。
黑眼bobo
16.  黑眼bobo (發表於 2010年5月05日 16:35)
iDang你好

只要盡量不要全文引用,並且注明出處,不要竄改作者名稱,讓貴站的訪客和T客邦可以互相導流,基本上我們並不排斥轉載,轉載完成後麻煩留言知會我們一聲,留下轉載的連結即可。
Bab9e9966dd29d4cf95aae57005f520c?size=48&default=wavatar
17.  Visio (發表於 2010年5月05日 17:25)
其實文章內少了一個很重要的因素 - 品質
就如同作者回應的參考網址內提到的一樣
〈Flash, Google,VP8 and the future of internet Video〉( http://x264dev.multimedia.cx/?p=292
目前 HTML5 用的 H.264 品質是非常惡劣的
董福興
18.  董福興 (發表於 2010年5月05日 22:19)
@Visio
對,那篇文章中提到,如果使用H.264 High Profile來編碼的話,不僅品質會提昇,流量也會相對降低。不過好死不死的是,iPhone到目前為止僅支援Baseline Profile,所以又佔頻寬、品質又差;而目前採用HTML5主要都是為了iPhone以及iPad使用。iPad規格支援較優,能夠支援到Main Profile。
這一點與當下ARM晶片的推行採用有關連,行動晶片就得請其他達人來回答了。不過可以說,就算今天HTML5加上H.264成為共通規格,但也要等主流晶片由ARM Cortex8向SnapDragon、Tegra2、A4等ARM Cortex9架構轉移、普及,H.264的品質才能達到最佳化。
28843bbfa7e289c82d9b7072cf5fbe43?size=48&default=wavatar
20.  jhangyu (發表於 2010年5月06日 12:26)
@CHCOOBOO:
Firefox上有個叫Adblock Plus的附加元件,
你可以安裝他,再訂閱Chinalist,效果非常不錯~

發表回應

謹慎發言,尊重彼此。按此展開留言規則