除非你一直生活在一個(gè)偏遠(yuǎn)的島嶼上,過去一年左右的時(shí)間,你應(yīng)該已經(jīng)聽說過HTML5的各式炒作。HTML5將重塑富Web應(yīng)用的未來。
下面 Figure 1的示例展示了HTML5中video標(biāo)簽與傳統(tǒng)的object標(biāo)簽的不同.
Figure 1
1. <section>
2. <h1>使用HTML5的video標(biāo)簽播放視頻</h1>
3. <videosrc="video1.mp4">
4. </video>
5. </section>
6. <section>
7. <h1>使用Flash插件播放視頻</h1>
8. <objecttype="application/x-shockwave-flash"
9. data="player.swf"width="290"height="24">
10. <paramname="movie"value="player.swf">
11. </object>
12.</section>
那么重要的是什么呢? 這兩個(gè)示例很簡(jiǎn)單,也易于實(shí)現(xiàn)。因?yàn)?lt;視頻>標(biāo)記是一個(gè)用來播放媒體的標(biāo)準(zhǔn), 你不必猜測(cè)瀏覽器是否要安裝特定的某個(gè)版本插件。這個(gè)標(biāo)準(zhǔn)正是HTML之前最為缺少的那部分。
HTML5支持的媒體格式
HTML5支持AAC, MP3 和 Ogg Vorbis三種音頻格式，以及Ogg Theora, WebM 和MPEG-4三種視頻格式.
但并不是所有瀏覽器都支持所有的格式。如下表：
Figure 2瀏覽器支持的媒體格式
瀏覽器
視頻格式
音頻格式
Ogg Theora
H.264
VP8 (WebM)
Ogg Vorbis
MP3
Wav
Internet Explorer
手動(dòng)安裝
9.0
手動(dòng)安裝
No
Yes
No
Mozilla Firefox
3.5
No
4.0
Yes
No
Yes
Google Chrome
3.0
No
6.0
Yes
Yes
Yes
Safari
手動(dòng)安裝
3
手動(dòng)安裝
No
Yes
Yes
Opera
10.50
No
10.60
Yes
No
Yes
使用視頻標(biāo)簽<video>
在HTML5中播放視頻，直接使用<video>標(biāo)簽就可以了, 如下所示:
1. <videosrc="video.mp4"controls/>
src屬性 (
http://www.w3.org/TR/html5/video.html#the-source-element) 設(shè)備要播放視頻的名稱(可以多個(gè)), control的布爾值用來調(diào)整是否顯示播放控制欄. 完整的屬性列表如下所示:
Figure 3視頻相關(guān)的屬懷
屬性
值
描述
Muted
Muted
定義的音頻的初始狀態(tài).目前僅支持muted.
Crossorigin
定義當(dāng)前視頻是否是一個(gè)跨域的項(xiàng)目.
Mediagroup
ID
將多個(gè)視頻或音頻集合在一起，并結(jié)合MediaController實(shí)現(xiàn)同步控制.
Autoplay
Autoplay
如果指定，視頻會(huì)在準(zhǔn)備好(如已取得可播放視頻)后自動(dòng)播放.
Controls
Controls
添加播放控制及音量控制功能欄.
Height
Pixels
指定播放器的高度，以pixel為單位.
Loop
Loop
如果指定，視頻將重復(fù)播放.
Poster
url
指定視頻的預(yù)覽圖.
Preload
Preload
如果指定，視頻會(huì)在加頁面加載過程中被加載。當(dāng)Autoplay被指定時(shí)，會(huì)被忽略。
Src
url
目標(biāo)視頻的URL.
Width
Pixels
指定播放器的寬度，以pixel為單位.
下面是一使用了多個(gè)屬性的示例，也包括一個(gè)備用(fallback)的錯(cuò)誤信息(當(dāng)瀏覽器不支持video標(biāo)簽時(shí)顯示).
1. <videosrc="video.mp4"width="320"height="240"autoplaycontrolsloop>
2. Your browser does not support the video tag.
3. </video>
你也可以使用MIME指定視頻的編碼格式，如下：
1. <!-- H.264 Constrained baseline profile video (main and extended video compatible)
2. level 3 and Low-Complexity AAC audio in MP4 container -->
3. <source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
4. <!-- H.264 Extended profile video (baseline-compatible) level3 and Low-Complexity
5. AAC audioin MP4 container -->
6. <source src='video.mp4' type='video/mp4; codecs="avc1.58A01E, mp4a.40.2"'>
你也可使用JavaScript來設(shè)定這些屬性. 如下面的代碼示例:
<!—顯示控制欄的三種方式-->
<videocontrols>
<videocontrols="">
<videocontrols="controls">
// JavaScript中顯示控制欄的兩種方式
video.controls = true;
video.setAttribute
('controls',
'controls');
如果無法確定目標(biāo)瀏覽器是否能支持<video>或者你的視頻格式，你最好指定一個(gè)回退的信息，以告訴用戶為什么沒有到期望的內(nèi)容。如下所示：
1. <videocontrols>
2. <sourcesrc="video1.mp4"/>
3. <sourcesrc="video1.ogv"/>
4. <sourcesrc="video1.webm"/>
5. <p>This browser does not support HTML5 video</p>
6. </video>
如果你要確保視頻可以被播放，你可以按照以前的方式加入一個(gè)flash的object標(biāo)簽,如下：
1. <videocontrols>
2. <sourcesrc="video1.mp4"/>
3. <sourcesrc="video1.ogv"/>
4. <sourcesrc="video1.webm"/>
5. <objectdata="videoplayer.swf">
6. <paramname="flashvars"value="video1.mp4">
7. 您的瀏覽器對(duì)HTML5 Video 和 Flash 都不支持
8. </object>
9. </video>
也可以在JavaScript中使用canPlayType來檢測(cè)瀏覽器是否可以播放某個(gè)格式的視頻：
1. var video = document.getElementsByTagName('video')[0];
2. if (video.canPlayType)
3. { //支持video標(biāo)簽
4. if (video.canPlayType('video/ogg; codecs="theora, vorbis"'))
5. { // it may be able to play
}
6. else
7. {// the codecs or container are not supported
8. fallback(video);
9. }
10. }
如果希望有更明確清晰的提示，可以使用onerror事件監(jiān)聽器來報(bào)告一個(gè)錯(cuò)誤：
1. <video src="video.mp4"
2. onerror="fallback(this)">
3. 不支持<video>
4. </video>
使用poster,你可以在video播放區(qū)域顯示一張圖片來替代，它可以用來顯示視頻的預(yù)覽圖。下面是一個(gè)示例:
1. <video src="video1.mp4" poster="preview.jpg"</video>
最后，使用JavaScript和HTML,你就可以創(chuàng)建一個(gè)交互性的視頻播放器。Figure 4 展示如何使用JavaScript添加一個(gè)video并響應(yīng)用戶的控制操作.(譯注:比如Youtue就是采用動(dòng)態(tài)創(chuàng)建video控件的方式來提供視頻播放功能的。)
Figure 4 JavaScript對(duì)視頻的控制
1. var video = document.createElement('video');
2. video.src ='video1.mp4';
3. video.controls =true;
4. document.body.appendChild(video);
5. var video = new Video();
6. video.src ='video1.mp4';
7. var video = new Video('video1.mp4')
8. <script>
9. var video = document.getElementsByTagName('video')[0];
10. </script>
11. <inputtype="button"value="Play"onclick="video.play()">
12. <inputtype="button"value="Pause"onclick="video.pause()">
完整的事件和特性列表，參考
http://www.w3.org/TR/html5/video.html#playing-the-media-resource.
譯注: 作者的代碼可能會(huì)讓你有些疑問?？吹臅r(shí)候，要注意分辨作者可能是使用多種方式來實(shí)現(xiàn)同一個(gè)功能。以最后一個(gè)代碼為例，其中5~7行是1~2行的另兩種寫法。
以下是一份動(dòng)態(tài)加入video元件，并可以控制靜音的功能示例:
*muteVideo是靜音狀態(tài)切換函數(shù)
*playVideo函數(shù)在沒有video控件時(shí)會(huì)添加一個(gè)控件，如果已經(jīng)存在就播放。
[javascript]
view plaincopyprint?function addSourceToVideo(element,src,type)
{
var source = document.createElement('source');
source.src = src;
source.type= type;
element.appendChild(source);
}
function insertVideo(src,type,width,height)
{
var vid = document.createElement("video");
vid.controls="controls";
vid.width = width;
vid.height=height;
vid.id = "video_control";
vid.muted= false;
addSourceToVideo(vid,src,type);
document.getElementById("show").appendChild(vid);
}
function muteVideo()
{
var vid = document.getElementById("video_control");
if(vid == undefined)
return;
if (vid.muted==undefined || !vid.muted)
{
vid.muted = true;
}
else
{
vid.muted = false;
}
}
function playVideo()
{
var video = document.getElementById("video_control");
if(video==undefined)
{
insertVideo("files/happyfit2.mp4","video/mp4",604,256);
video = document.getElementById("video_control");
}
video.play();
}
參考:
掌握HTML5中的多媒體--音頻(audio)原文地址:
Working with Media in HTML5作者:Jason Beres
