2010.03.22 11:30

【O專欄】搭配網路標準讓HTML5 Video更活潑

ADVERTISEMENT

【編按】上一篇中簡介了 Video標籤的基礎應用和原理。但是隨著iPad不支援Flash的消息,HTML5和Flash之爭越來越熱。到底HTML 5還能和其他網路標準怎麼混搭做出不同效果?網頁設計師能夠如何應用它們妙手生花?還有在各瀏覽器支援標準不一的現在,又要怎麼來處理不相容的問題呢?

IE9才支援HTML5,過渡時期怎麼辦?

這個月中微軟在MIX10大會上宣告了,奠定HTML5在未來的網路標準技術的地位,也讓所有從事開發網頁的技術人員睜大眼睛,好好來鑽研HTML5怎麼個玩法,如何使網頁既符合標準又可以呈現酷炫的吸睛效果。上期我們介紹 HTML5 Video標籤的重要性以及現在所通用的兩大Codec陣營——H.264與Ogg Theora,以及有未來可能會新加入陣營的VP8(端看Google的新公司On2是否開放出原始碼),先暫且不論後製格式輸出部份到底哪一個Codec才會成為標準,因為那是各大瀏覽器開發商所要煩惱的議題。

現有唯一還不支援HTML5的主流瀏覽器便屬IE了,而使用IE的用戶仍屬大宗。如果在網頁上玩一些HTML5 Video格式,必須讓訪客知道自己的瀏覽器不支援這類技術,因此程式人員需註明在標籤中。這樣的video標籤非常簡單,在不支援HTML5 Video的瀏覽器上,則會出現「video not supported」來提示。指令如下:

ADVERTISEMENT

<video src=”video.ogv” controls>
video not supported
</video>

audio標籤也是一樣:

<audio src=”audio.oga” controls>
audio not supported
</audio>

目前支援HTML5的瀏覽器,所內建的Codec又分為兩大陣營—— 。為了要一網打盡、讓所有瀏覽器都看得到影片。程式人員可以在Video標籤同時夾帶兩種Video格式,兩種都支援的Chrome,則會優先播放排在.mp4前的.ogv影片,如:

<video controls>
<source src=”video.ogv” type=”video/ogg” />
<source src=”video.mp4″ type=”video/mp4″ />
video not supported
</video>

再大膽一點還可以這麼做,把「video not supported」這段換成YouTube上影片的嵌入碼或其他FLV的播放介面,那麼連IE都能看得到影片了,例如:

ADVERTISEMENT


▲Opera、Firefox下會看到OGG格式的香港電車影片;
Safari、Chrome會看到H.264的樂高影片;
IE會看到來自YouTube的影片。

Video標籤與其它標準的混搭

回到主題,網頁開發人員可以運用開放性網路標準,讓網路影片的呈現有各式活潑的變化。Video標籤和一般HTML標籤一樣,可以隨意搭配其他網路標準技術如CSS,Javascript或Canvas等加工做變化。以下舉一些簡單的範例介紹它們在Video上的設計,同時也展現標籤本身的屬性。

1. Video+CSS

ADVERTISEMENT

如果說HTML負責的是網頁結構,而CSS則為網頁提供設計,在這裡,CSS為影片提供設計。範例中,影片運用CSS的:hover 屬性。當滑鼠游標點到影片時,影片就按照:hover 屬性放大影片。

▲原本的頁面上影片只有小小一塊。

ADVERTISEMENT

▲滑鼠移到上頭就會自動放大,實際範例

2. video + canvas

我們同時也可以用Canvas來點綴Video。Canvas是透過Script繪製圖形的網路技術。在這個例子,我們運用<canvas>標籤在影片上,影片上的滑鼠游標可不是後製時加上的效果,而是套用Canvas所繪製的。

這個範例頁面上方的文字,眼尖一點就能發現還運用了。

3. video + JavaScript

程式人員也可以用JavaScript去控制影片播放,這個範例就不使用瀏覽器內建的播放介面,而自行以Javascript撰寫。

▲除了影片可以利用Javascript打造播放介面,音樂也可以。

可以被調整的控制項目包括了:

  • 播放: play()
  • 暫停: pause()
  • 聲量: volume
  • 靜音: muted
  • 目前時間進度: currentTime
  • 播放已下載的影片: loadeddata
  • 進行快轉或倒退的時間顯示: timeupdate
  • 影片結束: ended

總結

由於HTML5是W3C標準技術,我們也可以運用不同的網路技術如CSS,JavaScript和Canvas去調試video和audio。因此,能夠作到的變化很多,它們的普及將幫助程式人員從開放的指令中互相學習,編寫更多有趣的網站,這是我們所期待看到的網路標準所帶來的好處之一。

在此感謝我的團隊Bruce LawsonPatrick Lauke所提供的訊息和範例。

Dev.Opera上有著更多的HTML5 Video資源(英文):

作者簡介:謝子斌 /Zi Bin, Cheah
馬來西亞華人,網路標準專家。長期從事網際網路標準研究,經常來往於中國、印尼、馬來西亞、北歐等地宣導。現於挪威Opera軟體公司奧斯陸總部擔任網路標準講師(Web Evangelist)。(Twitter個人網站

ADVERTISEMENT