jQuery定制HTML 5视频播放器

发表于2016-05-16 14:17:54

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

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>
</video>

在HTML5中,视频标签只需要添加<video>标签即可,在上面的代码标签中,其中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.getElementById(‘videoID’);

也可以通过jQuery的方法,如下:

var video = $(‘#videoID’).get(0);

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

<div class=”control”>
<a href=”#” class=”btnPlay”>Play/Pause</a>
</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;
};


评论(0)

请先登录后再评论,如果没有账号请先注册

发表评论