這篇文章主要介紹了基于jQuery的網(wǎng)頁(yè)影音播放器jPlayer的基本使用教程,文中的示例主要針對(duì)其播放音頻文件的用法,需要的朋友可以參考下

jPlayer簡(jiǎn)介：

想在網(wǎng)頁(yè)上播放背景音樂(lè)，不想用html標(biāo)簽的方式，因?yàn)槟菢又挥幸魳?lè)全部下載完以后才能播放，還容易出現(xiàn)跨瀏覽器兼容性的問(wèn)題，于是選了一款基于jQuery的播放器jPlayer來(lái)做。

設(shè)置jPlayer的尺寸大小

使用構(gòu)造函數(shù)配置jPlayer({size:Object})設(shè)置jPlayer的高寬。

使用構(gòu)造函數(shù)配置jPlayer({sizeFull:Object})設(shè)置全屏尺寸。

注意可通過(guò)構(gòu)造函數(shù)配置jPlayer({backgroundColor:"#RRGGBB"})設(shè)置jPlayer背景顏色。

Flash 安全規(guī)則

使用下面的代碼放寬了對(duì)jPlayer SWF 文件的限制，并且可以調(diào)用任何域名的swf文件了。

flash.system.Security.allowDomain("*");

flash.system.Security.allowInsecureDomain("*");

部署

通常，要上傳swf文件和js文件到你域名下的js目錄中。更改swf路徑使用構(gòu)造函數(shù)配置jPlayer({"swfPath":path})。

嚴(yán)格來(lái)講，插件文件可能會(huì)遠(yuǎn)程鏈接到j(luò)player.org上，但請(qǐng)求你們不要鏈接到j(luò)player.com上，因?yàn)楫?dāng)前我們還沒(méi)有充足資源做一個(gè)cdn。另外，遠(yuǎn)程服務(wù)器上的Flash播放軟件要求所有的jPlayer("setMedia", media)設(shè)置的多媒體文件URL使用絕對(duì)路徑。

要在本地開(kāi)發(fā)，你需要在自己的電腦上安裝一個(gè)服務(wù)器，比如apache,使localhost生效。

使用Javascript API控制你網(wǎng)站上的媒體文件jPlayer支持的媒體格式：HTML5: mp3, m4a (AAC), m4v (H.264), ogv*, oga*, wav*, webm* Flash: mp3, m4a (AAC), m4v (H.264)

jPlayer需要兩個(gè)文件上傳到你的服務(wù)器：

（1）Jplayer.swf

（2）jquery.jplayer.min.js

jPlayer構(gòu)造在jQuery選擇器上。采用 $(ID).jPlayer(Object: options) 的形式執(zhí)行動(dòng)作。在某些場(chǎng)合，jPlayer也可以構(gòu)造在body上，指你不用播放視頻的時(shí)候。

注意：swfPath，它定義jPlayer SWF文件的路徑。記得把SWF文件上傳到你的服務(wù)器！你也可以使用類似jPlayer({solution:"flash, html")的語(yǔ)句規(guī)定用什么方式播放媒體優(yōu)先。

初始化后更改設(shè)置

初始化之后 使用類似 jPlayer("option",{key:value})的形式改變?cè)O(shè)置。

實(shí)現(xiàn)一個(gè)自動(dòng)播放音樂(lè)的網(wǎng)頁(yè)

$(document).ready(function(){

 $("#jquery_jplayer_1").jPlayer({

 ready: function (event) {

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

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

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

  });

 },

 swfPath: "js",

 supplied: "m4a, oga",

 }).jPlayer("play");

});

解釋一下上面的代碼：

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

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

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

第四行“$(this).jPlayer("setMedia", {”this指的是“$("#jquery_jplayer_1")”，意為：“$("#jquery_jplayer_1").jPlayer("setMedia", {”很熟悉。setMedia是一個(gè)option，根據(jù)第二步說(shuō)的。

第九行“swfPath: "js",”，這個(gè)定義了swf播放器所在的相對(duì)路徑，如果你不打算兼容不支持HTML5的網(wǎng)頁(yè)，可以不寫(xiě):）

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

第十一行“jPlayer("play");”意為：$("#jquery_jplayer_1").jPlayer("play");，播放媒體，實(shí)現(xiàn)自動(dòng)播放。

jPlayer常用的方法：

//播放

$("#jpId").jPlayer("play");

//暫停

$("#jpId").jPlayer("pause");

//停止

$("#jpId").jPlayer("stop");

//設(shè)置進(jìn)度相關(guān)

//1.按歌曲時(shí)長(zhǎng)百分比

$("#jpId").jPlayer("playHead", 0);// 從 0% 處開(kāi)始播放

$("#jpId").jPlayer("playHead", 10);// 從 10% 處開(kāi)始播放

$("#jpId").jPlayer("playHead", 100);// 從 100% 處開(kāi)始播放

//2.按播放毫秒數(shù)

$("#jpId").jPlayer("playHeadTime", 0);// 從 0毫秒 處開(kāi)始播放

$("#jpId").jPlayer("playHeadTime", 10000); // 從 10000毫秒(10秒) 處開(kāi)始播放

//設(shè)定音量

$("#jpId").jPlayer("volume", 0.25); //設(shè)為最大音量的 25%

//綁定事件

//播放結(jié)束事件

$("#jpId").jPlayer("onSoundComplete", function() {

  //alert('播放結(jié)束了');

  this.element.jPlayer("play"); // 循環(huán)播放

});

//播放進(jìn)行事件

$("#jpId").jPlayer("onProgressChange", function(lp,ppr,ppa,pt,tt) {

  var s = '緩沖百分比:'+lp +'% ,';

  s += '已播放占已緩沖的百分比:'+ppr +'% ,';

  s += '已播放占總時(shí)長(zhǎng)的百分比:'+ppa +'%';

  s += '已播放時(shí)間:'+pt+ '毫秒 ,';

  s += '總時(shí)間:'+tt+ '毫秒';

  $("#play_info").text(s);

});