開始HTML5 – Video

Posted in 四月 27th, 2010 by 阿育 | Filed under Web開發 | Comments (5)

在HTML5以前若我們要在網頁中播放影片時，需要使用ActiveX或Plug-in的方式來達到，例如：Flash Player、QuickTime等等，但在HTML5之後這些東西成了標準，我們不需再透過額外的外掛來達成，相信這也意味著Web的相關應用將更趨於豐富化。

現在就連 YouTube 也已經測試使用HTML5的Video來做為影片播放介面，因此在實際應用上雖然我們並不一定要走在時代的尖端，但了解一下新技術是有其必要的。

 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>
		<meta charset="UTF-8">
		<title>HTML5 Video simple test</title>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
		<script src="init.js"></script>
	</head>

	<body>
		<p><a href="http://blog.colorbase.tw/web-development/947">回文章</a></p>
		<video id="myvideo" poster="html5_video.png" >
			<source src="video.ogg">
			<source src="video.m4v">
			很抱歉！您的瀏覽器不支援 HTML5 Video
		</video>
		<div id="state"></div>
		<p><button id="play">Play</button><button id="pause">Pause</button></p>
		<ul id="statelist"></ul>
	</body>
</html>

init.js

$(function(){
	var video = $('#myvideo')[0];//取得video
	var statelist = $('#statelist');
	var videoStateTexts = [
		'HAVE_NOTHING','HAVE_METADATA','HAVE_CURRENT_DATA',
		'HAVE_FUTURE_DATA','HAVE_ENOUGH_DATA'
	];
	var pr = ['currentTime','readyState','paused','muted','volume','ended'];

	$('#play').click(function(){
		video.play(); //播放影片
	});

	$('#pause').click(function(){
		video.pause(); //停止播放
	});

	var t = setInterval(function(){
		statelist.empty();
		$('#state').text(videoStateTexts[video.readyState]);
		for(x in pr){
			statelist.append($('<li><storng>'+ pr[x]  + ' : ' + video[pr[x]] + '</strong></li>'));
		}
	},100);
});

播放介面的解決方案

雖然我們可以使用Javascript自行控制HTML5 Video的播放，也意味著我們可以自行開發更漂亮美觀的介面，但這終究會增加許多開發成本，目前已經有許多HTML5 Video Player，不僅提供漂亮的介面，甚至我們還可以根據需求自定播放器外觀。

Open Standard Media Player

非常專業且完整度極佳的HTML5 Video 播放器。

image

Video for Everybody!

簡單清爽的播放介面。

image

SublimeVideo

典雅的播放介面。

image 

Kaltura

能整合jQuery UI訂製介面。

image

OIPlayer jQuery plugin

jQuery的Plugin

image

參考資料

Tagged : , , , ,

你可能會感興趣

“開始HTML5 – Video” 目前共有 5 則迴響

  1. 當HTML5 來臨 你還在IE6? | Zimo9 Says:
    五月 1, 2010 at 7:13 下午

    [...] 色胚子部落- 開始HTML5 – Video [...]

    回覆
  2. Xiaoguang Says:
    六月 5, 2010 at 9:51 下午

    謝謝教學！讓我學到了許多東西…

    回覆
  3. albert Says:
    七月 7, 2010 at 9:44 上午

    你好，要怎样使用这个软体，请你可以教我吗？

    回覆

留下迴響





CAPTCHA 驗證圖片
*