HTML5 – Video
在HTML5以前若我們要在網頁中播放影片時，需要使用ActiveX或Plug-in的方式來達到，例如：Flash Player、QuickTime等等，但在HTML5之後這些東西成了標準，我們不需再透過額外的外掛來達成，相信這也意味著Web的相關應用將更趨於豐富化。
現在就連 YouTube 也已經測試使用HTML5的Video來做為影片播放介面，因此在實際應用上雖然我們並不一定要走在時代的尖端，但了解一下新技術是有其必要的。
HTML 5 Video 基礎
基本的 HTML5 Video 標記如下，我們可以透過 src 屬性來標明影片的URL：
- <video src=影片URL >很抱歉！您的瀏覽器不支援HTML5 Video</video>
雖然上面的方式很簡短，但可惜的是因為目前各家瀏覽器在HTML5 Video的影片格式方面支援不一致，而導致我們若我們想要影片能夠兼容各種主流瀏覽器，我們必須提供這兩種主要的HTML5 Video 格式的影片檔案：
- Theora/Vorbis (*.ogg ; *.ogv)
- H.264 / AAC (*.mp4 ; *.m4v)
所以我們必須提供兩種格式讓瀏覽器自行依照自己支援的格式下載並播放，因此我們加入 <source> 來定義多個影片來源，而不是用 <video> 的 src 屬性，例如：
- <video>
- <source src="video.ogg">
- <source src="video.m4v">
- 很抱歉！您的瀏覽器不支援HTML5 Video
- </video>
<video> 的屬性
<video> 除了可以使用 src 屬性來標明影片的URL，我們還可以使用其他的屬性來定義 <video> 的基本樣式或行為。
src
影片的URL。
autoplay
影片是否自動播放，預設為 false。
controls
是否顯示播放控制列，若設定為ture將會顯示播放控制列，這個控制器的樣式是依據瀏覽器而定的，預設為 false。
width
<video> 所佔寬度。
height
<video> 所佔高度。
poster
這如同一些以Flash實現的播放器所提供的「預覽圖」功能一樣，可於此指定預覽圖的URL，當影片尚未開始播放時，將會先顯示這裡所指定的圖片。
其他的屬性
<video>的屬性還有 loopend / loopstart / playcount / start / end / loop 但這些屬性的各個瀏覽器的支援不一，因此目前不是很實用。
簡單的範例
以下的範例會在頁面載入完成後自動播放，並顯示瀏覽器內建的影片播放控制列，在載入完成並播放之前將會顯示所指定的預覽圖。
- <video id="myvideo" autoplay controls poster="preview.png" >
- <source src="video.ogg">
- <source src="video.m4v">
- 很抱歉！您的瀏覽器不知員HTML5 Video
- </video>
<video> 與瀏覽器的支援
目前HTML5的 <video> 僅於以下瀏覽器版本支援：
Chrome4+ / Firefox 3.5+ / Opera 10.5+ / IE 9+ / Safari 4+
以及以下Mobile平台：
iPhone / iPod / iPad / Android OS
替代性的解決方案
在過度時期我們可以使用 video4all 這個開源專案讓更多瀏覽器版本也能支援<video>。
透過 video4all 我們只需要於HTML中加入它所提供的Javascript Library。
<script src="video4all.js" type="text/javascript"></script>
接著我們就可以正常的使用 <video> ，當訪客的瀏覽器不支援 <video> 時 video4all 會自動幫我們將<video>替換成使用Flash的播放器來播放所指定的影片。
- <video>
- <source src="video.ogg" type="video/ogg" />
- <source src="video.mp4" type="video/mp4" />
- </video>
HTML5 Video 成員
在HTML5中我們可以透過 Video所提供的屬性以及方法來控制影片的播放與取得播放資訊。
play()
開始播放影片。
pause()
影片暫停播放。
currentTime
numeric 目前的播放指標。
readyState
影片讀取狀態。
- HAVE_NOTHING = 0
- HAVE_METADATA = 1
- HAVE_CURRENT_DATA
- HAVE_FUTURE_DATA = 2
- HAVE_ENOUGH_DATA = 3
paused
boolean 是否停止
muted
boolean 是否為靜音。
volume
numeric 取得或設定音量值。
ended
boolean 播放指標是否已經到最後。
搭配jQuery的簡單HTML5 Video 控制範例
simple.html
- <!doctype html>
- <html>
- <head>
- padding-top: 0px !important; padding-right: 3px !important; padding-bottom: 0px !important; padding-left: 10px !important; font-weight: inherit; font-style: inherit; font-size: 12px; font-family: inherit; vertical-align: baseline; background-color: #f8f8f8; color: #5c5c5c;
评论