只要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,他的原理是:
- 如果browser支援HTML5,就會優先載入<video>採用的影音格式 — MP4或OGG;
- 如果browser看不懂HTML5,就會fall back到下一層<object>,載入SWF;
- 如果browser既看不懂HTML5又沒裝flash player,就只能fall back到最下層,也就是提示訊息。
除了用html寫hard code外,另有一些套件可判斷瀏覽器的狀況,決定要嵌入flash或html5 video,如MediaElement.js和VideoJS ,兩者的播放介面設計都還不錯,而且可自訂一些播放參數,如autoplay等等。其中VideoJS 執行的結果與Video for Everyone非常類似,只是用javascript產生HTML。