當(dāng)前位置：首頁(yè) > 前端技术 > HTML >内容正文

HTML

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

發(fā)布時(shí)間：2023/12/20 HTML 23 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTML5+CSS3+JQuery打造自定义视频播放器小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

簡(jiǎn)介
HTML5的<video>標(biāo)簽已經(jīng)被目前大多數(shù)主流瀏覽器所支持，包括還未正式發(fā)布的IE9也聲明將支持<video>標(biāo)簽，利用瀏覽器原生特性嵌入視頻有很多好處，所以很多開(kāi)發(fā)者想盡快用上，但是真正使用前還有些問(wèn)題要考慮，尤其是 Opera/Firefox 和IE/Safari瀏覽器所支持的視頻編碼不同的問(wèn)題，Google幾個(gè)月前發(fā)布的開(kāi)源視頻編碼VP8有望能解決這一問(wèn)題，另外Google還發(fā)布了開(kāi)放網(wǎng)絡(luò)媒體項(xiàng)目WebM，旨在幫助開(kāi)發(fā)者為開(kāi)放網(wǎng)絡(luò)制作出世界級(jí)媒體格式，Opera, Firefox, Chrome和IE9都將支持VP8，而且Flash Player也將可以播放VP8，這就意味著我們很快就可以只制作一個(gè)版本的視頻然后在所有主流瀏覽器上播放了。另外一個(gè)主要的問(wèn)題就是如何構(gòu)建自定義的HTML5<video>播放器，這是目前Flash Player的優(yōu)勢(shì)所在，利用Flash的IDE所提供的接口可以很方便的構(gòu)建一個(gè)個(gè)性化的視頻播放器，那HTML5的<video>標(biāo)簽要怎樣才能實(shí)現(xiàn)呢？這個(gè)問(wèn)題就是本文所要解決的！我們將開(kāi)發(fā)一個(gè)HTML5<video>視頻播放器的jQuery插件，并且可以很方便的進(jìn)行自定義，將分為以下幾個(gè)部分：

1.視頻控制工具條 2.視頻控制按鈕 3.打包成jQuery插件 4.外觀和體驗(yàn) 5.自定義皮膚

視頻控制工具條
做為一個(gè)專業(yè)的web開(kāi)發(fā)人員，我們創(chuàng)建一個(gè)視頻播放器時(shí)一定希望它的外觀在各個(gè)瀏覽器中看起來(lái)一致(consistent)，但是通過(guò)下面的圖可以看到目前各個(gè)瀏覽器提供的視頻控制工具條外觀各不相同：

那就沒(méi)辦法了，我們得自己從頭來(lái)創(chuàng)建這個(gè)控制工具條，利用HTML和CSS再加上一些圖片實(shí)現(xiàn)起來(lái)并不算很難，另外通過(guò)HTML5多媒體元素提供的API我們可以很方便將創(chuàng)建的任何按鈕與播放/暫停等事件進(jìn)行綁定。

視頻控制按鈕
基本的視頻控制工具條要包含一個(gè)播放/暫停按鈕，一個(gè)進(jìn)度條，一個(gè)計(jì)時(shí)器和一個(gè)音量控制按鈕，我們將這些按鈕放在<video>元素下面，并用一個(gè)div作為父容器：

注意，我們使用元素的class屬性來(lái)代替ID屬性是為了方便在一個(gè)頁(yè)面上使用多個(gè)播放器。?

打包成jQuery插件
創(chuàng)建好控制按鈕后我們需要配合多媒體元素的API來(lái)實(shí)現(xiàn)視頻控制的目的，正如前面提到的一樣我們將我們的播放器打包成jQuery插件，這樣可以很好的實(shí)現(xiàn)復(fù)用，代碼如下：

$.fn.gVideo = function(options) {// build main options before element iterationvar defaults = {theme: 'simpledark',childtheme: ''};var options = $.extend(defaults, options);// iterate and reformat each matched elementreturn this.each(function() {var $gVideo = $(this);//create html structure//main wrappervar $video_wrap = $('<div></div>').addClass('ghinda-video-player').addClass(options.theme).addClass(options.childtheme);//controls wrapervar $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>'); $gVideo.wrap($video_wrap);$gVideo.after($video_controls);

這里先假設(shè)您了解jQuery并知道如何創(chuàng)建一個(gè)jQuery插件，因?yàn)檫@個(gè)不在本文的討論范圍之內(nèi)，在上面這段腳本中我們使用jQuery動(dòng)態(tài)創(chuàng)建視頻控制工具條的元素，接下來(lái)為了綁定事件我們需要獲取對(duì)應(yīng)的元素：

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

這里我們通過(guò)className方式獲取，先讓工具條隱藏直到所有資源加載完成，現(xiàn)在來(lái)實(shí)現(xiàn)播放/暫停按鈕：

大多數(shù)瀏覽器在右鍵點(diǎn)擊視頻時(shí)會(huì)提供一個(gè)獨(dú)立的菜單，它也提供了視頻控制功能，如果用戶通過(guò)這個(gè)右鍵菜單控制視頻那就會(huì)跟我們的自定義控件沖突，所以為了避免這一點(diǎn)我們需要綁定視頻播放器自身的“播放”，“暫停”和“結(jié)束”事件，在事件處理函數(shù)中處理播放/暫停按鈕，控制按鈕的樣式。
為了創(chuàng)建進(jìn)度條的拖動(dòng)塊，我們使用了jQuery UI的Slider組件：

