建議使用瀏覽器為IE7以上或Firefox !!

TS.Taiwan: 新聞中心 >> HTML5 vs Flash 如何讓影音實現跨螢幕播放
HTML5 vs Flash 如何讓影音實現跨螢幕播放
來源:T客邦    發佈日:2014-07-25    瀏覽次數:42    

在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播放的影片。

    PC Adobe

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

    2014-01-22_11-27-55▲在行動裝置中,網頁會告知你Flash並不支援你的裝置

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

      後來,出現了HTML5

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

        2014-01-26_18-49-57▲ HTML5的<Video> 功能可以呼叫手機內建撥放器

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


        2014-01-22_18-16-39▲手機的內建播放器介面不只不太好看,功能也較侷限

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

        2014-01-26_18-44-11
        ▲ 該影片的播放條外觀為自行設計、較有質感,還提供了字幕功能

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

        2014-01-26_18-38-47▲如本圖,改變觀看方向時,畫面會切換得不太順暢

          不能捨棄Flash的理由

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

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

            HTML5

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

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

            HTMLFLASH

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

             
             
            地址:新北市中和區連城路268號6樓之1 電話:886-2-77291399