html css视频播放器,jQuery和CSS 3定制HTML 5视频播放器

【IT168 技术】目前，随着越来越多的浏览器开始支持更多的HTML5新特性，开发者也逐渐关注HTML5的开发。在众多HTML5的新特性中，视频方面的新特性是很值得开发者和用户关注的。现在，只需要有支持HTML5的浏览器，不需要FLASH或其他插件，都可以轻松的观看视频了。然而，由于各浏览器在对HTML5的支持上，会有少许的差异，因此为了有更好的兼容性，需要进行定制开发，这样才能更兼顾各类的浏览器。在本文中，将介绍如何使用jQuery 和CSS3定制一个适合各浏览器观看的视频播放器。

HTML5 Video标签基础

先来学习下HTML 5 Video标签的基本用法，先看如下的例子代码：

Your browser does not support the video tag.

在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(暂停按钮)，代码如下：

Play/Pause