基於jQuery的網頁影音播放器jPlayer的基本使用教學_jquery

jPlayer簡介：

想在網頁上播放背景音樂，不想用html標籤的方式，因為那樣只有音樂全部下載完以後才能播放，還容易出現跨瀏覽器兼容性的問題，於是選了一款基於jQuery的播放器jPlayer來做。

設定jPlayer的尺寸大小
使用建構子配置jPlayer({size:Object})設定jPlayer的高寬。

使用建構子配置jPlayer({sizeFull:Object})設定全螢幕尺寸。

注意可透過建構子配置jPlayer({backgroundColor:"#RRGGBB"})設定jPlayer背景顏色。

Flash 安全規則
使用下面的程式碼放寬了對jPlayer SWF 檔案的限制，並且可以呼叫任何網域的swf檔案了。

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

部署

通常，要上傳swf檔和js檔到你網域下的js目錄。更改swf路徑使用建構子配置jPlayer({"swfPath":path})。

嚴格來講，外掛程式檔案可能會遠端連結到jplayer.org上，但請求你們不要連結到jplayer.com上，因為目前我們還沒有充足資源做一個cdn。另外，遠端伺服器上的Flash播放軟體要求所有的jPlayer("setMedia", media)設定的多媒體檔案URL使用絕對路徑。

要在本地開發，你需要在自己的電腦上安裝一個伺服器，例如apache,使localhost生效。

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

jPlayer需要兩個檔案上傳到你的伺服器：

（1）Jplayer.swf

（2）jquery.jplayer.min.js

jPlayer建構在jQuery選擇器上。採用 $(ID).jPlayer(Object: options) 的形式執行動作。在某些場合，jPlayer也可以建構在body上，指你不用播放影片的時候。

注意：swfPath，它定義jPlayer SWF檔案的路徑。記得把SWF檔上傳到你的伺服器！你也可以使用類似jPlayer({solution:"flash, html")的語句規定用什麼方式播放媒體優先。

初始化後更改設定
初始化之後 使用類似 jPlayer("option",{key:value})的形式改變設定。
實現一個自動播放音樂的網頁

$(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(){」大家都無比親切吧，文檔載入事件。

第二行「$("#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 ", {」很熟悉。

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

第十行「supplied: "m4a, oga",」所支援的格式。

第十一行「jPlayer("play");」意為：$("#jquery_jplayer_1").jPlayer("play");，播放媒體，實作自動播放。

jPlayer常用的方法：

//播放
$("#jpId").jPlayer("play");
//暂停
$("#jpId").jPlayer("pause");
//停止
$("#jpId").jPlayer("stop");
//设置进度相关
//1.按歌曲时长百分比
$("#jpId").jPlayer("playHead", 0);// 从 0% 处开始播放
$("#jpId").jPlayer("playHead", 10);// 从 10% 处开始播放
$("#jpId").jPlayer("playHead", 100);// 从 100% 处开始播放
//2.按播放毫秒数
$("#jpId").jPlayer("playHeadTime", 0);// 从 0毫秒 处开始播放
$("#jpId").jPlayer("playHeadTime", 10000); // 从 10000毫秒(10秒) 处开始播放
//设定音量
$("#jpId").jPlayer("volume", 0.25); //设为最大音量的 25%
//绑定事件
//播放结束事件
$("#jpId").jPlayer("onSoundComplete", function() {
  //alert('播放结束了');
  this.element.jPlayer("play"); // 循环播放
});
//播放进行事件
$("#jpId").jPlayer("onProgressChange", function(lp,ppr,ppa,pt,tt) {
  var s = '缓冲百分比:'+lp +'% ,';
  s += '已播放占已缓冲的百分比:'+ppr +'% ,';
  s += '已播放占总时长的百分比:'+ppa +'%';
  s += '已播放时间:'+pt+ '毫秒 ,';
  s += '总时间:'+tt+ '毫秒';
  $("#play_info").text(s);
});