掌握HTML5中的多媒體--視頻(video)

handup 2015-10-27

展開(kāi)全文

除非你一直生活在一個(gè)偏遠(yuǎn)的島嶼上,過(guò)去一年左右的時(shí)間,你應(yīng)該已經(jīng)聽(tīng)說(shuō)過(guò)HTML5的各式炒作。HTML5將重塑富Web應(yīng)用的未來(lái)。

下面 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è)用來(lái)播放媒體的標(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./TR/html5/video.html#the-source-element) 設(shè)備要播放視頻的名稱(chēng)(可以多個(gè)), control的布爾值用來(lái)調(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ì)在加頁(yè)面加載過(guò)程中被加載。當(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來(lái)設(shè)定這些屬性. 如下面的代碼示例:

<!—顯示控制欄的三種方式-->

<videocontrols="">

<videocontrols="controls">

// JavaScript中顯示控制欄的兩種方式

video.controls = true;

video.setAttribute

('controls',

'controls');

如果無(wú)法確定目標(biāo)瀏覽器是否能支持<video>或者你的視頻格式，你最好指定一個(gè)回退的信息，以告訴用戶為什么沒(méi)有到期望的內(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來(lái)檢測(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)聽(tīng)器來(lái)報(bào)告一個(gè)錯(cuò)誤：

1. <video src="video.mp4"

2. onerror="fallback(this)">

3. 不支持<video>

4. </video>

使用poster,你可以在video播放區(qū)域顯示一張圖片來(lái)替代，它可以用來(lái)顯示視頻的預(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控件的方式來(lái)提供視頻播放功能的。)

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./TR/html5/video.html#playing-the-media-resource.

譯注: 作者的代碼可能會(huì)讓你有些疑問(wèn)?？吹臅r(shí)候，要注意分辨作者可能是使用多種方式來(lái)實(shí)現(xiàn)同一個(gè)功能。以最后一個(gè)代碼為例，其中5~7行是1~2行的另兩種寫(xiě)法。

以下是一份動(dòng)態(tài)加入video元件，并可以控制靜音的功能示例:

*muteVideo是靜音狀態(tài)切換函數(shù)

*playVideo函數(shù)在沒(méi)有video控件時(shí)會(huì)添加一個(gè)控件，如果已經(jīng)存在就播放。

[javascript] view plain copy print ?

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

本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買(mǎi)等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào)。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來(lái)自： handup > 《軟件》

舉報(bào)/認(rèn)領(lǐng)