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/
廣告

Happy Designer 4 Summary(4):HTML5 Preview

(本篇內容整理自othree的演講)

HTML5的語法還在發展中,事實上目前也沒有任何Browser能讀出來,不過應該會隨著升級慢慢納入HTML5的標籤和屬性。HTML5最主要的改變在整體結構上;且多了控制聲音、影像的tag,另外更加落實將每個tag都納入整份文件的DOM tree裡。

1.整體結構

在HTML4或更早,我們用<div id="xxxx">來製作網頁的基本框架,如header, footer, content, sidebar等等;但HTML5直接提供相對應的tag來構築基本框架,這些幾乎是任何網頁都少不了的元素。下面來自 A List Apart 的兩張圖,很清楚地說明的HTML5和之前的差異。

structure-div

HTML4之前

structure-html5

HTML5

<article>代表獨立的一個文章區塊,每個<article>區塊裡可以有很多個<section>區塊。所以頁面框架的html會變成這樣:

<body>
<header>…</header>
<nav>…</nav>
<article>
<section>
</section>
</article>
<aside>…</aside>
<footer>…</footer>
</body>

<nav>內的選單仍然可用list結構來排;而<section>標籤卻是可以一層包一層,大章節裡有小章節。

<section>
<h1>Level 1</h1>
<section>
<h1>Level 2</h1>
<section>
<h1>Level 3</h1>
</section>
</section>
</section>

(這樣有沒有比較好呢?根據達人指點,小<section>裡的<h1>會繼承上一層<section>裡的<h1>,好像不是那麼好控制;再者,原來單純用<div>就能玩的效果反而不能用了。只能說是語意上的理想化。)

2.影像/聲音

主要是<video>和<audio>這兩組tag。

影像:

可以用poster屬性來指定縮圖;可用source來指定不同情況下的來源檔,比如說,在電腦上和在PDA上放映時可讀取不同解析度或格式的檔案。至於control是什麼,官方文件只說"是可以將預設控制面板,關掉或打開的一個布林值",沒人看過長相也不太清楚實際的語法,也許要再等一陣子才會有明確的文件。

<video src="video.ogv" controls poster="poster.jpg" width="320″ height="240″> <a href="video.ogv">Download movie</a>
</video>
<video poster="poster.jpg">
<source src="video.3gp" type="video/3gpp" media="handheld">
<source src="video.ogv" type="video/ogg; codecs=theora, vorbis">
<source src="video.mp4″ type="video/mp4″>
</video>

聲音的寫法就跟影像非常類似囉。

<audio src="music.oga" controls> <a href="music.oga">Download song</a>
</audio>

<audio>
<source src="music.oga" type="audio/ogg">
<source src="music.mp3″ type="audio/mpeg">
</audio>

3.Doctype

doctype,要嘛就宣告為HTML標準,要不就宣告為XML(XHTML)標準。如果循HTML標準,宣告上比以前簡化很多,只要寫<!DOCTYPE html>即可。宣告為html的好處是可以向下相容,且不像xhtml極端嚴格,比如說寫<p>時沒有寫close tag </p>,也能被browser解讀;但宣告為XHTML時,語法就必須嚴謹一些了。

[HTML]

<!DOCTYPE html>
<html>
<head>
<title>An HTML Document</title>
</head>
<body>
<h1>Example</h1>
<p>This is an example HTML document.
</body>
</html>

[XHTML]

<?xml version="1.0″ encoding="UTF-8″? >
<xmlns="http://www.w3.org/1999/xhtml" >

<head>
<title>An HTML Document</title>
</head>
<body>
<h1>Example</h1>
<p>This is an example HTML document.</p>
</body>
</html>

HTML5先寫到這裡,其他新的element,W3C那邊的文件也只是介紹,並沒有browser可以讓我們看看用起來會是什麼效果,看來還要再等一陣子,就不在這裡贅述了。

參考資料:

A List Apart: A Preview of HTML 5 http://www.alistapart.com/articles/previewofhtml5
HTML 5 differences from HTML 4 http://www.w3.org/html/wg/html5/diff/

我的Happy Designer筆記(powerpoint)