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

来源：http://www.html5china.com/HTML5features/video/201109206_1994.html

简介HTML5的<video>标签已经被目前大多数主流浏览器所支持，包括还未正式发布的IE9也声明将支持<video>标签，利用浏览器原生特性嵌入视频有很多好处，所以很多开发者想尽快用上，但是真正使用前还有些问题要考虑，尤其是 Opera/Firefox 和IE/Safari浏览器所支持的视频编码不同的问题，Google几个月前发布的开源视频编码VP8有望能解决这一问题，另外Google还发布了开放网络媒体项目WebM，旨在帮助开发者为开放网络制作出世界级媒体格式，Opera, Firefox, Chrome和IE9都将支持VP8，而且Flash Player也将可以播放VP8，这就意味着我们很快就可以只制作一个版本的视频然后在所有主流浏览器上播放了。另外一个主要的问题就是如何构建自定义的HTML5<video>播放器，这是目前Flash Player的优势所在，利用Flash的IDE所提供的接口可以很方便的构建一个个性化的视频播放器，那HTML5的<video>标签要怎样才能实现呢？这个问题就是本文所要解决的！我们将开发一个HTML5<video>视频播放器的jQuery插件，并且可以很方便的进行自定义，将分为以下几个部分：1.视频控制工具条2.视频控制按钮3.打包成jQuery插件4.外观和体验5.自定义皮肤

视频控制工具条做为一个专业的web开发人员，我们创建一个视频播放器时一定希望它的外观在各个浏览器中看起来一致(consistent)，但是通过下面的图可以看到目前各个浏览器提供的视频控制工具条外观各不相同：那就没办法了，我们得自己从头来创建这个控制工具条，利用HTML和CSS再加上一些图片实现起来并不算很难，另外通过HTML5多媒体元素提供的API我们可以很方便将创建的任何按钮与播放/暂停等事件进行绑定。视频控制按钮基本的视频控制工具条要包含一个播放/暂停按钮，一个进度条，一个计时器和一个音量控制按钮，我们将这些按钮放在<video>元素下面，并用一个div作为父容器：

1. <divclass="ghinda-video-controls">
2. <aclass="ghinda-video-play"title="Play/Pause"></a>
3. <divclass="ghinda-video-seek"></div>
4. <divclass="ghinda-video-timer">00:00</div>
5. <divclass="ghinda-volume-box">
6. <divclass="ghinda-volume-slider"></div>
7. <aclass="ghinda-volume-button"title="Mute/Unmute"></a>
8. </div>
9. </div>

注意，我们使用元素的class属性来代替ID属性是为了方便在一个页面上使用多个播放器。打包成jQuery插件创建好控制按钮后我们需要配合多媒体元素的API来实现视频控制的目的，正如前面提到的一样我们将我们的播放器打包成jQuery插件，这样可以很好的实现复用，代码如下：

