jQuery和CSS3定製HTML5視頻播放器

摘要: 隨着越來越多的瀏覽器開始支持更多的HTML5新特性，開發者也逐漸關注HTML5的開發。在衆多HTML5的新特性中，視頻方面的新特性是很值得開發者和用戶關注的。 ... ... ... ...

目前，隨着越來越多的瀏覽器開始支持更多的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>
video>

　　在HTML5中，視頻標籤只需要添加

　　此外，在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;

　　};