【O專欄】備受矚目的 HTML5 Video標籤

【編按】YouTube開始實現以HTML5 的Video標籤播放影片，引起頗大的熱潮。加上iPad不支援Flash，更是讓Adobe頻頻挫折。不過目前使用HTML 5播放影片的網站，除了Apple以外，介面都顯得稍微陽春。但其實HTML 5 Video標籤可以做到相當多的變化，就讓謝子斌老師來告訴我們怎麼使用！

Youtube開始支援HTML5 Video格式，引起了大家對於未來各大瀏覽器支援哪種影片格式關注。隨著網路的普及與技術的發展，如今在線上觀看及分享影片已是稀鬆平常的事。回歸原點，HTML5 Video格式有哪些？影片格式使用開放性網路標準，對於網頁開發人員來說有什麼好處？我們一起來看看。

▲就算不用Flash，也能做到超屌的影音特效。
（請用FireFox 3.6、Safari 4 以及最新的 Opera 10.50 beta與 Google Chrome，No IE。）

網路Video簡介

視訊影片類網站如YouTube可以讓我們在線上看電視，也可以把影片嵌入自己的部落格，分享給大家。以目前的技術，瀏覽器開啟這些影片必須安裝第三方外掛程式如Flash、QuickTime等。這也是為什麼我們安裝新的瀏覽器後，第一次上影片類網站時會彈出第三方Plugin的安裝提示，就是為了讓瀏覽器安裝可以讀取影片格式的程式。對於網頁開發人員或是內容開發商而言，製作這些格式的影片或動畫，必須以付費購買軟體來製作。

今日影片內容就像圖片，是網站不可或缺的一部份。因此全球資訊網協會（World Wide Web Consortium，簡稱W3C）考慮到這點，將把影片功能內建到瀏覽器，讓用戶無須安裝Plugin，也讓網頁開發人員不須運用Plugin內建影片到網站裡。這也就是我們接下來會談到的Video標籤（Video Tag）。

在進入Video標記教學前，先讓我們回顧HTML5 Video草案的演進。要把Video功能內建到瀏覽器，第一個挑戰就是選擇一個合適的編解碼器（Codec）。合適的Codec可以確保影片播放的品質。市場上有的Codec包括了Ogg Theora、Ogg Vorbis、H.264等。

在原有的W3C草案中，建議瀏覽器支持Ogg Theora影片、Ogg Vorbis聲音、Ogg 影片文件格式（Container Format）。不過眾多因素導致到了瀏覽器商在選擇Codec上無法達到一致看法。Firefox、Opera以及Chrome選擇支援Ogg的Theora和Vorbis，重點是這兩個技術的規格是Open Source的（雖然這點也受到爭議，有著潛在版權〔Submarine Patents〕問題）。Safari則背道而馳，選擇了H.264（Chrome也可以相容）。IE則不見蹤影。

從樂觀的角度來看，五大瀏覽器選擇了支持兩個Codec，而非選擇五個不同的Codec，或許也是一件不錯的事。

《Video》標籤

HTML5 Video 最明顯的好處是讓程式碼更簡單、更快捷的修改影片特性，比方可以將影片轉換成灰階（Grayscale）、或是做到描繪邊緣（Trace Edges）等效果。

以下是舊的嵌入影片方式。

<object classid=”clsid:d27cdb6e-ae6d-11cf-96b8-444553540000″ width=”425″ height=”344″ codebase=”https://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0″>
<param name=”allowFullScreen” value=”true” />
<param name=”src” value=”https://www.somewebsite.com/v/LtfQg4KkR88&amp;hl=en&amp;fs=1″ /><param name=”allowfullscreen” value=”true” />
<embed type=”application/x-shockwave-flash” width=”425″ height=”344″ src=”https://www.somewebsite.com/v/LtfQg4KkR88&amp;hl=en&amp;fs=1″ allowfullscreen=”true”>
</embed>
</object>

HTML5 草案裡的Video 標籤，可以讓我們在網站上加入Video就如加入圖片一般。在不支援HTML5 Video的瀏覽器上，則會顯示「This is shown if no HTML5 video」提示並跳出影片下載畫面。

<video src=”video.ogv”
controls
autoplay
poster=”poster.jpg”
width=”320″ height=”240″>
<a href=”video.ogv”>Download movie</a>This is shown if no HTML5 video
</video>

Video標籤還支援一些便利的功能，包括：

▲內建指令控制（Native Controls）

1. 內建指令控制（Native Controls）；
2. 腳本控制：如 play(), .currentTime 和 ontimeupdate；
3. Poster屬性：可以指定在影片播放前用來顯示的圖像；
4. 支援標籤。

▲Video Tag可以加入腳本控制。

總結

Video標記已經開始受到大量關注，比方YouTube在2010今年初所提出的春天 Wishlist（1，2），其中引人注目的就是HTML5 Video的支援和Codec格式的選擇，YouTube已經有HTML5 Video測試版網站，我們希望有愈來愈多人持續關注這樣的發展，並了解video標記所帶來的便利。瀏覽器方面，Opera、Chrome、Firefox、Safari也已經在正式或測試、開發版本支援Video和Audio標記。不久的未來，在非PC的行動裝置上，iPhone、iPod Touch、iPad、Android以及裝有Opera 瀏覽器的裝置等都可以支援。

更多資源

• Opera 10.5 Video標記進一步解說

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