1. $.fn.gVideo=function(options){
2. //buildmainoptionsbeforeelementiteration
3. vardefaults={
4. theme:'simpledark',
5. childtheme:''
6. };
7. varoptions=$.extend(defaults,options);
8. //iterateandreformateachmatchedelement
9. returnthis.each(function(){
10. var$gVideo=$(this);
12. //createhtmlstructure
13. //mainwrapper
14. var$video_wrap=$('<div></div>').addClass('ghinda-video-player').addClass(options.theme).addClass(options.childtheme);
15. //controlswraper
16. var$video_controls=$('<divclass="ghinda-video-controls"><aclass="ghinda-video-play"title="Play/Pause"></a><divclass="ghinda-video-seek"></div><divclass="ghinda-video-timer">00:00</div><divclass="ghinda-volume-box"><divclass="ghinda-volume-slider"></div><aclass="ghinda-volume-button"title="Mute/Unmute"></a></div></div>');
17. $gVideo.wrap($video_wrap);
18. $gVideo.after($video_controls);

1. //getnewlycreatedelements
2. var$video_container=$gVideo.parent('.ghinda-video-player');
3. var$video_controls=$('.ghinda-video-controls',$video_container);
4. var$ghinda_play_btn=$('.ghinda-video-play',$video_container);
5. var$ghinda_video_seek=$('.ghinda-video-seek',$video_container);
6. var$ghinda_video_timer=$('.ghinda-video-timer',$video_container);
7. var$ghinda_volume=$('.ghinda-volume-slider',$video_container);
8. var$ghinda_volume_btn=$('.ghinda-volume-button',$video_container);
10. $video_controls.hide();//keepthecontrolshidden

1. vargPlay=function(){
2. if($gVideo.attr('paused')==false){
3. $gVideo[0].pause();
4. }else{
5. $gVideo[0].play();
6. }
7. };
9. $ghinda_play_btn.click(gPlay);
10. $gVideo.click(gPlay);
12. $gVideo.bind('play',function(){
13. $ghinda_play_btn.addClass('ghinda-paused-button');
14. });
16. $gVideo.bind('pause',function(){
17. $ghinda_play_btn.removeClass('ghinda-paused-button');
18. });
20. $gVideo.bind('ended',function(){
21. $ghinda_play_btn.removeClass('ghinda-paused-button');
22. });

为了创建进度条的拖动块，我们使用了jQuery UI的Slider组件：

1. varcreateSeek=function(){
2. if($gVideo.attr('readyState')){
3. varvideo_duration=$gVideo.attr('duration');
4. $ghinda_video_seek.slider({
5. value:0,
6. step:0.01,
7. orientation:"horizontal",
8. range:"min",
9. max:video_duration,
10. animate:true,
11. slide:function(){
12. seeksliding=true;
13. },
14. stop:function(e,ui){
15. seeksliding=false;
16. $gVideo.attr("currentTime",ui.value);
17. }
18. });
19. $video_controls.show();
20. }else{
21. setTimeout(createSeek,150);
22. }
23. };
25. createSeek();

1. vargTimeFormat=function(seconds){
2. varm=Math.floor(seconds/60)<10?"0"+Math.floor(seconds/60):Math.floor(seconds/60);
3. vars=Math.floor(seconds-(m*60))<10?"0"+Math.floor(seconds-(m*60)):Math.floor(seconds-(m*60));
4. returnm+":"+s;
5. };
7. varseekUpdate=function(){
8. varcurrenttime=$gVideo.attr('currentTime');
9. if(!seeksliding)$ghinda_video_seek.slider('value',currenttime);
10. $ghinda_video_timer.text(gTimeFormat(currenttime));
11. };
13. $gVideo.bind('timeupdate',seekUpdate);

至于音量控制控件我们还是利用jQuery UI的Slider组件然后利用自定义函数实现静音和取消静音的功能：

1. $ghinda_volume.slider({
2. value:1,
3. orientation:"vertical",
4. range:"min",
5. max:1,
6. step:0.05,
7. animate:true,
8. slide:function(e,ui){
9. $gVideo.attr('muted',false);
10. video_volume=ui.value;
11. $gVideo.attr('volume',ui.value);
12. }
13. });
15. varmuteVolume=function(){
16. if($gVideo.attr('muted')==true){
17. $gVideo.attr('muted',false);
18. $ghinda_volume.slider('value',video_volume);
20. $ghinda_volume_btn.removeClass('ghinda-volume-mute');
21. }else{
22. $gVideo.attr('muted',true);
23. $ghinda_volume.slider('value','0');
25. $ghinda_volume_btn.addClass('ghinda-volume-mute');
26. };
27. };
29. $ghinda_volume_btn.click(muteVolume);

好了，我们的插件功能已经全部完成了，调用方法：

1. $('video').gVideo();

外观和体验好的，现在到了比较有意思的部分，也就是播放器的外观和体验了。当插件功能已经完成后利用一点CSS就可以很容易地自定义样式了，我们将全部使用CSS3来实现。首先，我们给播放器主容器加一些样式：

1. .ghinda-video-player{
2. float:left;
3. padding:10px;
4. border:5pxsolid#61625d;
6. -moz-border-radius:5px;/*FF1+*/
7. -ms-border-radius:5px;/*IEfuturePRoofing*/
8. -webkit-border-radius:5px;/*Saf3+,Chrome*/
9. border-radius:5px;/*Opera10.5,IE9*/
11. background:#000000;
12. background-image:-moz-linear-gradient(top,#313131,#000000);/*FF3.6*/
13. background-image:-webkit-gradient(linear,lefttop,leftbottombottom,color-stop(0,#313131),color-stop(1,#000000));/*Saf4+,Chrome*/
15. box-shadow:inset015px35px#535353;
16. }

1. .ghinda-video-play{
2. display:block;
3. width:22px;
4. height:22px;
5. margin-right:15px;
6. background:url(../images/play-icon.png)no-repeat;
8. opacity:0.7;
10. -moz-transition:all0.2sease-in-out;/*Firefox*/
11. -ms-transition:all0.2sease-in-out;/*IEfuturep