前几日开发一个音乐电台用到了jPlayer,见网络上资料很少,官方英文资料太坑爹TAT,于是就写一个手记给大家参考下.
据我观察,jPlayer的原理主要是用到HTML5,在不支持HTML5的浏览器上使用SWF。做到全兼容,这一点很不错。
官方还说明,服务器对于MP3文件不要做GZIP压缩,只是徒增CPU而已。并且在Flash播放GZIP的MP3时会出错。
jPlayer需要两个文件上传到你的服务器。
jquery.jplayer.min.js
Jplayer.swf
最重要的当然还是jquery.min.js.
JPLAYER构造
jPlayer构造在jQuery选择器上。采用 $(ID).jPlayer(Object: options) 的形式执行动作。
在某些场合,jPlayer也可以构造在body上,指你不用播放视频的时候。
注意:swfPath,它定义jPlayer SWF文件的路径。记得把SWF文件上传到你的服务器!
你也可以使用类似jPlayer({solution:"flash, html")的语句规定用什么方式播放媒体优先。
初始化后更改设置
实现一个自动播放音乐的网页
01 | $(document).ready( function (){ |
02 | $( "#jquery_jplayer_1" ).jPlayer({ |
03 | ready: function (event) { |
04 | $( this ).jPlayer( "setMedia" , { |
07 | }); |
08 | }, |
09 | swfPath: "js" , |
10 | supplied: "m4a, oga" , |
11 | }).jPlayer( "play" ); |
12 | }); |
解释一下上面的代码:
第一行“$(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方法
$(id).jPlayer( "setMedia", Object: media ) : jQuery
描述:这个方法被用来定义要播放的媒体, 媒体参数是一个对象,具有属性定义不同的编码格式。
所有的编码格式都应该在构造设置中指定“jPlayer({ supplied : "f1, f2, fN"})”。
jPlayer构造选项jPlayer({ preload )是用来指定何时开始下载媒体。
参数:媒体
对象,定义媒体的格式以及网址。
支持格式:
MP3
- MP3音频格式
M4A- MP4音频格式
M4V- MP4视频格式
webma- 的WebM音频格式
webmv- WebM视频格式
oga- OGG音频格式
OGV- OGG视频格式
FLA- FLV音频格式
FLV- FLV视频格式
WAV- wav音频格式
示例代码:
01 | $( "#jpId" ).jPlayer( { |
02 | ready: function () { |
03 | $( this ).jPlayer( "setMedia" , { |
04 | m4a: "m4a/elvis.m4a" , |
05 | oga: "oga/elvis.oga" , |
06 | webma: "webm/elvis.webm" |
07 | }); |
08 | }, |
09 | supplied: "webma, m4a, oga" |
10 | ); |
$(id).jPlayer( "clearMedia") : jQuery
描述:这个方法用来清空媒体并且停止播放音乐。如果媒体正在下载,则取消。在其设置完毕以后,如果在jPlayer("setMedia")之前使用.jPlayer("play"),将会产生错误事件。
参数:这个方法没有参数。
示例代码:
1
$(
"#jpId"
).jPlayer(
"clearMedia"
);
$(id).jPlayer( "load") : jQuery
描述:这个方法用来在jPlayer("setMedia");之后载入音乐。当然,如果你使用预载({preload:"auto"}),这个方法有没有一样。
参数:这个方法没有参数。
示例代码:
1
$(
"#jpId"
).jPlayer(
"load"
);
$(id).jPlayer( "play", [Number: time] ) : jQuery
描述:这个方法在jPlayer("setMedia")之前使用,如果没有time参数,新的媒体该方法会从头播放,打开的媒体会从jPlayer("pause")处开始播放。
参数:time(可选),用秒来定义播放位置。
示例代码:
01
$(
"#jpId"
).jPlayer( {
02
ready:
function
() {
// $.jPlayer.event.ready 事件
03
$(
this
).jPlayer(
"setMedia"
, {
// 设置媒体
04
m4v:
"m4v/presentation.m4v"
05
}).jPlayer(
"play"
);
// 自动播放媒体
06
},
07
ended:
function
() {
// The $.jPlayer.event.ended 事件
08
$(
this
).jPlayer(
"play"
);
//重复播放媒体
09
},
10
supplied:
"m4v"
11
);
12
13
$(
"#jumpToTime"
).click(
function
() {
14
$(
"#jpId"
).jPlayer(
"play"
, 42);
// 从媒体的42秒处开始播放.
15
});