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\", {”很熟悉。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);
});