一个不错的jQuery定制HTML 5视频播放器，有需要学习的朋友可参考。

HTML5 Video标签基础

先来学习下HTML 5

Video标签的基本用法，先看如下的例子代码：

代码如下

复制代码

Your browser does not support the video tag.

在HTML5中，视频标签只需要添加标签即可，在上面的代码标签中，其中Src指定了视频来源的格式，目前支持有MP4，webm和ogy格式，如果有其他视频格式的话，可以通过一些视频工具进行转换。

此外，在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.getElementByIdx_x(‘videoID’);

也可以通过jQuery的方法，如下：

代码如下

复制代码

var video =

$(‘#videoID’).get(0);

接下来是设计PLAY和PAUSE(暂停按钮)，代码如下：

这里播放和暂停的按钮的jQuery事件代码如下：

代码如下

复制代码

$(‘.btnPlay’).on(‘click’,

function() {

if(video[0].paused) {

video[0].play();

}

else {

video[0].pause();

}

return false;

};

可以看到，这里可以通过video标签的paused方法判断视频是否已经暂停了，而用play方法则可以直接播放视频，这里判断的逻辑很简单，如果视频已经暂停，当再次按的时候则播放，反之亦然。

接下来，看下如何能显示当前的播放进度以及进行回放。HTML5中，也提供了回放的功能。我们先设计如何显示当前的播放进度，以及视频的总的时间长度，代码设计如下：

代码如下

复制代码

Current play time:

Video duration:

而现在相关的jQuery事件中，必须判断通过loadedmetadata事件，去判断HTML5

Video的metadata元数据是否已经加载进来，然后就可以调用当前视频的时间和总长度了，代码如下：

代码如下

复制代码

//获得视频的时间总长度

video.on(‘loadedmetadata’, function() {

$(‘.duration’).text(video[0].duration));

});

// 更新当前HTML5视频播放时间

video.on(‘timeupdate’,

function() {

$(‘.current’).text(video[0].currentTime);

});

接下来，我们设计一个视频播放的进度条，设计进度条的样式如下：

代码如下

复制代码

在如下的界面中，应用上面的样式

代码如下

复制代码

现在，我们把上面学到的知识整合一下，完善一下进度条，通过当前视频的播放时间除以视频的总时间，得出播放的进度百分比，然后通过进度条显示出来，如下代码：

代码如下

复制代码

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;

};