正如你所看到的，這里我們寫(xiě)了一個(gè)遞歸函數(shù)，通過(guò)循環(huán)比較video的readyState屬性來(lái)判斷視頻是否已經(jīng)準(zhǔn)備好，否則我們就不能獲得視頻的時(shí)長(zhǎng)也無(wú)法創(chuàng)建滑動(dòng)塊，當(dāng)視頻準(zhǔn)備好后我們初始化滑動(dòng)塊并顯示控制工具條，下一步我們通過(guò)綁定video元素的timeupdate事件實(shí)現(xiàn)計(jì)時(shí)器功能：

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函數(shù)獲取video的currentTime屬性值然后調(diào)用gTimeFormat函數(shù)進(jìn)行格式化后得到當(dāng)前播放的時(shí)間點(diǎn)。
至于音量控制控件我們還是利用jQuery UI的Slider組件然后利用自定義函數(shù)實(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);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);

最后當(dāng)我們自己的自定義視頻控制工具條構(gòu)造完成后需要移除<video>標(biāo)簽的controls屬性，這樣瀏覽器默認(rèn)的工具條就被去掉了。
好了，我們的插件功能已經(jīng)全部完成了，調(diào)用方法：

$('video').gVideo();

這會(huì)將我們的插件應(yīng)用到頁(yè)面上每一個(gè)video元素上。

外觀和體驗(yàn)
好的，現(xiàn)在到了比較有意思的部分，也就是播放器的外觀和體驗(yàn)了。當(dāng)插件功能已經(jīng)完成后利用一點(diǎn)CSS就可以很容易地自定義樣式了，我們將全部使用CSS3來(lái)實(shí)現(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 */background: #000000;background-image: -moz-linear-gradient(top, #313131, #000000); /* FF3.6 */background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #313131),color-stop(1, #000000)); /* Saf4+, Chrome */box-shadow: inset 0 15px 35px #535353; }

下一步，我們?cè)O(shè)置視頻控制工具條左邊浮動(dòng)使它們水平對(duì)齊，利用CSS3的opacity和transitions我們給播放/暫停和靜音/取消靜音按鈕添加了非常不錯(cuò)的懸浮效果：

.ghinda-video-play {display: block;width: 22px;height: 22px;margin-right: 15px;background: url(../images/play-icon.png) no-repeat; opacity: 0.7;-moz-transition: all 0.2s ease-in-out; /* Firefox */-ms-transition: all 0.2s ease-in-out; /* IE future proofing */-o-transition: all 0.2s ease-in-out; /* Opera */-webkit-transition: all 0.2s ease-in-out; /* Safari and Chrome */transition: all 0.2s ease-in-out; } .ghinda-paused-button {background: url(../images/pause-icon.png) no-repeat; } .ghinda-video-play:hover { opacity: 1; }

如果您仔細(xì)看了前面那段根據(jù)視頻播放狀態(tài)(Playing/Paused)添加和移除播放/暫停按鈕樣式的JavaScript代碼，就會(huì)明白為什么.ghinda-paused-button為什么要重寫(xiě).ghinda-video-play的背景屬性了。
現(xiàn)在輪到滑動(dòng)塊了，我們進(jìn)度條和音量控制的滑動(dòng)塊的實(shí)現(xiàn)都是利用了jQuery UI的Slider組件，這個(gè)組件它本身自帶了樣式，定義在jQuery UI對(duì)應(yīng)的css文件中，但是為了使滑動(dòng)塊和播放器其他控件外觀保持一致我們?nèi)恐貙?xiě)了它的樣式：

.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; }

這時(shí)候音量控制的滑動(dòng)塊一直顯示在音量按鈕旁邊，我們需要將它改成默認(rèn)隱藏，當(dāng)鼠標(biāo)懸浮在音量按鈕上再動(dòng)態(tài)顯示出來(lái)，使用transitions來(lái)實(shí)現(xiàn)這個(gè)效果會(huì)是個(gè)不錯(cuò)的的選擇：

.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提供的新屬性我們打造了一個(gè)全新的播放器外觀，它看起來(lái)是這個(gè)樣子：

自定義皮膚
可能您已經(jīng)注意到，我們?cè)诰帉?xiě)插件的時(shí)候已經(jīng)定義了一些默認(rèn)選項(xiàng)，它們是theme和childtheme，可以在調(diào)用插件的時(shí)候根據(jù)需要方便的應(yīng)用自定義皮膚。
這里解釋下theme就是所有控件的一整套樣式定義，childtheme就是在theme基礎(chǔ)上重寫(xiě)某些樣式，我們?cè)谡{(diào)用插件的時(shí)候可以同時(shí)指定這兩個(gè)選項(xiàng)或者其中的一個(gè)：

$('video').gVideo({childtheme:'smalldark' });

我們寫(xiě)了一個(gè)示例的皮膚smalldark，它只重寫(xiě)了部分的樣式，顯示效果是這樣的：?

總結(jié)
利用HTML5 video，JavaScript和CSS3打造自定義的視頻播放器真的非常容易，t實(shí)現(xiàn)工具條功能用JavaScrip，外觀和體驗(yàn)交給CSS3，我們得到了一個(gè)功能強(qiáng)大并且易于定制的解決方案！?

?推薦閱讀：

Javascript中最常用的61段經(jīng)典代碼

javascript canvas webgl css實(shí)現(xiàn)濾鏡算法

慎用JavaScript 這三個(gè)特性

總結(jié)

以上是生活随笔為你收集整理的HTML5+CSS3+JQuery打造自定义视频播放器的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： 2015 中国电商网站排行榜
下一篇： yolo模型(四)绘制PR曲线所用到的r