基于jQuery的网页影音播放器jPlayer的基本使用教程
jPlayer简介：
想在网页上播放背景音乐，不想用html标签的方式，因为那样只有音乐全部下载完以后才能播放，还容易出现跨浏览器兼容性的问题，于是选了一款基于jQuery的播放器jPlayer来做。
设置jPlayer的尺寸大小
使用构造函数配置jPlayer({size:Object})设置jPlayer的高宽。
使用构造函数配置jPlayer({sizeFull:Object})设置全屏尺寸。
注意可通过构造函数配置jPlayer({backgroundColor:"#RRGGBB"})设置jPlayer背景颜色。
Flash安全规则
使用下面的代码放宽了对jPlayerSWF文件的限制，并且可以调用任何域名的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生效。
使用JavascriptAPI控制你网站上的媒体文件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，它定义jPlayerSWF文件的路径。记得把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){
vars='缓冲百分比:'+lp+'%,';
s+='已播放占已缓冲的百分比:'+ppr+'%,';
s+='已播放占总时长的百分比:'+ppa+'%';
s+='已播放时间:'+pt+'毫秒,';
s+='总时间:'+tt+'毫秒';
$("#play_info").text(s);
});