jPlayer簡介:
想在網頁上播放背景音樂,不想用html標籤的方式,因爲那樣只有音樂全部下載完以後才能播放,還容易出現跨瀏覽器兼容性的問題,於是選了一款基於jQuery的播放器jPlayer來做。
jPlayer可以做什麼:
-
控制並播放你網站上的媒體文件
-
創建播放器,利用html+css定製化播放器樣式
-
將音頻和視頻加入到你的jQuery項目中
-
支持更多的使用HTML5規範的設備
-
支持使用Flash Fallback的舊瀏覽器
-
使用Javascript API控制你網站上的媒體文件jPlayer支持的媒體格式:HTML5: mp3, m4a (AAC), m4v (H.264), ogv*, oga*, wav*, webm* Flash: mp3, m4a (AAC), m4v (H.264)
jPlayer需要兩個文件上傳到你的服務器:
-
Jplayer.swf
-
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", {”很熟悉。setMedia是一個option,根據第二步說的。
第九行“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); });
jPlayer官網:http://www.jplayer.org
jPlayer下載:http://www.jplayer.org/download/
jPlayer官網英文版在線手冊:http://www.jplayer.org/latest/developer-guide/
jPlayer在線演示:http://www.jplayer.org/latest/demos/