影音漫談:HTML5 vs Flash 如何讓影音實現跨螢幕播放

影音漫談:HTML5 vs Flash 如何讓影音實現跨螢幕播放

在HTML 5 普及前,電腦上,99%的瀏覽器都安裝Flash Player,只要Flash Player有支援的影音格式,就能在瀏覽器中觀看。因此,早期的影音平台,包括YouTube在內,僅需使用Flash編寫的播放器在網站上觀看影音。但是,在行動裝置上,iOS系統與Android 4.0後的系統並不支援Flash。

行動裝置為什麼不願意支援Flash?主因是它較消耗資源,在記憶體較小,且電池續航力十分重要的行動裝置上並不適合。因此,Apple從一開始就拒絕Flash登陸iOS系統,而2012年,開發Flash的Adobe公司也主動宣佈退出Android的舞台。

大家可以用Adobe Flash的網站做個測試,用你的手機瀏覽器點擊這個連結,只要你是Android 4.0後的版本,或是使用iPhone、iPad,點擊後會見到錯誤訊息。代表你的手機無法觀看Flash Player播放的影片。

影音漫談:HTML5 vs Flash 如何讓影音實現跨螢幕播放

▲在電腦上,網頁會自動偵測瀏覽器的Flash版本並告知更新

影音漫談:HTML5 vs Flash 如何讓影音實現跨螢幕播放▲在行動裝置中,網頁會告知你Flash並不支援你的裝置

這是早期在iPhone的Safari瀏覽器中無法觀看線上影音的原因。儘管可以透過下載影音App來解決,但是對於影音平台來說,讓用戶必須多繞一個彎,顯然不是聰明的決定。

後來,出現了HTML5

幸虧有HTML5的發展,瀏覽器內HTML5的<video> tag功能,可以呼叫裝置中內建的播放器運作,不需額外安裝Flash Player,除了較不消耗資源之外,也讓用戶在行動裝置裡無須透過下載影音App就能播放影片。

影音漫談:HTML5 vs Flash 如何讓影音實現跨螢幕播放▲ HTML5的<Video> 功能可以呼叫手機內建撥放器

只是,在行動裝置上,HTML5也有一些小缺點,例如這個YouTube中林書豪的賽事影片,由於是呼叫手機內建的播放器,因此無法像在電腦上一般,能夠任意調整畫質、開啟字幕。

影音漫談:HTML5 vs Flash 如何讓影音實現跨螢幕播放▲手機的內建播放器介面不只不太好看,功能也較侷限

不過,仍然有一些變通方法,這個網站分享了相關語法,讓影片不會跳至手機內建的播放器來開啟,也因此能夠保留客製化的外觀,以及更多的操作功能。

影音漫談:HTML5 vs Flash 如何讓影音實現跨螢幕播放
▲ 該影片的播放條外觀為自行設計、較有質感,還提供了字幕功能

可惜因為不是呼叫內建播放器,因此較不流暢。在旋轉螢幕改變觀看方向時,就會發現畫面切換有點卡住。不過客製介面跟功能的優點還是非常吸引人。是否要採用這種方法,可能就得看架設者的考量了。

影音漫談:HTML5 vs Flash 如何讓影音實現跨螢幕播放▲如本圖,改變觀看方向時,畫面會切換得不太順暢

不能捨棄Flash的理由

既然HTML5如此強大,那為何不乾脆完全捨棄Flash Player,在電腦上也都用HTML5就好了呢?這是因為目前某些較舊瀏覽器(比如IE 8)不支援HTML5,若是貿然放棄Flash會導致某些用戶無法觀看影音。

有關瀏覽器的支援情形,可以到這個網站來瞧瞧,網站裡除了為瀏覽器評分以外,也有列出各瀏覽器開始支援HTML5的時間表。

影音漫談:HTML5 vs Flash 如何讓影音實現跨螢幕播放

▲IE對HTML5的支援度始終都輸人一截,從IE 9之後總算有改善

總結來說,目前在電腦上,通常會以Flash或HTML 5編寫/呼叫播放器,讓影音能順利播放(根據瀏覽器所支援的不同,網站自動判斷給予使用者適合的語法);至於行動裝置上,則是利用HTML 5,提供使用者的觀賞影音。

影音漫談:HTML5 vs Flash 如何讓影音實現跨螢幕播放

▲ 影音平台會偵測連接過來的裝置,提供Flash Player或HTML5播放功能

 

影音漫談:HTML5 vs Flash 如何讓影音實現跨螢幕播放

Phimedia通泰媒體
作者

我們全心全意為客戶創造媒體新價值,運用長期投入累積的經驗,站在每一個面向細節思考,從經營策略、內容規劃到媒體設計、應用技術,用最專注的心思,及最驚人的熱情,只希望為夥伴提供最完整的新媒體解決方案!

使用 Facebook 留言
cmingyan
1.  cmingyan (發表於 2014年7月23日 14:15)
捨棄耗資源的 Flash 立意很好,但很現實的問題是:網站還是只支援 Flash,那怎麼辦呢?

一堆股票、視頻、天氣網站到現在都還是只支援 Flash 顯示(看某些網銀到現在還在用 ActiveX 控件,連新版 IE 都一堆相容性問題)。
在手機上面看這些網站真是一件痛苦的事。
發表回應
謹慎發言,尊重彼此。按此展開留言規則