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

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

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

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

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

▲就算不用Flash,也能做到超屌的影音特效
(請用FireFox 3.6Safari 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標籤還支援一些便利的功能,包括:

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

▲內建指令控制(Native Controls)

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

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

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

總結

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

更多資源

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

謝子斌(Zi-Bin)
作者

目前Opera挪威總部擔任Opera網路宣講師,在世界各地宣講網路標準技術,包括HTML5、CSS3等。此外也於W3C擔任HTML小組成員、HTML5中文小組主席。

使用 Facebook 留言
Fb3c4919ad1b7820ea2c105f71660e24?size=48&default=wavatar
1.  FoolFitz (發表於 2010年2月17日 10:16)
謝子斌老師個人網站的超連結,網址錯了喔,最後少了一個m!
2ccf371a9e38fd35504fc9d226b1f8c7?size=48&default=wavatar
2.  shellehs (發表於 2010年2月18日 14:27)
我用chromium(5.0.330.0 (39077) Ubuntu 64bit)和chrome(64bit-unstable)都不成阿...
118ed642d310bc813c5ce34d61285f49?size=48&default=wavatar
3.  wellss (發表於 2010年3月02日 22:33)
測試 Firefox 3.6 放那個動畫真的可以耶,效果真的好炫,HTML 5 功能比想像中的還要好。
不過跑那個動畫示範有時會有一點頓頓的,穩定性似乎不是很好。
5f0894747288c2ae0b0e2a2648abbede?size=48&default=wavatar
4.  qwer (發表於 2010年3月08日 16:26)
YouTube HTML5 影片播放器
目前僅支援的瀏覽器:

目前,我們支援所有提供 HTML5 影片標記支援和 h.264 影片編碼器支援的瀏覽器,包括:
Google 瀏覽器
Apple Safari (版本 4 以上)
已安裝 Google Chrome Frame 的 Microsoft Internet Explorer (取得 Google Chrome Frame)
發表回應
謹慎發言,尊重彼此。按此展開留言規則