簡介
HTML5的<video>標簽已經(jīng)被目前大多數(shù)主流瀏覽器所支持，包括還未正式發(fā)布的IE9也聲明將支持<video>標簽，利用瀏覽器原生特性嵌入視頻有很多好處，所以很多開發(fā)者想盡快用上，但是真正使用前還有些問題要考慮，尤其是 Opera/Firefox 和IE/Safari瀏覽器所支持的視頻編碼不同的問題，Google幾個月前發(fā)布的開源視頻編碼VP8有望能解決這一問題，另外Google還發(fā)布了開放網(wǎng)絡(luò)媒體項目WebM，旨在幫助開發(fā)者為開放網(wǎng)絡(luò)制作出世界級媒體格式，Opera, Firefox, Chrome和IE9都將支持VP8，而且Flash Player也將可以播放VP8，這就意味著我們很快就可以只制作一個版本的視頻然后在所有主流瀏覽器上播放了。另外一個主要的問題就是如何構(gòu)建自定義的HTML5<video>播放器，這是目前Flash Player的優(yōu)勢所在，利用Flash的IDE所提供的接口可以很方便的構(gòu)建一個個性化的視頻播放器，那HTML5的<video>標簽要怎樣才能實現(xiàn)呢？這個問題就是本文所要解決的！我們將開發(fā)一個HTML5<video>視頻播放器的jQuery插件，并且可以很方便的進行自定義，將分為以下幾個部分：
1.視頻控制工具條
2.視頻控制按鈕
3.打包成jQuery插件
4.外觀和體驗
5.自定義皮膚
視頻控制工具條
做為一個專業(yè)的web開發(fā)人員，我們創(chuàng)建一個視頻播放器時一定希望它的外觀在各個瀏覽器中看起來一致(consistent)，但是通過下面的圖可以看到目前各個瀏覽器提供的視頻控制工具條外觀各不相同：
那就沒辦法了，我們得自己從頭來創(chuàng)建這個控制工具條，利用HTML和CSS再加上一些圖片實現(xiàn)起來并不算很難，另外通過HTML5多媒體元素提供的API我們可以很方便將創(chuàng)建的任何按鈕與播放/暫停等事件進行綁定。
視頻控制按鈕
基本的視頻控制工具條要包含一個播放/暫停按鈕，一個進度條，一個計時器和一個音量控制按鈕，我們將這些按鈕放在<video>元素下面，并用一個div作為父容器：
<div class="ghinda-video-controls">? ?? ???<a class="ghinda-video-play" title="Play/Pause"></a>? ?? ???<div class="ghinda-video-seek"></div>? ?? ???<div class="ghinda-video-timer">00:00</div>? ?? ???<div class="ghinda-volume-box">? ?? ?? ?? ?? ? <div class="ghinda-volume-slider"></div>? ?? ?? ?? ?? ? <a class="ghinda-volume-button" title="Mute/Unmute"></a>? ?? ???</div></div>復制代碼
注意，我們使用元素的class屬性來代替ID屬性是為了方便在一個頁面上使用多個播放器。
打包成jQuery插件
創(chuàng)建好控制按鈕后我們需要配合多媒體元素的API來實現(xiàn)視頻控制的目的，正如前面提到的一樣我們將我們的播放器打包成jQuery插件，這樣可以很好的實現(xiàn)復用，代碼如下：
$.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() {10. ? ?? ?? ?? ?? ? var $gVideo = $(this);11. ? ?? ?? ?? ?? ??12. ? ?? ?? ?? ?? ? //create html structure13. ? ?? ?? ?? ?? ? //main wrapper14. ? ?? ?? ?? ?? ? var $video_wrap = $('<div></div>').addClass('ghinda-video-player').addClass(options.theme).addClass(options.childtheme);15. ? ?? ?? ?? ?? ? //controls wraper16. ? ?? ?? ?? ?? ? var $video_controls = $('<div class="ghinda-video-controls"><a class="ghinda-video-play" title="Play/Pause"></a><div class="ghinda-video-seek"></div><div class="ghinda-video-timer">00:00</div><div class="ghinda-volume-box"><div class="ghinda-volume-slider"></div><a class="ghinda-volume-button" title="Mute/Unmute"></a></div></div>');? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?17. ? ?? ?? ?? ?? ? $gVideo.wrap($video_wrap);18. ? ?? ?? ?? ?? ? $gVideo.after($video_controls);復制代碼
這里先假設(shè)您了解jQuery并知道如何創(chuàng)建一個jQuery插件，因為這個不在本文的討論范圍之內(nèi)，在上面這段腳本中我們使用jQuery動態(tài)創(chuàng)建視頻控制工具條的元素，接下來為了綁定事件我們需要獲取對應(yīng)的元素：
//get newly created elementsvar $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);?10. $video_controls.hide(); // keep the controls hidden
復制代碼
這里我們通過className方式獲取，先讓工具條隱藏直到所有資源加載完成，現(xiàn)在來實現(xiàn)播放/暫停按鈕：
var gPlay = function() {? ?? ???if($gVideo.attr('paused') == false) {? ?? ?? ?? ?? ? $gVideo[0].pause();? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ??? ?? ???} else {? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ??? ?? ?? ?? ?? ? $gVideo[0].play();? ?? ?? ?? ?? ?? ?? ?? ?? ?? ???? ?? ???}};?$ghinda_play_btn.click(gPlay);10. $gVideo.click(gPlay);
11. ?12. $gVideo.bind('play', function() {
13. ? ?? ???$ghinda_play_btn.addClass('ghinda-paused-button');14. });
15. ?16. $gVideo.bind('pause', function() {
17. ? ?? ???$ghinda_play_btn.removeClass('ghinda-paused-button');18. });
19. ?20. $gVideo.bind('ended', function() {
21. ? ?? ???$ghinda_play_btn.removeClass('ghinda-paused-button');22. });
復制代碼
大多數(shù)瀏覽器在右鍵點擊視頻時會提供一個獨立的菜單，它也提供了視頻控制功能，如果用戶通過這個右鍵菜單控制視頻那就會跟我們的自定義控件沖突，所以為了避免這一點我們需要綁定視頻播放器自身的“播放”，“暫停”和“結(jié)束”事件，在事件處理函數(shù)中處理播放/暫停按鈕，控制按鈕的樣式。
為了創(chuàng)建進度條的拖動塊，我們使用了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,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. };
24. ?25. createSeek();
復制代碼
正如你所看到的，這里我們寫了一個遞歸函數(shù)，通過循環(huán)比較video的readyState屬性來判斷視頻是否已經(jīng)準備好，否則我們就不能獲得視頻的時長也無法創(chuàng)建滑動塊，當視頻準備好后我們初始化滑動塊并顯示控制工具條，下一步我們通過綁定video元素的timeupdate事件實現(xiàn)計時器功能：
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);10. ? ?? ???$ghinda_video_timer.text(gTimeFormat(currenttime));? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ???11. };
12. ?13. $gVideo.bind('timeupdate', seekUpdate);
復制代碼
這里我們用seekUpdate函數(shù)獲取video的currentTime屬性值然后調(diào)用gTimeFormat函數(shù)進行格式化后得到當前播放的時間點。
至于音量控制控件我們還是利用jQuery UI的Slider組件然后利用自定義函數(shù)實現(xiàn)靜音和取消靜音的功能：
$ghinda_volume.slider({? ?? ???value: 1,? ?? ???orientation: "vertical",? ?? ???range: "min",? ?? ???max: 1,? ?? ???step: 0.05,? ?? ???animate: true,? ?? ???slide:function(e,ui){? ?? ?? ?? ?? ? $gVideo.attr('muted',false);10. ? ?? ?? ?? ?? ? video_volume = ui.value;11. ? ?? ?? ?? ?? ? $gVideo.attr('volume',ui.value);12. ? ?? ???}13. });
14. ?15. var muteVolume = function() {
16. ? ?? ???if($gVideo.attr('muted')==true) {17. ? ?? ?? ?? ?? ? $gVideo.attr('muted', false);18. ? ?? ?? ?? ?? ? $ghinda_volume.slider('value', video_volume);19. ? ?? ?? ?? ?? ??20. ? ?? ?? ?? ?? ? $ghinda_volume_btn.removeClass('ghinda-volume-mute');? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ??21. ? ?? ???} else {22. ? ?? ?? ?? ?? ? $gVideo.attr('muted', true);23. ? ?? ?? ?? ?? ? $ghinda_volume.slider('value', '0');24. ? ?? ?? ?? ?? ??25. ? ?? ?? ?? ?? ? $ghinda_volume_btn.addClass('ghinda-volume-mute');26. ? ?? ???};27. };
28. ?29. $ghinda_volume_btn.click(muteVolume);
復制代碼
最后當我們自己的自定義視頻控制工具條構(gòu)造完成后需要移除<video>標簽的controls屬性，這樣瀏覽器默認的工具條就被去掉了。
好了，我們的插件功能已經(jīng)全部完成了，調(diào)用方法：
$('video').gVideo();復制代碼
這會將我們的插件應(yīng)用到頁面上每一個video元素上。
外觀和體驗
好的，現(xiàn)在到了比較有意思的部分，也就是播放器的外觀和體驗了。當插件功能已經(jīng)完成后利用一點CSS就可以很容易地自定義樣式了，我們將全部使用CSS3來實現(xiàn)。
首先，我們給播放器主容器加一些樣式：
.ghinda-video-player {? ?? ???float: left;? ?? ???padding: 10px;? ?? ???border: 5px solid #61625d;? ?? ?? ?? ?? ??? ?? ???-moz-border-radius: 5px; /* FF1+ */? ?? ???-ms-border-radius: 5px; /* IE future proofing */? ?? ???-webkit-border-radius: 5px; /* Saf3+, Chrome */? ?? ???border-radius: 5px; /* Opera 10.5, IE 9 */10. ? ?? ???11. ? ?? ???background: #000000;12. ? ?? ???background-image: -moz-linear-gradient(top, #313131, #000000); /* FF3.6 */13. ? ?? ???background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #313131),color-stop(1, #000000)); /* Saf4+, Chrome */14. ? ?? ???15. ? ?? ???box-shadow: inset 0 15px 35px #535353;16. }
復制代碼
下一步，我們設(shè)置視頻控制工具條左邊浮動使它們水平對齊，利用CSS3的opacity和transitions我們給播放/暫停和靜音/取消靜音按鈕添加了非常不錯的懸浮效果：
.ghinda-video-play {? ?? ???display: block;? ?? ???width: 22px;? ?? ???height: 22px;? ?? ???margin-right: 15px;? ?? ???background: url(../images/play-icon.png) no-repeat;? ?? ???? ?? ???? ?? ???opacity: 0.7;? ?? ???10. ? ?? ???-moz-transition: all 0.2s ease-in-out; /* Firefox */11. ? ?? ???-ms-transition: all 0.2s ease-in-out; /* IE future proofing */12. ? ?? ???-o-transition: all 0.2s ease-in-out;??/* Opera */13. ? ?? ???-webkit-transition: all 0.2s ease-in-out; /* Safari and Chrome */14. ? ?? ???transition: all 0.2s ease-in-out;?15. }
16. ?17. .ghinda-paused-button {
18. ? ?? ???background: url(../images/pause-icon.png) no-repeat;19. }
20. ?21. .ghinda-video-play:hover {? ?? ???
22. ? ?? ???opacity: 1;23. }
復制代碼
如果您仔細看了前面那段根據(jù)視頻播放狀態(tài)(Playing/Paused)添加和移除播放/暫停按鈕樣式的JavaScript代碼，就會明白為什么.ghinda-paused-button為什么要重寫.ghinda-video-play的背景屬性了。
現(xiàn)在輪到滑動塊了，我們進度條和音量控制的滑動塊的實現(xiàn)都是利用了jQuery UI的Slider組件，這個組件它本身自帶了樣式，定義在jQuery UI對應(yīng)的css文件中，但是為了使滑動塊和播放器其他控件外觀保持一致我們?nèi)恐貙懥怂臉邮?#xff1a;
.ghinda-video-seek .ui-slider-handle {? ?? ???width: 15px;? ?? ???height: 15px;? ?? ???border: 1px solid #333;? ?? ???top: -4px;?? ?? ???-moz-border-radius:10px;? ?? ???-ms-border-radius:10px;? ?? ???-webkit-border-radius:10px;? ?? ???border-radius:10px;? ?? ???? ?? ???? ?? ???background: #e6e6e6;? ?? ???background-image: -moz-linear-gradient(top, #e6e6e6, #d5d5d5);? ?? ???background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #e6e6e6),color-stop(1, #d5d5d5));? ?? ???? ?? ???box-shadow: inset 0 -3px 3px #d5d5d5;? ?? ???}?.ghinda-video-seek .ui-slider-handle.ui-state-hover {? ?? ???background: #fff;}?.ghinda-video-seek .ui-slider-range {? ?? ???-moz-border-radius:15px;? ?? ???-ms-border-radius:15px;? ?? ???-webkit-border-radius:15px;? ?? ???border-radius:15px;? ?? ???? ?? ???background: #4cbae8;? ?? ???background-image: -moz-linear-gradient(top, #4cbae8, #39a2ce);? ?? ???background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #4cbae8),color-stop(1, #39a2ce));? ?? ???? ?? ???box-shadow: inset 0 -3px 3px #39a2ce;}復制代碼
這時候音量控制的滑動塊一直顯示在音量按鈕旁邊，我們需要將它改成默認隱藏，當鼠標懸浮在音量按鈕上再動態(tài)顯示出來，使用transitions來實現(xiàn)這個效果會是個不錯的的選擇：
.ghinda-volume-box {? ?? ???? ?? ???height: 30px;? ?? ???? ?? ???-moz-transition: all 0.1s ease-in-out; /* Firefox */? ?? ???-ms-transition: all 0.1s ease-in-out; /* IE future proofing */? ?? ???-o-transition: all 0.2s ease-in-out;??/* Opera */? ?? ???-webkit-transition: all 0.1s ease-in-out; /* Safari and Chrome */? ?? ???transition: all 0.1s ease-in-out;?}?.ghinda-volume-box:hover {? ?? ???? ?? ???height: 135px;? ?? ???padding-top: 5px;}?.ghinda-volume-slider {? ?? ???? ?? ???visibility: hidden;? ?? ???opacity: 0;? ?? ???? ?? ???-moz-transition: all 0.1s ease-in-out; /* Firefox */? ?? ???-ms-transition: all 0.1s ease-in-out;??/* IE future proofing */? ?? ???-o-transition: all 0.1s ease-in-out;??/* Opera */? ?? ???-webkit-transition: all 0.1s ease-in-out; /* Safari and Chrome */? ?? ???transition: all 0.1s ease-in-out;?}?.ghinda-volume-box:hover .ghinda-volume-slider {? ?? ???position: relative;? ?? ???visibility: visible;? ?? ???opacity: 1;}復制代碼
利用一些基礎(chǔ)的CSS屬性以及CSS3提供的新屬性我們打造了一個全新的播放器外觀
自定義皮膚
可能您已經(jīng)注意到，我們在編寫插件的時候已經(jīng)定義了一些默認選項，它們是theme和childtheme，可以在調(diào)用插件的時候根據(jù)需要方便的應(yīng)用自定義皮膚。
這里解釋下theme就是所有控件的一整套樣式定義，childtheme就是在theme基礎(chǔ)上重寫某些樣式，我們在調(diào)用插件的時候可以同時指定這兩個選項或者其中的一個：
$('video').gVideo({? ?? ?? ???childtheme:'smalldark'});復制代碼
我們寫了一個示例的皮膚smalldark，它只重寫了部分的樣式，顯示效果是這樣的：
總結(jié)
利用HTML5 video，JavaScript和CSS3打造自定義的視頻播放器真的非常容易，t實現(xiàn)工具條功能用JavaScrip，外觀和體驗交給CSS3，我們得到了一個功能強大并且易于定制的解決方案！
enjoy！
總結(jié)
以上是生活随笔為你收集整理的使用CSS3+JQuery打造自定义视频播放器的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。
