定制HTML5Video播放器

目前，随着越来越多的浏览器开始支持更多的HTML5新特性，开发者也逐渐关注HTML5的开发。在众多HTML5的新特性中，视频方面的新特性是很值得开发者和用户关注的。

成都创新互联长期为上千客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为湖里企业提供专业的网站设计制作、成都网站制作，湖里网站改版等技术服务。拥有十多年丰富建站经验和众多成功案例,为您定制开发。

现在，只需要有支持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标签的基本用法，先看如下的例子代码：

 
 
 
    
  
  
  
  1.  
    2.   
  
  
  2.    
    3.   
  
  
  3.    
    4.   
  
  
  4.    
    5.   
  
  
  5.   
    Your browser does not support the video tag.p> 
    6.   
  
  
  6. deo> 
    7.

在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的各种属性和方法。

 
 
 
    
  
  
  
  1. 　　//获得video标签，这里是DOM对象  
    2.   
  
  
  2.  
    3.   
  
  
  3. 　　var video = document.getElementById('videoID');  
    4.   
  
  
  4.  
    5.   
  
  
  5. 　　也可以通过jQuery的方法，如下：  
    6.   
  
  
  6.  
    7.   
  
  
  7. 　　var video = $('#videoID').get(0);  
    8.

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

 
 
 
    
  
  
  
  1.  
    2.   
  
  
  2.     Play/Pausea> 
    3.   
  
  
  3. div> 
    4.

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

 
 
 
    
  
  
  
  1. $('.btnPlay').on('click', function() {  
    2.   
  
  
  2.  
    3.   
  
  
  3. 　　if(video[0].paused) {  
    4.   
  
  
  4.  
    5.   
  
  
  5. 　　video[0].play();  
    6.   
  
  
  6.  
    7.   
  
  
  7. 　　}  
    8.   
  
  
  8.  
    9.   
  
  
  9. 　　else {  
    10.   
  
  
  10.  
    11.   
  
  
  11. 　　video[0].pause();  
    12.   
  
  
  12.  
    13.   
  
  
  13. 　　}  
    14.   
  
  
  14.  
    15.   
  
  
  15. 　　return false;  
    16.   
  
  
  16.  
    17.   
  
  
  17. 　　}; 
    18.

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

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

 
 
 
    
  
  
  
  1.  
    2.   
  
  
  2.     Current play time: span> 
    3.   
  
  
  3.     Video duration: span> 
    4.   
  
  
  4. div> 
    5.

而现在相关的jQuery事件中，必须判断通过loadedmetadata事件，去判断HTML5 Video的metadata元数据是否已经加载进来，然后就可以调用当前视频的时间和总长度了，代码如下：

 
 
 
    
  
  
  
  1. 　//获得视频的时间总长度  
    2.   
  
  
  2.  
    3.   
  
  
  3. 　　video.on('loadedmetadata', function() {  
    4.   
  
  
  4.  
    5.   
  
  
  5. 　　$('.duration').text(video[0].duration));  
    6.   
  
  
  6.  
    7.   
  
  
  7. 　　});  
    8.   
  
  
  8.  
    9.   
  
  
  9. 　　// 更新当前HTML5视频播放时间  
    10.   
  
  
  10.  
    11.   
  
  
  11. 　　video.on('timeupdate', function() {  
    12.   
  
  
  12.  
    13.   
  
  
  13. 　　$('.current').text(video[0].currentTime);  
    14.   
  
  
  14.  
    15.   
  
  
  15. 　　});  
    16.

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