影音漫談：HTML5 vs Flash 如何讓影音實現跨螢幕播放
新聞來源分享：T客邦
在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播放的影片。
▲在電腦上，網頁會自動偵測瀏覽器的Flash版本並告知更新
▲在行動裝置中，網頁會告知你Flash並不支援你的裝置
這是早期在iPhone的Safari瀏覽器中無法觀看線上影音的原因。儘管可以透過下載影音App來解決，但是對於影音平台來說，讓用戶必須多繞一個彎，顯然不是聰明的決定。
後來，出現了HTML5
幸虧有HTML5的發展，瀏覽器內HTML5的<video> tag功能，可以呼叫裝置中內建的播放器運作，不需額外安裝Flash Player，除了較不消耗資源之外，也讓用戶在行動裝置裡無須透過下載影音App就能播放影片。
▲ HTML5的<Video> 功能可以呼叫手機內建撥放器
只是，在行動裝置上，HTML5也有一些小缺點，例如這個YouTube中林書豪的賽事影片，由於是呼叫手機內建的播放器，因此無法像在電腦上一般，能夠任意調整畫質、開啟字幕。
▲手機的內建播放器介面不只不太好看，功能也較侷限
不過，仍然有一些變通方法，這個網站分享了相關語法，讓影片不會跳至手機內建的播放器來開啟，也因此能夠保留客製化的外觀，以及更多的操作功能。
▲ 該影片的播放條外觀為自行設計、較有質感，還提供了字幕功能
可惜因為不是呼叫內建播放器，因此較不流暢。在旋轉螢幕改變觀看方向時，就會發現畫面切換有點卡住。不過客製介面跟功能的優點還是非常吸引人。是否要採用這種方法，可能就得看架設者的考量了。
▲如本圖，改變觀看方向時，畫面會切換得不太順暢
不能捨棄Flash的理由
既然HTML5如此強大，那為何不乾脆完全捨棄Flash Player，在電腦上也都用HTML5就好了呢？這是因為目前某些較舊瀏覽器（比如IE 8）不支援HTML5，若是貿然放棄Flash會導致某些用戶無法觀看影音。
有關瀏覽器的支援情形，可以到這個網站來瞧瞧，網站裡除了為瀏覽器評分以外，也有列出各瀏覽器開始支援HTML5的時間表。
▲IE對HTML5的支援度始終都輸人一截，從IE 9之後總算有改善
總結來說，目前在電腦上，通常會以Flash或HTML 5編寫/呼叫播放器，讓影音能順利播放（根據瀏覽器所支援的不同，網站自動判斷給予使用者適合的語法）；至於行動裝置上，則是利用HTML 5，提供使用者的觀賞影音。
▲ 影音平台會偵測連接過來的裝置，提供Flash Player或HTML5播放功能
留言列表
