程設筆記本: 開始HTML5

轉貼自：http://blog.colorbase.tw/web-development/947

在HTML5以前若我們要在網頁中播放影片時，需要使用ActiveX或Plug-in的方式來達到，例如：Flash Player、QuickTime等等，但在HTML5之後這些東西成了標準，我們不需再透過額外的外掛來達成，相信這也意味著Web的相關應用將更趨於豐富化。
現在就連 YouTube 也開始測試使用HTML5的Video來做為影片播放介面，因此在實際應用上雖然我們並不一定要走在時代的尖端，但瞭解一下新技術是有其必要的。

html5_video

HTML 5 Video 基礎

基本的 HTML5 Video 標記如下，我們可以透過 src 屬性來標明影片的URL：

view plain copy to clipboard print ?

<video src= 影片URL >很抱歉！您的瀏覽器不支援HTML5 Video</video>

<video src=影片URL >很抱歉！您的瀏覽器不支援HTML5 Video</video>

雖然上面的方式很簡短，但可惜的是因為目前各家瀏覽器在HTML5 Video的影片格式方面支援不一致，而導致我們若我們想要影片能夠兼容各種主流瀏覽器，我們必須提供這兩種主要的HTML5 Video 格式的影片檔案：

Theora/Vorbis (*.ogg ; *.ogv)
H.264 / AAC (*.mp4 ; *.m4v)

所以我們必須提供兩種格式讓瀏覽器自行依照自己支援的格式下載並播放，因此我們加入 <source> 來定義多個影片來源，而不是用 <video> 的 src 屬性，例如：

view plain copy to clipboard print ?

<video>
<source src="video.ogg">
<source src="video.m4v">
很抱歉！您的瀏覽器不支援HTML5 Video
</video>

<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 但這些屬性的各個瀏覽器的支援不一，因此目前不是很實用。

簡單的範例

以下的範例會在頁面載入完成後自動播放，並顯示瀏覽器內建的影片播放控制列，在載入完成並播放之前將會顯示所指定的預覽圖。

view plain copy to clipboard print ?

<video id="myvideo" autoplay="true" controls poster="preview.png" >
<source src="video.ogg">
<source src="video.m4v">
很抱歉！您的瀏覽器不知員HTML5 Video
</video>

<video id="myvideo" autoplay="true" 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。

接著我們就可以正常的使用 <video> ，當訪客的瀏覽器不支援 <video> 時 video4all 會自動幫我們將<video>替換成使用Flash的播放器來播放所指定的影片。

view plain copy to clipboard print ?

<video>
<source src="video.ogg" type="video/ogg" />
<source src="video.mp4" type="video/mp4" />
</video>

<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

view plain copy to clipboard print ?

<!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>

<!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

view plain copy to clipboard print ?

$(function(){
var video = $('#myvideo')[0];
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();
for(x in video){
$('#result2').append($('<li><storng>'+ x + ' : ' + video[x] + '</strong></li>'));
}
});
$('#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);
});

$(function(){
 var video = $('#myvideo')[0];
 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();
  for(x in video){
   $('#result2').append($('<li><storng>'+ x  + ' : ' + video[x] + '</strong></li>'));
  }
 });

 $('#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，不僅提供漂亮的介面，甚至我們還可以根據需求自定播放器外觀。

程設筆記本

2010年4月27日星期二

開始HTML5 – Video

HTML 5 Video 基礎

<video> 的屬性

src

autoplay

controls

width

height

poster

其他的屬性

簡單的範例

<video> 與瀏覽器的支援

HTML5 Video 成員

play()

pause()

currentTime

readyState

paused

muted

volume

ended

搭配jQuery的簡單HTML5 Video 控制範例

播放介面的解決方案

Open Standard Media Player

Video for Everybody!

SublimeVideo

Kaltura

OIPlayer jQuery plugin

沒有留言:

張貼留言

2010年4月27日 星期二

開始HTML5 – Video

HTML 5 Video 基礎

<video> 的屬性

src

autoplay

controls

width

height

poster

其他的屬性

簡單的範例

<video> 與瀏覽器的支援

HTML5 Video 成員

play()

pause()

currentTime

readyState

paused

muted

volume

ended

搭配jQuery的簡單HTML5 Video 控制範例

播放介面的解決方案

Open Standard Media Player

Video for Everybody!

SublimeVideo

Kaltura

OIPlayer jQuery plugin

沒有留言:

張貼留言

2010年4月27日星期二