定制HTML 5Video播放器
目前，隨著越來(lái)越多的瀏覽器開(kāi)始支持更多的HTML5新特性，開(kāi)發(fā)者也逐漸關(guān)注HTML5的開(kāi)發(fā)。在眾多HTML5的新特性中，視頻方面的新特性是很值得開(kāi)發(fā)者和用戶(hù)關(guān)注的。
現(xiàn)在，只需要有支持HTML5的瀏覽器，不需要FLASH或其他插件，都可以輕松的觀看視頻了。然而，由于各瀏覽器在對(duì)HTML5的支持上，會(huì)有少許的差異，因此為了有更好的兼容性，需要進(jìn)行定制開(kāi)發(fā)，這樣才能更兼顧各類(lèi)的瀏覽器。在本文中，將介紹如何使用jQuery 和CSS3定制一個(gè)適合各瀏覽器觀看的視頻播放器。
本文的DEMO可以在這個(gè)地址觀看到(http://www.inwebson.com/demo/html5-video/demo1/)，相關(guān)代碼在(http://demo.inwebson.com/download/html5-video.zip)可以下載。
HTML5 Video標(biāo)簽基礎(chǔ)
先來(lái)學(xué)習(xí)下HTML 5 Video標(biāo)簽的基本用法，先看如下的例子代碼：
- <video id="myVideo" controls poster="video.jpg" width="600" height="400" >
- <source src="video.mp4" type="video/mp4" />
- <source src="video.webm" type="video/webM" />
- <source src="video.ogv" type="video/ogg" />
- <p>Your browser does not support the video tag.p>
- deo>
在HTML5中，視頻標(biāo)簽只需要添加標(biāo)簽即可，在上面的代碼標(biāo)簽中，其中Src指定了視頻來(lái)源的格式，目前支持有MP4，webm和ogy格式，如果有其他視頻格式的話，可以通過(guò)一些視頻工具進(jìn)行轉(zhuǎn)換(比如http://www.mirovideoconverter.com/上的軟件)。
此外，在HTML5標(biāo)簽中，也可以寫(xiě)一些文字，比如上面的“你的瀏覽器不支持視頻標(biāo)簽”。
另外要注意的是，假如在ipad上使用video標(biāo)簽，由于目前的bug，必須把mp4格式的文件放在video標(biāo)簽的第一位，否則會(huì)出錯(cuò)。
開(kāi)始定制HTML 5 Video播放器插件
有了以上的基礎(chǔ)知識(shí)后，我們可以開(kāi)始著手進(jìn)行html 5 video播放器插件了。首先，很幸運(yùn)的是HTML 5在視頻和音頻方面都有相關(guān)的API可以供調(diào)用操作(詳細(xì)見(jiàn)W3C的標(biāo)準(zhǔn)：http://www.w3.org/TR/html5/the-iframe-element.html#media-elements)。首先，我們看下如果通過(guò)jQuery獲得標(biāo)準(zhǔn)的html5 video標(biāo)簽對(duì)象，注意這里我們使用的是DOM對(duì)象，否則不能通過(guò)API獲得video的各種屬性和方法。
- //獲得video標(biāo)簽，這里是DOM對(duì)象
- var video = document.getElementById('videoID');
- 也可以通過(guò)jQuery的方法，如下：
- var video = $('#videoID').get(0);
接下來(lái)是設(shè)計(jì)PLAY和PAUSE(暫停按鈕)，代碼如下：
- <div class="control">
- <a href="#" class="btnPlay">Play/Pausea>
- div>
這里播放和暫停的按鈕的jQuery事件代碼如下：
- $('.btnPlay').on('click', function() {
- if(video[0].paused) {
- video[0].play();
- }
- else {
- video[0].pause();
- }
- return false;
- };
可以看到，這里可以通過(guò)video標(biāo)簽的paused方法判斷視頻是否已經(jīng)暫停了，而用play方法則可以直接播放視頻，這里判斷的邏輯很簡(jiǎn)單，如果視頻已經(jīng)暫停，當(dāng)再次按的時(shí)候則播放，反之亦然。
接下來(lái)，看下如何能顯示當(dāng)前的播放進(jìn)度以及進(jìn)行回放。HTML5中，也提供了回放的功能。我們先設(shè)計(jì)如何顯示當(dāng)前的播放進(jìn)度，以及視頻的總的時(shí)間長(zhǎng)度，代碼設(shè)計(jì)如下：
- <div class="progressTime">
- Current play time: <span class="current">span>
- Video duration: <span class="duration">span>
- div>
而現(xiàn)在相關(guān)的jQuery事件中，必須判斷通過(guò)loadedmetadata事件，去判斷HTML5 Video的metadata元數(shù)據(jù)是否已經(jīng)加載進(jìn)來(lái)，然后就可以調(diào)用當(dāng)前視頻的時(shí)間和總長(zhǎng)度了，代碼如下：
- //獲得視頻的時(shí)間總長(zhǎng)度
- video.on('loadedmetadata', function() {
- $('.duration').text(video[0].duration));
- });
- // 更新當(dāng)前HTML5視頻播放時(shí)間
- video.on('timeupdate', function() {
- $('.current').text(video[0].currentTime);
- });
接下來(lái)，我們?cè)O(shè)計(jì)一個(gè)視頻播放的進(jìn)度條，設(shè)計(jì)進(jìn)度條的樣式如下：
- <style>
- .progressBar
- {
- position: relative;
- width: 100%;
- height: height:10px;
- backgroud-color: #000;
- }
- .timeBar
- {
- position: absolute;
- top: 0;
- left: 0;
- width: 0;
- height: 100%;
- background-color: #ccc;
- }
- style>
在如下的界面中，應(yīng)用上面的樣式
- <div class="progressBar">
- <div class="timeBar">div>
- div>
現(xiàn)在，我們把上面學(xué)到的知識(shí)整合一下，完善一下進(jìn)度條，通過(guò)當(dāng)前視頻的播放時(shí)間除以視頻的總時(shí)間，得出播放的進(jìn)度百分比，然后通過(guò)進(jìn)度條顯示出來(lái)，如下代碼：
- video.on('loadedmetadata', function() {
- $('.duration').text(video[0].duration));
- });
- video.on('timeupdate', function() {
- var currentPos = video[0].currentTime; //獲得當(dāng)前播放時(shí)間
- var maxduration = video[0].duration; //獲得影片播放時(shí)間
- var percentage = 100 * currentPos / maxduration; //百分比
- $('.timeBar').css('width', percentage+'%');
- });
但這樣顯然還不足夠，我們還要讓進(jìn)度條能夠拖動(dòng)，我們可以監(jiān)聽(tīng)mousedown,mouseup和mousemove這幾個(gè)事件完成相關(guān)的功能，代碼如下：
- var timeDrag = false; /* 初始默認(rèn)的拖動(dòng)狀態(tài)為false/
- $('.progressBar').mousedown(function(e) {
- timeDrag = true;
- updatebar(e.pageX);
- });
- $(document).mouseup(function(e) {
- if(timeDrag) {
- timeDrag = false; //停止拖動(dòng)，設(shè)置timeDrag為false
- updatebar(e.pageX);
- }
- });
- $(document).mousemove(function(e) {
- if(timeDrag) {
- updatebar(e.pageX);
- }
- });
- var updatebar = function(x) {
- var progress = $('.progressBar');
- var maxduration = video[0].duration;
- var position = x - progress.offset().left;
- var percentage = 100 * position
- //檢查拖動(dòng)進(jìn)度條的范圍是否合法
- if(percentage > 100) {
- percentage = 100;
- }
- if(percentage < 0) {
- percentage = 0;
- }
- //Update progress bar and video currenttime
- $('.timeBar').css('width', percentage+'%');
- video[0].currentTime = maxduration * percentage / 100;
- };
