目前，随着越来越多的浏览器开始支持更多的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>
1.
2.
3.
4.
5.
6.
在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);
1.
2.
3.
4.
5.
6.
7.
接下来是设计PLAY和PAUSE(暂停按钮)，代码如下：
复制
<div class="control"> <a href="#" class="btnPlay">Play/Pausea> div>
1.
2.
3.
这里播放和暂停的按钮的jQuery事件代码如下：
复制
$('.btnPlay').on('click', function() { if(video[0].paused) { video[0].play(); } else { video[0].pause(); } return false; };
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
可以看到，这里可以通过video标签的paused方法判断视频是否已经暂停了，而用play方法则可以直接播放视频，这里判断的逻辑很简单，如果视频已经暂停，当再次按的时候则播放，反之亦然。
接下来，看下如何能显示当前的播放进度以及进行回放。HTML5中，也提供了回放的功能。我们先设计如何显示当前的播放进度，以及视频的总的时间长度，代码设计如下：
复制
<div class="progressTime"> Current play time: <span class="current">span> Video duration: <span class="duration">span> div>
1.
2.
3.
4.
而现在相关的jQuery事件中，必须判断通过loadedmetadata事件，去判断HTML5 Video的metadata元数据是否已经加载进来，然后就可以调用当前视频的时间和总长度了，代码如下：
复制
//获得视频的时间总长度 video.on('loadedmetadata', function() { $('.duration').text(video[0].duration)); }); // 更新当前HTML5视频播放时间 video.on('timeupdate', function() { $('.current').text(video[0].currentTime); });
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
接下来，我们设计一个视频播放的进度条，设计进度条的样式如下：
复制
<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>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
在如下的界面中，应用上面的样式
复制
<div class="progressBar"> <div class="timeBar">div> div>
1.
2.
3.
现在，我们把上面学到的知识整合一下，完善一下进度条，通过当前视频的播放时间除以视频的总时间，得出播放的进度百分比，然后通过进度条显示出来，如下代码：
复制
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+'%'); });
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
但这样显然还不足够，我们还要让进度条能够拖动，我们可以监听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; };
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.