2. 程式人生 > >HTML5+CSS3+JQuery打造自定義視訊播放器

HTML5+CSS3+JQuery打造自定義視訊播放器

阿新 • • 發佈：2019-01-17

簡介
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作為父容器：

Java程式碼  收藏程式碼
  1. <div class="ghinda-video-controls">    
  2.         <a class="ghinda-video-play" title="Play/Pause"></a>    
  3.         <div class="ghinda-video-seek"></div>    
  4.         <div class="ghinda-video-timer">00:00</div>    
  5.         <div class="ghinda-volume-box">    
  6.                 <div class
    ="ghinda-volume-slider"></div>    
  7.                 <a class="ghinda-volume-button" title="Mute/Unmute"></a>    
  8.         </div>    
  9. </div>    
複製程式碼

注意，我們使用元素的class屬性來代替ID屬性是為了方便在一個頁面上使用多個播放器。

打包成jQuery外掛
建立好控制按鈕後我們需要配合多媒體元素的API來實現視訊控制的目的，正如前面提到的一樣我們將我們的播放器打包成jQuery外掛，這樣可以很好的實現複用，程式碼如下：

Java程式碼  收藏程式碼
  1. $.fn.gVideo = function(options) {    
  2.         // build main options before element iteration    
  3.         var defaults = {    
  4.                 theme: 'simpledark',    
  5.                 childtheme: ''    
  6.         };    
  7.         var options = $.extend(defaults, options);    
  8.         // iterate and reformat each matched element    
  9.         return this.each(function() {    
  10.                 var $gVideo = $(this);    
  11.                 //create html structure    
  12.                 //main wrapper    
  13.                 var $video_wrap = $('<div></div>').addClass('ghinda-video-player').addClass(options.theme).addClass(options.childtheme);    
  14.                 //controls wraper    
  15.                 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>');                                                    
  16.                 $gVideo.wrap($video_wrap);    
  17.                 $gVideo.after($video_controls);    

這裡先假設您瞭解jQuery並知道如何建立一個jQuery外掛，因為這個不在本文的討論範圍之內，在上面這段指令碼中我們使用jQuery動態建立視訊控制工具條的元素，接下來為了繫結事件我們需要獲取對應的元素：

Java程式碼  收藏程式碼
  1. //get newly created elements    
  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);    
  9. $video_controls.hide(); // keep the controls hidden    

這裡我們通過className方式獲取，先讓工具條隱藏直到所有資源載入完成，現在來實現播放/暫停按鈕：

Java程式碼  收藏程式碼
  1. var gPlay = function() {    
  2.         if($gVideo.attr('paused') == false) {    
  3.                 $gVideo[0].pause();                                            
  4.         } else {                                            
  5.                 $gVideo[0].play();                                    
  6.         }    
  7. };    
  8. $ghinda_play_btn.click(gPlay);    
  9. $gVideo.click(gPlay);    
  10. $gVideo.bind('play', function() {    
  11.         $ghinda_play_btn.addClass('ghinda-paused-button');    
  12. });    
  13. $gVideo.bind('pause', function() {    
  14.         $ghinda_play_btn.removeClass('ghinda-paused-button');    
  15. });    
  16. $gVideo.bind('ended', function() {    
  17.         $ghinda_play_btn.removeClass('ghinda-paused-button');    
  18. });    
大多數瀏覽器在右鍵點選視訊時會提供一個獨立的選單，它也提供了視訊控制功能，如果使用者通過這個右鍵選單控制視訊那就會跟我們的自定義控制元件衝突，所以為了避免這一點我們需要繫結視訊播放器自身的“播放”，“暫停”和“結束”事件，在事件處理函式中處理播放/暫停按鈕，控制按鈕的樣式。

為了建立進度條的拖動塊，我們使用了jQuery UI的Slider元件：

Java程式碼  收藏程式碼
  1. var createSeek = function() {    
  2.         if($gVideo.attr('readyState')) {    
  3.                 var video_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. };    
  24. createSeek();    

正如你所看到的，這裡我們寫了一個遞迴函式，通過迴圈比較video的readyState屬性來判斷視訊是否已經準備好，否則我們就不能獲得視訊的時長也無法建立滑動塊，當視訊準備好後我們初始化滑動塊並顯示控制工具條，下一步我們通過繫結video元素的timeupdate事件實現計時器功能：

Java程式碼  收藏程式碼
  1. var gTimeFormat=function(seconds){    
  2.         var m=Math.floor(seconds/60)<10?"0"+Math.floor(seconds/60):Math.floor(seconds/60);    
  3.         var s=Math.floor(seconds-(m*60))<10?"0"+Math.floor(seconds-(m*60)):Math.floor(seconds-(m*60));    
  4.         return m+":"+s;    
  5. };    
  6. var seekUpdate = function() {    
  7.         var currenttime = $gVideo.attr('currentTime');    
  8.         if(!seeksliding) $ghinda_video_seek.slider('value', currenttime);    
  9.         $ghinda_video_timer.text(gTimeFormat(currenttime));                                                            
  10. };    
  11. $gVideo.bind('timeupdate', seekUpdate);    
這裡我們用seekUpdate函式獲取video的currentTime屬性值然後呼叫gTimeFormat函式進行格式化後得到當前播放的時間點。

至於音量控制控制元件我們還是利用jQuery UI的Slider元件然後利用自定義函式實現靜音和取消靜音的功能：

Java程式碼  收藏程式碼
  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. });    
  14. var muteVolume = function() {    
  15.         if($gVideo.attr('muted')==true) {    
  16.                 $gVideo.attr('muted', false);    
  17.                 $ghinda_volume.slider('value', video_volume);    
  18.                 $ghinda_volume_btn.removeClass('ghinda-volume-mute');                                            
  19.         } else {    
  20.                 $gVideo.attr('muted', true);    
  21.                 $ghinda_volume.slider('value', '0');    
  22.                 $ghinda_volume_btn.addClass('ghinda-volume-mute');    
  23.         };    
  24. };    
  25. $ghinda_volume_btn.click(muteVolume);    
最後當我們自己的自定義視訊控制工具條構造完成後需要移除<video>標籤的controls屬性，這樣瀏覽器預設的工具條就被去掉了。

好了，我們的外掛功能已經全部完成了，呼叫方法：

Java程式碼  收藏程式碼
  1. $('video').gVideo();    
  這會將我們的外掛應用到頁面上每一個video元素上。


外觀和體驗
好的，現在到了比較有意思的部分，也就是播放器的外觀和體驗了。當外掛功能已經完成後利用一點CSS就可以很容易地自定義樣式了，我們將全部使用CSS3來實現。
首先，我們給播放器主容器加一些樣式：

Java程式碼  收藏程式碼
  1. .ghinda-video-player {    
  2.         float: left;    
  3.         padding: 10px;    
  4.         border: 5px solid #61625d;    
  5.         -moz-border-radius: 5px; /* FF1+ */    
  6.         -ms-border-radius: 5px; /* IE future proofing */    
  7.         -webkit-border-radius: 5px; /* Saf3+, Chrome */    
  8.         border-radius: 5px; /* Opera 10.5, IE 9 */    
  9.         background: #000000;    
  10.         background-image: -moz-linear-gradient(top, #313131, #000000); /* FF3.6 */    
  11.         background-image: -webkit-gradient(linear,left top,left bottombottom,color-stop(0, #313131),color-stop(1, #000000)); /* Saf4+, Chrome */    
  12.         box-shadow: inset 0 15px 35px #535353;    
  13. }    
下一步，我們設定視訊控制工具條左邊浮動使它們水平對齊，利用CSS3的opacity和transitions我們給播放/暫停和靜音/取消靜音按鈕添加了非常不錯的懸浮效果：
Java程式碼  收藏程式碼
  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;            
  7.         opacity: 0.7;    
  8.         -moz-transition: all 0.2s ease-in-out; /* Firefox */    
  9.         -ms-transition: all 0.2s ease-in-out; /* IE future proofing */    
  10.         -o-transition: all 0.2s ease-in-out;  /* Opera */    
  11.         -webkit-transition: all 0.2s ease-in-out; /* Safari and Chrome */    
  12.         transition: all 0.2s ease-in-out;     
  13. }    
  14. .ghinda-paused-button {    
  15.         background: url(../images/pause-icon.png) no-repeat;    
  16. }    
  17. .ghinda-video-play:hover {            
  18.         opacity: 1;    
  19. }    
  如果您仔細看了前面那段根據視訊播放狀態(Playing/Paused)新增和移除播放/暫停按鈕樣式的JavaScript程式碼，就會明白為什麼.ghinda-paused-button為什麼要重寫.ghinda-video-play的背景屬性了。

現在輪到滑動塊了，我們進度條和音量控制的滑動塊的實現都是利用了jQuery UI的Slider元件，這個元件它本身自帶了樣式，定義在jQuery UI對應的css檔案中，但是為了使滑動塊和播放器其他控制元件外觀保持一致我們全部重寫了它的樣式：

Java程式碼  收藏程式碼
  1. .ghinda-video-seek .ui-slider-handle {    
  2.         width: 15px;    
  3.         height: 15px;    
  4.         border: 1px solid #333;    
  5.         top: -4px;    
  6.         -moz-border-radius:10px;    
  7.         -ms-border-radius:10px;    
  8.         -webkit-border-radius:10px;    
  9.         border-radius:10px;            
  10.         background: #e6e6e6;    
  11.         background-image: -moz-linear-gradient(top, #e6e6e6, #d5d5d5);    
  12.         background-image: -webkit-gradient(linear,left top,left bottombottom,color-stop(0, #e6e6e6),color-stop(1, #d5d5d5));    

  13. 相關推薦

    HTML5+CSS3+JQuery打造自定義視訊播放器

    簡介 HTML5的<video>標籤已經被目前大多數主流瀏覽器所支援，包括還未正式釋出的IE9也宣告將支援<video>標籤，利用瀏覽器原生特性嵌入視訊有很多好處，所以很多開發者想盡快用上，但是真正使用前還有些問題要考慮，尤其是 Opera/Fir

    jquery實現--自定義視訊播放器

    html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="wid

    Exoplayer+Exomedia打造自定義視訊播放器

    寫在前面的話 對App視訊播放模組進行擴充套件，需要自定義播放器的樣式、監聽視訊播放過程中各種事件（播放開始、暫停、重新播放、結束、拖拽進度條、橫豎屏切換等）、橫豎屏切換、手動控制播放進度等。 自定義功能性、擴充套件性較好的視訊播放模組。初次技術選型時利用gith

    Android使用Vitamio框架自定義視訊播放器

            做過Android視訊播放器的碼農們都或多或少知道自帶的VideoView用著沒有那麼順心。需要處理很多東西。於是就各種度娘、Google。終於皇天不負苦心人。找到了一個卻又不大符合。無奈，想自己動手寫吧！又浪

    Android自定義視訊播放器(網路/本地)

    最近因公司專案要求需要寫一個播放器，自帶的又不太好用，也不太好看。自能自定義啦。查看了很多資料，都沒有完善的，還好得以為前輩的指點得以完成，感謝Yang。本篇裡面我有可能有些地方寫得不好(都附上了註釋)。希望各路大神指點，虛心受教。 先來個圖(原始碼在後面附上) 視訊列表裡面

    Android自定義視訊播放器（三）

    一、引言 在上文中，我們通過自定義控制面板的佈局，來實現自定義的播放控制，下面來對裡面的各個元件進行事件繫結。 @Override public void onClick(View v) { if ( v == btnVoice ) {

    android surfaceView+mediaPlayer 自定義視訊播放器

    Android 視訊播放一般分為兩種（其實3種，還一種是調Android自帶播放器）： 1.使用Android自帶View VideoView ,其中一些功能，已經都給實現好了(此view一般不滿足自己的需求，比如：介面啊，控制啊，以及可能還有手勢控制音量，手勢控制亮度等等

    Android自定義視訊播放器（六）

    一、引言 現在已經差不多完成了一個自定義的視訊播放器，還有一個讓視訊全屏播放的按鈕事件沒有繫結，下面會介紹。此外還要一個非常重要的功能就是，已經寫好了自定義的播放器，那麼就應該能被其他應用調起，來播放視訊，下面來完善這兩個功能。 二、全屏按鈕事件

    Android自定義視訊播放器（一）

    一、引言 我們在開發Android多媒體應用時，有兩種方式來播放多媒體資源。第一種是使用隱式的Intent，來使用系統或者手機已經安裝的第三方播放器應用來播放音視訊，第二種是使用Android自帶的、我們自定義的播放器來播放，這種主要是採用Android提供的

    一步步自定義視訊播放器——使用SurfaceView播放視訊

    Surface Surface與SurfaceView這篇文章對Surface和SurfaceView做了很詳細的解釋。 簡單的說Surface對應了一塊螢幕緩衝區，每個window對應一個Surface，任何View都要畫在Surface的Canvas上。

    AVPlayer自定義視訊播放器

    我的avplayer播放器,能橫屏,豎屏,適應螢幕,上程式碼 1.我把我的那個最主要的類的.m的主要的程式碼附上 @implementation LDZMoviePlayerController - (void)viewDidLoad { [super vie

    Android自定義視訊播放器（二）

    一、引言 上一篇在對VideoView使用時，加上了這樣一行程式碼： videoView.setMediaController(new MediaController(this)); 這行程式碼為VideoView加上了控制面板，可以操作視訊播放的快

    Kotlin實現SurfaceView+MediaPlayer封裝自定義視訊播放功能

    1、前言 視訊播放功能在APP開發中有的會用到這個功能，實現視訊播放三種方式 （1）系統自帶的視訊播放器 （2）VideoView播放器（自帶開始、停止、暫停等功能，進度條自帶不能改變），實現起來較簡單 （3）SurfaceView+MediaPlayer實現播放器（Surfac

    基於HTML5自定義媒體播放器

    簡要說明 顯示播放時間、可操控進度條，播放視訊是通過拖拽媒體檔案到播放器中即可播放。 注：上一曲、下一曲未實現。 素材 效果圖 style.css檔案 .mediaplayer { height

    html---自定義視訊播放控制檯

    <!DOCTYPE HTML> <html> <head> <meta charset="gbk"> <style> #box{

    iOS開發之仿微博視訊邊下邊播之自定義AVPlayer播放器， 邊下邊播解剖。視訊處理流程，建立連線-請求資料-統籌資料-解碼資料-視訊呈現

    Tips：這次的內容分為兩篇文章講述 01、[iOS]仿微博視訊邊下邊播之封裝播放器 講述如何封裝一個實現了邊下邊播並且快取的視訊播放器。 02、[iOS]仿微博視訊邊下邊播之滑動TableView自動播放 講述如何實現在tableView中滑動播放視訊，並且是流暢，不阻塞

    Android 自定義音樂播放器實現

    Android自定義音樂播放器一：首先介紹用了哪些Android的知識點：1 MediaPlayer工具來播放音樂2 Handle。因為存在定時任務(歌詞切換，動畫，歌詞進度條變換等)需要由Handle來處理Ui相關內容3 動態許可權申請(該應用程式讀取本地歌曲，並且設定音質

    實現簡單的自定義音樂播放器

    這篇部落格只是記錄自己寫的js外掛，著重點在於js，而不是css或者html。所以在js方面會比較詳細，而其他的就只是簡單提提。 剛學前端js那會，只是應付式的把書看完了，demo也沒寫幾個。碰巧這學期的網頁設計課程接近期末，老師要求要完成一個期末設計。好吧，就拿它來練

    用vitamio打造自己的視訊播放器

    對於視訊播放器，市面上也有很多，也做得比較好，寫這篇文章目的只是為了讓大家瞭解播放器的開發過程，也讓自己再次熟悉下這部分的程式碼。有些播放器用SDL進行視訊渲染，但是這篇文章只寫基礎。用vitamio是為了支援多種視訊格式如swf、flv、avi、asf、f4v、mkv、

    基於jQuery的自定義Video視訊播放元件（相容IE6~8）

    之前用過video.js外掛寫過視訊元件，但是自己一般僅僅是播放個視訊，裡面有好多功能用不到，改著不太方便，於是就自己用jQuery封裝了一個外掛，控制器之類的樣式是可以自定義的，支援中英文切換，廢話不多說，下面上圖。 高版本瀏覽器video樣式 注：如果遇到進度