網頁媒體播放利器 - JW Player使用心得

前段時間在做一個網站項目，要求能線上播放視頻、音樂，這個以前還真沒接觸過。恰好今天在罈子裡閑逛時，發現有同志對這方面也感興趣，遂把這些整理了下，同時自己也可以複習下。

播放器需要滿足以下需求：

1. 支援所有主流瀏覽器

2. 能與播放器互動，播放器必須提供必要的API

3. 可定製外觀，方便後期擴充

4. 支援flv、mp3、mp4格式，支援播放清單

5. 詳盡的協助文檔說明，方便開發人員使用

需求就是一切，咱沒條件只好硬著頭皮建立條件強上了～～～。於是瘋狂百度Google，發現了很多第三方播放器。由於咱E文實在不咋地，一開始想找個國內的。可是，找來找去，發現都是要收費的。於是只好走上不愛國之路，只能找一個國外的了。在搜尋中，綜合前輩們的意見，最終選擇了JW Player。搜尋國外資源還是Google給力啊，不管你信不信，反正我是信了：）。

JW Player是一款非常優秀的網頁媒體播放器，支援H.264 ( .mp4, .mov, .f4v )、FLV ( .flv ) 、3GPP ( .3gp, .3g2 )、OGG Theora ( .ogv )和WebM ( .webm )視頻格式，MP3 ( .mp3 )、AAC ( .aac, .m4a )、OGG Vorbis ( .ogg )和WAV ( .wav )音頻，同時也支援swf和圖片( gif 、jpg、png)和YouTube格式視頻。

支援HTML5，有著非常豐富的外掛程式可用（部分是收費的，如廣告外掛程式）。

JW Player的最新版是5.7，官方網址：http://www.longtailvideo.com/players/jw-flv-player/?search=Playlist

 

廢話到此為止，現在開始主題。令人振奮的是，JW Player使用起來非常方便，下面就探討一下JW Player的基本用法。 第一步 從官網下載最新的播放器

以上兩個選項不選，Viral是JW Player的一個外掛程式，做視頻分享用的，需不需要自己看著辦。輸入郵箱即可下載。

下載完成後，解壓出來有8個檔案，如下圖：

jwplayer.js和player.swf是核心檔案，必須引入這兩個檔案。

JW Player Quick Start Guide.pdf是協助文檔，裡面講的也比較詳細了。 第二步 體驗JW Player（基本用法）

1. 在頁面head地區引用必要的js檔案（本人習慣用jQuery，故引入了，使用其它架構的自行更改該部分） [html] view plain copy <script src="js/jquery/jquery-1.6.2.js" type="text/javascript"></script>   <script src="js/plugins/mediaplayer-5.7/jwplayer.js" type="text/javascript"></script>  

 2. html結構如下 [html] view plain copy <div id="container"></div>   <input type="button" class="player-play" value="播放" />   <input type="button" class="player-stop" value="停止" />   <input type="button" class="player-status" value="取得狀態" />   <input type="button" class="player-current" value="當前播放秒數" />   <input type="button" class="player-goto" value="轉到第30秒播放" />   <input type="button" class="player-length" value="視頻時間長度(秒)" />  

 

3. 初始化播放器，完成控制邏輯 [html] view plain copy <script type="text/javascript">       var thePlayer;  //儲存當前播放器以便操作       $(function() {           thePlayer = jwplayer('container').setup({               flashplayer: 'js/plugins/mediaplayer-5.7/player.swf',               file: 'js/plugins/mediaplayer-5.7/video.mp4',               width: 500,               height: 350,               dock: false           });                      //播放 暫停           $('.player-play').click(function() {               if (thePlayer.getState() != 'PLAYING') {                   thePlayer.play(true);                   this.value = '暫停';               } else {                   thePlayer.play(false);                   this.value = '播放';               }           });                      //停止           $('.player-stop').click(function() { thePlayer.stop(); });                      //擷取狀態           $('.player-status').click(function() {               var state = thePlayer.getState();               var msg;               switch (state) {                   case 'BUFFERING':                       msg = '載入中';                       break;                   case 'PLAYING':                       msg = '現正播放';                       break;                   case 'PAUSED':                       msg = '暫停';                       break;                   case 'IDLE':                       msg = '停止';                       break;               }               alert(msg);           });                      //擷取播放進度           $('.player-current').click(function() { alert(thePlayer.getPosition()); });              //跳轉到指定位置播放           $('.player-goto').click(function() {               if (thePlayer.getState() != 'PLAYING') {    //若當前未播放，先啟動播放器                   thePlayer.play();               }               thePlayer.seek(30); //從指定位置開始播放(單位：秒)           });                      //擷取視頻長度           $('.player-length').click(function() { alert(thePlayer.getDuration()); });       });   </script>  

到此完成，接下來運行網頁就可以看到效果了。以下是一個截圖：

 

關於更詳細的配置和說明文檔，請參閱官方文檔，說明非常詳盡。

官方文檔：http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5

  首次發文，定有許多不足之處，懇請大家批評指正，沒有交流就沒有進步