HTML5+CSS3+JQuery打造自定义视频播放器

简介 HTML5的WebM，旨在帮助开发者为开放网络制作出世界级媒体格式，Opera, Firefox, Chrome和IE9都将支持VP8，而且Flash Player也将可以播放VP8，这就意味着我们很快就可以只制作一个版本的视频然后在所有主流浏览器上播放了。另外一个主要的问题就是如何构建自定义的HTML5 视频控制工具条 做为一个专业的web开发人员，我们创建一个视频播放器时一定希望它的外观在各个浏览器中看起来一致(consistent)，但是通过下面的图可以看到目前各个浏览器提供的视频控制工具条外观各不相同： 那就没办法了，我们得自己从头来创建这个控制工具条，利用HTML和CSS再加上一些图片实现起来并不算很难，另外通过HTML5多媒体元素提供的API我们可以很方便将创建的任何按钮与播放/暂停等事件进行绑定。 视频控制按钮 基本的视频控制工具条要包含一个播放/暂停按钮，一个进度条，一个计时器和一个音量控制按钮，我们将这些按钮放在                            00:00                                                   复制代码 注意，我们使用元素的class属性来代替ID属性是为了方便在一个页面上使用多个播放器。 打包成jQuery插件 创建好控制按钮后我们需要配合多媒体元素的API来实现视频控制的目的，正如前面提到的一样我们将我们的播放器打包成jQuery插件，这样可以很好的实现复用，代码如下： $.fn.gVideo = function(options) {         // build main options before element iteration         var defaults = {                 theme: 'simpledark',                 childtheme: ''         };         var options = $.extend(defaults, options);         // iterate and reformat each matched element         return this.each(function() {                 var $gVideo = $(this);                                  //create html structure                 //main wrapper                 var $video_wrap = $(' ').addClass('ghinda-video-player').addClass(options.theme).addClass(options.childtheme);                 //controls wraper                 var $video_controls = $(' 00:00 ');                                                                 $gVideo.wrap($video_wrap);                 $gVideo.after($video_controls); 复制代码 这里先假设您了解jQuery并知道如何创建一个jQuery插件，因为这个不在本文的讨论范围之内，在上面这段脚本中我们使用jQuery动态创建视频控制工具条的元素，接下来为了绑定事件我们需要获取对应的元素： //get newly created elements var $video_container = $gVideo.parent('.ghinda-video-player'); var $video_controls = $('.ghinda-video-controls', $video_container); var $ghinda_play_btn = $('.ghinda-video-play', $video_container); var $ghinda_video_seek = $('.ghinda-video-seek', $video_container); var $ghinda_video_timer = $('.ghinda-video-timer', $video_container); var $ghinda_volume = $('.ghinda-volume-slider', $video_container); var $ghinda_volume_btn = $('.ghinda-volume-button', $video_container); $video_controls.hide(); // keep the controls hidden 复制代码 这里我们通过className方式获取，先让工具条隐藏直到所有资源加载完成，现在来实现播放/暂停按钮： var gPlay = function() {         if($gVideo.attr('paused') == false) {                 $gVideo[0].pause();                                                 } else {                                                         $gVideo[0].play();                                         } }; $ghinda_play_btn.click(gPlay); $gVideo.click(gPlay); $gVideo.bind('play', function() {         $ghinda_play_btn.addClass('ghinda-paused-button'); }); $gVideo.bind('pause', function() {         $ghinda_play_btn.removeClass('ghinda-paused-button'); }); $gVideo.bind('ended', function() {         $ghinda_play_btn.removeClass('ghinda-paused-button'); }); 复制代码 大多数浏览器在右键点击视频时会提供一个独立的菜单，它也提供了视频控制功能，如果用户通过这个右键菜单控制视频那就会跟我们的自定义控件冲突，所以为了避免这一点我们需要绑定视频播放器自身的“播放”，“暂停”和“结束”事件，在事件处理函数中处理播放/暂停按钮，控制按钮的样式。 为了创建进度条的拖动块，我们使用了jQuery UI的Slider组件： var createSeek = function() {         if($gVideo.attr('readyState')) {                 var video_duration = $gVideo.attr('duration');                 $ghinda_video_seek.slider({                         value: 0,                         step: 0.01,                         orientation: "horizontal",                         range: "min",                         max: video_duration,                         animate: true,                                                                 slide: function(){                                                                                         seeksliding = true;                         },                         stop:function(e,ui){                                 seeksliding = false;                                                                                 $gVideo.attr("currentTime",ui.value);                         }                 });                 $video_controls.show();                                                 } else {                 setTimeout(createSeek, 150);         } }; createSeek(); 复制代码 正如你所看到的，这里我们写了一个递归函数，通过循环比较video的readyState属性来判断视频是否已经准备好，否则我们就不能获得视频的时长也无法创建滑动块，当视频准备好后我们初始化滑动块并显示控制工具条，下一步我们通过绑定video元素的timeupdate事件实现计时器功能： var gTimeFormat=function(seconds){         var m=Math.floor(seconds/60)<10?"0"+Math.floor(seconds/60):Math.floor(seconds/60);         var s=Math.floor(seconds-(m*60))<10?"0"+Math.floor(seconds-(m*60)):Math.floor(seconds-(m*60));         return m+":"+s; }; var seekUpdate = function() {         var currenttime = $gVideo.attr('currentTime');         if(!seeksliding) $ghinda_video_seek.slider('value', currenttime);         $ghinda_video_timer.text(gTimeFormat(currenttime));                                                         }; $gVideo.bind('timeupdate', seekUpdate); 复制代码 这里我们用seekUpdate函数获取video的currentTime属性值然后调用gTimeFormat函数进行格式化后得到当前播放的时间点。 至于音量控制控件我们还是利用jQuery UI的Slider组件然后利用自定义函数实现静音和取消静音的功能： $ghinda_volume.slider({         value: 1,         orientation: "vertical",         range: "min",         max: 1,         step: 0.05,         animate: true,         slide:function(e,ui){                 $gVideo.attr('muted',false);                 video_volume = ui.value;                 $gVideo.attr('volume',ui.value);         } }); var muteVolume = function() {         if($gVideo.attr('muted')==true) {                 $gVideo.attr('muted', false);                 $ghinda_volume.slider('value', video_volume);                                  $ghinda_volume_btn.removeClass('ghinda-volume-mute');                                                 } else {                 $gVideo.attr('muted', true);                 $ghinda_volume.slider('value', '0');                                  $ghinda_volume_btn.addClass('ghinda-volume-mute');         }; }; $ghinda_volume_btn.click(muteVolume); 复制代码 最后当我们自己的自定义视频控制工具条构造完成后需要移除