目前,随着越来越多的浏览器开始支持更多的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> video> 在HTML5中,视频标签只需要添加 此外,在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; }; |
jQuery和CSS3定制HTML5视频播放器
最新推荐文章于 2024-03-31 22:00:49 发布
摘要: 随着越来越多的浏览器开始支持更多的HTML5新特性,开发者也逐渐关注HTML5的开发。在众多HTML5的新特性中,视频方面的新特性是很值得开发者和用户关注的。 ... ... ... ...