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

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

IE9才支援HTML5，過渡時期怎麼辦？

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

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

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

audio標籤也是一樣：

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

目前支援HTML5的瀏覽器，所內建的Codec又分為兩大陣營—— H.264與Ogg Theora。為了要一網打盡、讓所有瀏覽器都看得到影片。程式人員可以在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都能看得到影片了，例如：

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

Video標籤與其它標準的混搭

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

1. Video+CSS

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

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

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

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 Lawson和Patrick Lauke所提供的訊息和範例。

Dev.Opera上有著更多的HTML5 Video資源（英文）：

• Introduction to HTML5 video
• Everything you need to know about HTML5 video and audio

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