JPLAYER使用手記

前幾日開發一個音樂電臺用到了jPlayer，見網絡上資料很少，官方英文資料太坑爹TAT，於是就寫一個手記給大家參考下.

據我觀察，jPlayer的原理主要是用到HTML5，在不支持HTML5的瀏覽器上使用SWF。做到全兼容，這一點很不錯。

官方還說明，服務器對於MP3文件不要做GZIP壓縮，只是徒增CPU而已。並且在Flash播放GZIP的MP3時會出錯。

 jPlayer需要兩個文件上傳到你的服務器。

jquery.jplayer.min.js 

Jplayer.swf

最重要的當然還是jquery.min.js.

JPLAYER構造

 jPlayer構造在jQuery選擇器上。採用 $(ID).jPlayer(Object: options) 的形式執行動作。

在某些場合，jPlayer也可以構造在body上，指你不用播放視頻的時候。

注意：swfPath，它定義jPlayer SWF文件的路徑。記得把SWF文件上傳到你的服務器！

你也可以使用類似jPlayer({solution:"flash, html")的語句規定用什麼方式播放媒體優先。

 

初始化後更改設置

初始化之後 使用類似 jPlayer(“option“,{key:value})的形式改變設置。

實現一個自動播放音樂的網頁

01	$(document).ready(function(){

02	$("#jquery_jplayer_1").jPlayer({

03	ready: function (event) {

04	$(this).jPlayer("setMedia", {

05	m4a:"http://www.jplayer.org/audio/m4a/TSP-01-Cro_magnon_man.m4a",

06	oga:"http://www.jplayer.org/audio/ogg/TSP-01-Cro_magnon_man.ogg"

07

});

08

},

09	swfPath: "js",

10	supplied: "m4a, oga",

11	}).jPlayer("play");

12

});

解釋一下上面的代碼：

第一行“$(document).ready(function(){”大家都無比親切吧，文檔載入事件。

第二行“$("#jquery_jplayer_1").jPlayer({”選擇的是一個DIV，用於承載HTML5元素或是Flash，大家在文檔裏寫一個空的DIV即可。

第三行“ready: function (event) {”，ready是一個鍵，function是一個值，灰常熟悉的東西。

第四行“$(this).jPlayer("setMedia", {”this指的是“$("#jquery_jplayer_1")”，意爲：“$("#jquery_jplayer_1").jPlayer("setMedia", {”

很熟悉。

setMedia是一個option，根據第二步說的。

第九行“swfPath: "js",”，這個定義了swf播放器所在的相對路徑，如果你不打算兼容不支持HTML5的網頁，可以不寫:）

第十行“supplied: "m4a, oga",”所支持的格式。

第十一行“jPlayer("play");”意爲：$("#jquery_jplayer_1").jPlayer("play");，播放媒體，實現自動播放。

JPLAYER方法

$(id).jPlayer( "setMedia", Object: media ) : jQuery

描述：這個方法被用來定義要播放的媒體， 媒體參數是一個對象，具有屬性定義不同的編碼格式。

所有的編碼格式都應該在構造設置中指定“jPlayer({ supplied : "f1, f2, fN"})”。

jPlayer構造選項jPlayer({ preload )是用來指定何時開始下載媒體。

參數：媒體

對象，定義媒體的格式以及網址。

支持格式：

 

MP3

MP3音頻格式

M4A

MP4音頻格式

M4V

MP4視頻格式

webma

的WebM音頻格式

webmv

WebM視頻格式

oga

OGG音頻格式

OGV

OGG視頻格式

FLA

FLV音頻格式

FLV

FLV視頻格式

WAV

wav音頻格式

 示例代碼：

 

01	$("#jpId").jPlayer( {

02	ready: function() {

03	$(this).jPlayer( "setMedia", {

04	m4a: "m4a/elvis.m4a",

05	oga: "oga/elvis.oga",

06	webma: "webm/elvis.webm"

07

});

08

},

09	supplied: "webma, m4a, oga"

10

);

 

 

$(id).jPlayer( "clearMedia") : jQuery

描述：這個方法用來清空媒體並且停止播放音樂。如果媒體正在下載，則取消。在其設置完畢以後，如果在jPlayer("setMedia")之前使用.jPlayer("play")，將會產生錯誤事件。

參數：這個方法沒有參數。

示例代碼：

 

1	$("#jpId").jPlayer("clearMedia");

 

 

 

 

$(id).jPlayer( "load") : jQuery

描述：這個方法用來在jPlayer("setMedia");之後載入音樂。當然，如果你使用預載（{preload:"auto"}），這個方法有沒有一樣。

參數：這個方法沒有參數。

示例代碼：

 

1	$("#jpId").jPlayer("load");

$(id).jPlayer( "play", [Number: time] ) : jQuery

描述：這個方法在jPlayer("setMedia")之前使用，如果沒有time參數，新的媒體該方法會從頭播放，打開的媒體會從jPlayer("pause")處開始播放。

參數：time(可選)，用秒來定義播放位置。

示例代碼：

 

view source

print?

01	$("#jpId").jPlayer( {

02	ready: function() { // $.jPlayer.event.ready 事件

03	$(this).jPlayer("setMedia", { // 設置媒體

04	m4v: "m4v/presentation.m4v"

05	}).jPlayer("play"); // 自動播放媒體

06

},

07	ended: function() { // The $.jPlayer.event.ended 事件

08	$(this).jPlayer("play"); //重複播放媒體

09

},

10	supplied: "m4v"

11

);

12

13	$("#jumpToTime").click( function() {

14	$("#jpId").jPlayer("play", 42); // 從媒體的42秒處開始播放.

15

});