Mobile Web 前端技術筆記(四): 不能播Flash時怎麼辦? — Flash與HTML5 video的相互替代

只要Steve Jobs還沒轉念,iPad和iPhone上的browser就難有支援flash的機會吧!但現在有新希望 — HTML5的<video> tag。當然兩者都只有部分瀏覽器支援,我們能做到的最好方式,就是fall back,或有人說fall forward,因為Flash與HTML5很難有孰高孰低之分。Vimeo 很努力的設計它的fall back機制,順序是這樣:

flash > html5 video > place holder

其中place holder的內容包括了圖片、文字、要求升級或加裝套件的訊息,或下載到本機觀看的連結,總之就是要想盡辦法引導user看到影音內容。

也有的網站是以html5優先的:

html5 video > flash > place holder。

《用法》

fall back基本的訣竅有點像俄羅斯娃娃,一層包一層,有開發者甚至想出了用HTML就能達成的超基本做法,類似這樣:

   1: <video>
   2:     <source ...aaa.MP4".../>
   3:     <source ...bbb.OGG"... />
   4:     <object ... data="ccc.SWF">
   5:         <param... />
   6:         <img src="__IMAGE__.JPG" alt="__TITLE__" title="No video playback" />
   7:     </object>
   8:
   9: </video>
  10: <p>
  11:     <strong>Download Video:</strong>
  12:     <a href="__.MP4">"MP4"</a>
  13: </p>
詳情請見 Video for Everyone,他的原理是:
  1. 如果browser支援HTML5,就會優先載入<video>採用的影音格式 — MP4或OGG;
  2. 如果browser看不懂HTML5,就會fall back到下一層<object>,載入SWF;
  3. 如果browser既看不懂HTML5又沒裝flash player,就只能fall back到最下層,也就是提示訊息。

除了用html寫hard code外,另有一些套件可判斷瀏覽器的狀況,決定要嵌入flash或html5 video,如MediaElement.jsVideoJS ,兩者的播放介面設計都還不錯,而且可自訂一些播放參數,如autoplay等等。其中VideoJS 執行的結果與Video for Everyone非常類似,只是用javascript產生HTML。

《資料來源》

  1. http://camendesign.com/code/video_for_everybody
  2. http://mediaelementjs.com/
  3. http://videojs.com/
廣告

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s