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

原文发表在：http://tech.it168.com/a2012/0426/1342/000001342700_all.shtml
为本人编译作品，请忽转载


     目前，随着越来越多的浏览器开始支持更多的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" />
    Your browser does not support the video tag.

</video>

　　在HTML5中，视频标签只需要添加<video>标签即可，在上面的代码标签中，其中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(暂停按钮)，代码如下：

<div class="control">
    Play/Pause
</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;

　　};






　　完成影片加载的缓冲进度条

　　在视频加载完成前，我们希望能完成一个加载影片进度的缓冲进度条，以告诉用户，当前视频已经加载了多少，还有多少时间就可以播放，HTML5 视频标签中，其实已经有progress事件可以进行监听，但看上去在chrome上有小BUG，所以我们改用传统的setimeout方法进行判断，增加的加载进度缓冲的CSS代码如下：

<style>
.progressBar {
position: relative;
width: 100%;
height: height:10px;
backgroud-color: #000;
}
.bufferBar {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background-color: #ccc;
}
</style>
<div class="progressBar">
<div class="bufferBar"></div>
</div>
jQuery事件代码如下：

var startBuffer = function() {
var maxduration = video[0].duration;
var currentBuffer = video[0].buffered.end(0);
var percentage = 100 * currentBuffer / maxduration;
$('.bufferBar').css('width', percentage+'%');
if(currentBuffer < maxduration) {
setTimeout(startBuffer, 500);
}
};
setTimeout(startBuffer, 500);

　　jQuery事件代码如下：

var startBuffer = function() {
var maxduration = video[0].duration;
var currentBuffer = video[0].buffered.end(0);
var percentage = 100 * currentBuffer / maxduration;
$('.bufferBar').css('width', percentage+'%');
if(currentBuffer < maxduration) {
setTimeout(startBuffer, 500);
}
};
setTimeout(startBuffer, 500);

　　在上面的代码中，通过video[0].buffered.end(0);，使用HTML 5 Video标签的buffered属性，能读出视频已加载的部分，最后通过setimeout方法每隔0.5秒继续加载视频。

　　声音按钮的制作

　　除了视频外，声音是必不可少的，在这里我们要设计两种声音按钮，一个是静音/打开的，一个是控制音量大小的。界面设计如下：

Mute/Unmute
<div class="volumeBar">
<div class="volume"></div>
</div>

　　相关的jQuery控制代码如下：

//静音（打开音量）的按钮设计
$('.muted').click(function() {
video[0].muted = !video[0].muted;
return false;
});
//控制音量大小
$('.volumeBar').on('mousedown', function(e) {
var position = e.pageX - volume.offset().left;
var percentage = 100 * position / volume.width();
$('.volumeBar').css('width', percentage+'%');
video[0].volume = percentage / 100;
});

　　其中，通过使用HTML 5 Video标签中的muted方法，来去控制声音是否打开和关闭，而控制音量大小的原理，其实跟之前的控制进度条的原理大致一样，通过判断mousedown事件进行判断。

　　快进，快退功能的实现

　　HTML 5 Video标准中，提供了快进，快退等功能的API，但可惜目前Fire Fox没能实现，全部支持功能的是Safri浏览器，我们还是来看下相关的代码，首先是设计这些按钮的界面：

//静音（打开音量）的按钮设计
$('.muted').click(function() {
video[0].muted = !video[0].muted;
return false;
});
//控制音量大小
$('.volumeBar').on('mousedown', function(e) {
var position = e.pageX - volume.offset().left;
var percentage = 100 * position / volume.width();
$('.volumeBar').css('width', percentage+'%');
video[0].volume = percentage / 100;
});



　　可以看到，其中调用的是video标签中的playbackrate方法，设定一个数值，来表示播放的速度，如果是负数则表示回退。

　　此外，HTML 5 Video标签中还有不少相关的事件，这些事件对我们设计上是很有帮助的，下面列举一些：

HTML5 video ended Event
　　-当视频结束后，触发该事件.

HTML5 video canplay Event
　　如果视频能播放，则触发该事件，即使视频还在加载缓冲中。

　HTML5 video canplaythrough Event

　　- 当整个视频加载完毕能完整播放时，触发该事件

HTML5 video seeking Event

　　- 当视频中进行片段寻找时触发该事件

HTML5 video waiting Event
　　- 当视频中等待进行数据加载时，触发该事件

　　全屏及灯光效果

　　现在的视频观看，还需要有全屏及关灯的效果(即减暗屏幕的对比度，突出显示视频)，这些在HTML 5中都可以实现，首先看的是全屏的效果：

$('.fullscreen').on('click', function() {

　　//对Webkit内核的浏览器

　　video[0].webkitEnterFullscreen();

　　//对于 FireFox浏览器

　　video[0].mozRequestFullScreen();

　　return false;

　　});




　　而对于关灯的效果，其实也就是一个CSS的应用，对透明度等进行设置：

$('.btnLight').click(function() {

　　if($(this).hasClass('on')) {

　　$(this).removeClass('on');

　　$('body').append('

　　');

　　$('.overlay').css({

　　'position':'absolute',

　　'width':100+'%',

　　'height':$(document).height(),

　　'background':'#000',

　　'opacity':0.9,

　　'top':0,

　　'left':0,

　　'z-index':999

　　});

　　$('#myVideo').css({

　　'z-index':1000

　　});

　　}

　　else {

　　$(this).addClass('on');

　　$('.overlay').remove();

　　}

　　return false;

　　});


　　小结

　　本文介绍了HTML 5 Video标签的基础知识，然后结合jQuery和CSS 3，充分利用HTML 5 Video标签提供的API，进行了一些个性化的定制工作开发，读者可以在此基础上丰富这个应用，打造更绚丽的HTML 5 Video视频播放器。