定制HTML 5Video播放器
目前，隨著越來越多的瀏覽器開始支持更多的HTML5新特性，開發者也逐漸關注HTML5的開發。在眾多HTML5的新特性中，視頻方面的新特性是很值得開發者和用戶關注的。
現在，只需要有支持HTML5的瀏覽器，不需要FLASH或其他插件，都可以輕松的觀看視頻了。然而，由于各瀏覽器在對HTML5的支持上，會有少許的差異，因此為了有更好的兼容性，需要進行定制開發，這樣才能更兼顧各類的瀏覽器。在本文中，將介紹如何使用jQuery 和CSS3定制一個適合各瀏覽器觀看的視頻播放器。
本文的DEMO可以在這個地址觀看到(http://www.inwebson.com/demo/html5-video/demo1/)，相關代碼在(http://demo.inwebson.com/download/html5-video.zip)可以下載。
HTML5 Video標簽基礎
先來學習下HTML 5 Video標簽的基本用法，先看如下的例子代碼：
- <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中，視頻標簽只需要添加標簽即可，在上面的代碼標簽中，其中Src指定了視頻來源的格式，目前支持有MP4，webm和ogy格式，如果有其他視頻格式的話，可以通過一些視頻工具進行轉換(比如http://www.mirovideoconverter.com/上的軟件)。
此外，在HTML5標簽中，也可以寫一些文字，比如上面的“你的瀏覽器不支持視頻標簽”。
另外要注意的是，假如在ipad上使用video標簽，由于目前的bug，必須把mp4格式的文件放在video標簽的第一位，否則會出錯。
開始定制HTML 5 Video播放器插件
有了以上的基礎知識后，我們可以開始著手進行html 5 video播放器插件了。首先，很幸運的是HTML 5在視頻和音頻方面都有相關的API可以供調用操作(詳細見W3C的標準：http://www.w3.org/TR/html5/the-iframe-element.html#media-elements)。首先，我們看下如果通過jQuery獲得標準的html5 video標簽對象，注意這里我們使用的是DOM對象，否則不能通過API獲得video的各種屬性和方法。
- //獲得video標簽，這里是DOM對象
- var video = document.getElementById('videoID');
- 也可以通過jQuery的方法，如下：
- var video = $('#videoID').get(0);
接下來是設計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;
- };
可以看到，這里可以通過video標簽的paused方法判斷視頻是否已經暫停了，而用play方法則可以直接播放視頻，這里判斷的邏輯很簡單，如果視頻已經暫停，當再次按的時候則播放，反之亦然。
接下來，看下如何能顯示當前的播放進度以及進行回放。HTML5中，也提供了回放的功能。我們先設計如何顯示當前的播放進度，以及視頻的總的時間長度，代碼設計如下：
- <div class="progressTime">
- Current play time: <span class="current">span>
- Video duration: <span class="duration">span>
- div>
而現在相關的jQuery事件中，必須判斷通過loadedmetadata事件，去判斷HTML5 Video的metadata元數據是否已經加載進來，然后就可以調用當前視頻的時間和總長度了，代碼如下：
- //獲得視頻的時間總長度
- video.on('loadedmetadata', function() {
- $('.duration').text(video[0].duration));
- });
- // 更新當前HTML5視頻播放時間
- video.on('timeupdate', function() {
- $('.current').text(video[0].currentTime);
- });
接下來，我們設計一個視頻播放的進度條，設計進度條的樣式如下：
- <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>
在如下的界面中，應用上面的樣式
- <div class="progressBar">
- <div class="timeBar">div>
- div>
現在，我們把上面學到的知識整合一下，完善一下進度條，通過當前視頻的播放時間除以視頻的總時間，得出播放的進度百分比，然后通過進度條顯示出來，如下代碼：
- video.on('loadedmetadata', function() {
- $('.duration').text(video[0].duration));
- });
- video.on('timeupdate', function() {
- var currentPos = video[0].currentTime; //獲得當前播放時間
- var maxduration = video[0].duration; //獲得影片播放時間
- var percentage = 100 * currentPos / maxduration; //百分比
- $('.timeBar').css('width', percentage+'%');
- });
但這樣顯然還不足夠，我們還要讓進度條能夠拖動，我們可以監聽mousedown,mouseup和mousemove這幾個事件完成相關的功能，代碼如下：
- var timeDrag = false; /* 初始默認的拖動狀態為false/
- $('.progressBar').mousedown(function(e) {
- timeDrag = true;
- updatebar(e.pageX);
- });
- $(document).mouseup(function(e) {
- if(timeDrag) {
- timeDrag = false; //停止拖動，設置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
- //檢查拖動進度條的范圍是否合法
- 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;
- };
