jPlayer使⽤指南
jPlayer使⽤指南
html5游戏开发视频本⼈⾃⼰使⽤代码：
//播放
$(id).jPlayer( {
ready : function(event) {
$(this).jPlayer("setMedia", {
mp3 : voiceUrl
}).jPlayer("play");
},
swfPath :basePath+"/jPlayer",
supplied : "mp3",
wmode : "window"
}).jPlayer("play");
//停⽌
$("#jquery_jplayer_" + num).jPlayer("stop");
1. jPlayer基础
1\ FLASH安全规则
a. jPlay插件的SWF⽂件必须要在你的域内,⼦域与主域被视为不同域.也不要从happyworm⽹站(就是提供这个插件的⽹站)来链接这些SWF⽂件.你需要把这些⽂件上传到你的域下的js⽬录中，如果需要的话，也可以通过创建选项swfPath来更改路径.
下⾯作者开始吐槽: 从技术上讲，你是可以从他的happyworm⽹站上链接⼀些JS⽂件，但你的⽹站中必须要有⼀个Jplayer.swf.当然作者不建议你这么⼲，因为他们的资源是有限的，架不住啊.
b. 在本地运⾏jPlayer会⽣成FLASH安全问题，你需要通过FLASH SETTINGS MANAGER来解决这个问题.有兴趣去仔细看看啊.
2\ MP3编码
a. 因为有些浏览器使⽤jPlayer的FLASH元素，所有要播放的MP3⽂件必须要根据浏览器的ADOBE FLASH插件的限制来编码.
1. Constant Bitrate Encoded, 不变⽐特编码,
2. Sample Rate: 样本率(在计算机或通信系统的⾳频开发中，采样频率指每秒收集的⽤于数字化代表事件的声⾳采样的个数),
11,0025Hz的倍数，如22,050Hz and 44,100Hz都是可⽤的采样率.
3\ 应⽤服务针对MP3/OGG的响应
a. 你的域服务必须要对MP3/OGG的正确响应，即
1. MP3⽂件必须要有audio/mpeg或者application/octet-stream的内容类型(MIME Type);
2. OGG⽂件必须要有application/ogg的内容类型(MIME Type);
3. Content-Encoding: gzip,(许多要求标头字段可让客户端在值的部份指定数个可接受的选项，⽽且在某些情况中，甚⾄可以指定每⼀个选项的喜好等级。多个项⽬可使⽤逗号来区隔。例如，客户端可以传送包括 "Content-Encoding:gzip, compress" 的要求标头，指出它将接受任⼀种压缩类型。如果服务器对响应本⽂使⽤ gzip 编码⽅式，则它的响应标头将包括 "Content-Encoding:gzip") , 是不可以的，因为Adobe Flash Plugin会挂掉.
4\ 如何顺⼿⼲掉jPlayer呢?
a. 因为jPlayer在⼀些浏览器中使⽤FLASH，所以jPlayer所在的层，是不能隐藏的，别把它所在层的CSS属性display:none，那就真的none了.还有jPlay⾃⼰负责处理⾃⼰的CSS样式，因此把它的CSS与你的CSS定义⽂件分开.
b. 除了这些还要⼩⼼使⽤任何jQuery的动画函数, 像什么fadeIn(), fadeOut()之类，是不针能对jPlay所在层或所在层的⽗节点耍的.
2. jPlay构造器,$(id).jPlayer( Object: options ) : jQuery.
1\描述;
fastjson远程代码执行漏洞c语言下载免费a. jPlay构造器当你给定⼀个id后，就会使⽤你提供的选项(如果有的话)创建了. jPlay使⽤的层必须要是空的，并且其它的什么猫猫狗狗的应⽤都不能使⽤.作者⼜很贴⼼的提⽰，如果你觉得为难，就把它放到<body>中的顶层元素吧，这样jPlay的操作就不会被其它什么最讨厌的⼲扰了.
b. 注意啊，最重要的选项是ready项, 这个项呢定义了当jPlay⼀旦可⽤时做什么. 在ready()被调⽤之前，试图向jPlay发送什么命令的，必将导致运⾏时错误，那是⽆疑的.
c. 还有下⼀个最重要的选项就是swfPath了, 定义了jPlayer SWF⽂件的位置，记得哦，把这个SWF⽂件上传到你的服务器中，再次强调.
2\ 参数
a. 选项:
1. ready: 函数(默认: function(){})，定义了⼀个当jPlay插件可⽤时调⽤的函数. 为了引⽤当前实例，请使⽤this.element.⼀般情况下推
荐,this.element.jPlayer("setFile",mp3)，为jPlay指定⼀个将要使⽤的可⽤MP3⽂件.//这个函数啊，是⽤来消除javascript代码与flash代码之间的竞争的，确保了javascript代码执⾏时,flash函数定义都到位了.
2. swfPaht: 字符串:(默认: "js"), 定义jPlayer SWF⽂件的相对或绝路径//这样就为开发者提供了⼀个可选的SWF存放路径，当然URL要以标准的URL编码⽅式，并且对于反斜杠不依赖,"myPath/"="myPath"
3. volume: 数字:(默认: 80), 按百分⽐定义⾳量.
4. oggSupport: 布尔:(默认: false), 对于OGG格式浏览器，在HTML5中OGG⽀持使能.//这样开发者就可以为每个MP3⽂件定义⼀个对应的可选OGG⽂件.
5. nativeSupport: 布尔:(默认: true), 在HTML5中对于本地⾳频⽀持使能.//如果将其值设置为false，将允许开发者强迫jPlay使⽤FLASH 组件，在html5浏览器上开发时，这个选项对于测试swfPath是否正常很有⽤，这家伙是念念不忘swfPath啊，警告，嗯，有些mobile浏览器不⽀持FLASH，但⽀持HTML5.
6. customCssIds: 布尔:(默认: false), 默认时jPlay使⽤预先定的cssIds集合, 如果将这个值设为true，就取消了与默认ID们的关联，开发者可以⾃⼰定义⼀套CSS id，那我直是没事⼲了，闲得.
7. graphicsFix: 布尔:(默认: true), 图像更新处理，这个对于Safari和Chrome浏览器来说特别有⽤，它能对⼀个被移出屏幕之外的<div>中写⼊⼀个随机数，我怎么没看出来有什么特别⽤．//jPlay项⽬如果没⽤进度条的话，可把这个值设成false，警告，屏幕阅读器(⼤概指能电⼦发声阅读之类的⼯具)可能试图把这个随机数读出来，注意⽤的是loud有喜感.
8. cssPrefix: 字符串:(默认: "jqjp")，极品极品? 对于jPlay内部⽣成的HTML代码定义的ID前缀. //作者说如果你有命名冲突的话这个很管⽤，但是作者也承认⼀般⼈不会这么⽆聊.
9. errorAlerts: 布尔:(默认: false), 通过alerts发出致命错误报告. //作者偷偷地说，如果这项使能的话，不得了，能帮你debug项⽬哦.
10. warningAlerts 布尔:(默认: false), 与上述差不多.报告警告.
11. position: 字符串:(默认: absolute), left: 字符串:(默认: 0), top: 字符串:(默认: 0),width: 字符串:(默认: 0), height: 字符串:(默认: 0),bgcolor: 字符串:(默认: #fffff)，六个css属性的定义.
12. quality：字符串:(默认: high): 定义FLASH的播放质量.
3\ ⼀些例⼦:
b. 例⼦1: 开始初始化jPlayer
$(document).ready(function() {
$("#jpId").jPlayer( { //先要引⽤存放播放器的层
ready: function () {//ready属性的设置
this.element.jPlayer("setFile", "../mp3/elvis.mp3"); // 定义mp3⽂件,
}
});
});
d. 例⼦4: 觉得前⾯初始化例⼦太简单的话，那么下⾯的例⼦就⾼级⼀些了，反正我没感觉⾼级在哪⾥.
$("#jpId").jPlayer( {
ready: function () {
智能建造城市// 直接调⽤该实例的jPlayer⽅法(但如果这么⼲，就不能⽀持jQuery宝贵的连缀操作了)
this.setFile("mp3/elvis.mp3", ""); // 定义mp3及相应的ogg⽂件
this.play(); // ⾃动播放
},
oggSupport: true//使能ogg⽀持
});
e. 例⼦5: ⼀个坏例⼦,
$("#jpId").jPlayer( {
ready: function () {
this.element.jPlayer("setFile", "elvis.mp3");
}
});
$("#jpId").jPlayer("play"); // 杯具发⽣的原因在于，这个PLAY放在ready之外，因此还没准备好就开播，会挂的.
3. jPlay⽅法:jPlay的控制是通过向$(id).jPlayer()的插件⽅法发送⽅法名来实现的.
a. $(id).jPlayer( "cssId", String: methodName, String: methodCssId ) : jQuery
该cssId⽅法，是⽤来创建jPlay与⽹页上的CSS元素之间关联关系的.⽐如说，把⼀个⽹页上的按键图⽚与播放命令相关联，对于这个⽅法本⼈表⽰甚慰.⽐较⽅便啊，默认的情况下,jPlay使⽤⼀个预定义的cssId集合，当然也可以通过设置customCssIds为真来改变他，好吧我承认我上⾯说错了.此外,⼀个jPlay⽅法只能关联⼀个cssID，新的关联会⾃动取消⽼的.上⾯的调⽤形式中methodCssId指的是要关联的
cssID,methodName即⽅法名，那么有哪些⽅法名呢，开始,:
1. play=显然是播放mp3的⽅法,
2. pause=显然是暂停mp3的⽅法,
3. stop=显然是停⽌mp3的⽅法
4. loadBar=监视与操纵装载进程条
5. playBar=播放进度条
6. volumeMin=最⼩⾳量
7. volumeMax=最⼤⾳量 8. volumeBar=监听⾳量条 9. volumeBarValue=操作⾳量值.
⼀个⼩例⼦:
$(document).ready(function() {
手机表格制作$("#jpId").jPlayer( {
ready: function () {
this.element.jPlayer("setFile", "mp3/elvis.mp3");
},
customCssIds: true
})
.jPlayer( "cssId", "play", "thePlayButton" )
.jPlayer( "cssId", "loadBar", "theLoadBar" );
});
b. $(id).jPlayer( "setFile", String: mp3, [String: ogg] ) : jQuery
该⽅法是⽤来定义要播放的⽂件, mp3⽂件是强制要的，后⾯的ogg则不⼀定.当然如果你要的话，显然要在初始化jPlay时要把ogg⽀持使能，但是如果这个使能的话，对不住mp3,ogg那都是⼀定要的.我实在忍不住了，查了下ogg是什么东西，如下(Ogg是⼀种先进的有损的⾳频压缩技术，正式名称是Ogg Vorbis，是⼀种免费的开源⾳频格式。OGG编码格式远⽐90年代开发成功的MP3先进，它可以在相对较低的数据速率下实现⽐MP3更好的⾳质。)平静⼀下⼼情,go on.
这个⽅法⼀定要在jPlay其它⽅法调⽤之前使⽤,⽐如.jPlayer("play")⽅法，那是当然的，我们都是讲理的⼈嘛.此外，本插件在setFile⽅法调⽤时是不会下载新⽂件的，且此命令⼀发，不得了，任何正在播放的⼩曲⼉都会被停⽌并且下载也会取消.
如果{nativeSupport: true}被设了,jPlayer将使⽤html5解决⽅案，如果有的话，没有就使⽤flash播放,{nativeSupport: false}设置，则⼤家⼀律⽤Flash，如果{oggSupport: true}被设的话, OGG⽂件就⼀定会被那些⽀持HTML5浏览器播放了，羡慕，其它就⽤MP3基于HTML5或者FLASH凑合了.总之{nativeSupport: true}与{oggSupport: true}结合的话，优先权是这样的: HTML5 > Flash 且 OGG > MP3, 就这样的.
参数: mp3: mp3⽂件，可以定义URL或⽂件名, ogg: ogg⽂件，可以定义URL或⽂件名.
例⼦很简单不写了.
c. $(id).jPlayer( "clearFile" ) : jQuery
该⽅法⽤来清除声⾳⽂件并停⽌放⾳，如果有声⾳⽂件正在下载的话，下载也会取消的.这个命令⼀发,⼀些播放命令，如jPlayer("play")之类的全歇菜了，除⾮有新⽂件通过setFile来设置，才管⽤.参数就是没有参数.
d. $(id).jPlayer( "play" ) : jQuery
该⽅法即是播放了，如果必要的话会开始下载⽂件哦.播放会从mp3开始的地⽅，或者上次暂停的地⽅开始.参数就是没有.
jquery下载文件进度条e. $(id).jPlayer( "pause" ) : jQuery
该⽅法即是暂停了，如果暂停的话，下次播放开始的地⽅会存在插件中的，厉害吧.也没有参数.
f. $(id).jPlayer( "stop" ) : jQuery
该⽅法即停⽌了，播放的位置会恢复到歌⼦开始的地⽅.如果在setfile命令之后，光速地使⽤该⽅法，并且浏览器使⽤HTML5 audio的话，这个命令⼀开始会当掉，不过不要紧，会有⼀个内部的计时器每隔100S不断地测试命令直到成功.没有参数
g. $(id).jPlayer( "playHead", Number: percentOfLoaded ) : jQuery
这个⽅法将当前的播放地点移到某个新地⽅，最初的⽤法是插件内部⽤来响应在下载进度条上的点击，然后把播放位置放在新位置，并且如果在setfile命令之后，光速地使⽤...，同上，参数是percentOfLoaded, 0-100，不过有⼀点千万要搞清的.这个⽐例可不是与整个mp3⽂件⼤⼩相⽐,⽽是针对当前下载的⽂件量⽐较,⽐如说当前下载量为整个⽂件的50%,⽽percentOfLoaded设为50%，那么当前播放的位置会移到整个⽂件的25%.
h. $(id).jPlayer( "playHeadTime", Number: playedTime ) : jQuery
这个⽅法是将播放位置移到新的位置，定义是毫秒单位，并且如果在setfile命令之后，光速地使⽤...，同上，参数,playedTime播放位置相对于歌⼦开始处的毫秒数.如果歌⼉正在下载，那么播放会耐⼼地等待到下载那个点时才开始.
i. $(id).jPlayer( "volume", Number: percent ) : jQuery
这个⽅法是控制⾳量的.参数是与最⼤⾳量的⽐较值.静是0, 中间是50，最⼤100, 此外还有:$(id).jPlayer( "volumeMin" ) : jQuery这个是静⾳,$(id).jPlayer( "volumeMax" ) : jQuery，这个是最⼤.都没有参数.
j. $(id).jPlayer( "onSoundComplete", Function: endOfSong ) : jQuery
这个⽅法⽤来定义⼀个回调函数，当歌⼉放完后调⽤. 参数就是endOfSong函数名.
两个例⼦:
$("#jpId").jPlayer("onSoundComplete", function() { this.element.jPlayer("play"); // ⾃动重放});
$("#jpId").jPlayer("onSoundComplete", function() { this.play(); // 直接调⽤jPlay实例的⽅法，不⽀持连缀哦, // ⾃动重放});
k. $(id).jPlayer( "onProgressChange", Function: handleChanges ) : jQuery
这个⽅法⽤来定义⼀个函数, 可接收五个参数，每次插件更新下载进度条或播放进度条时调⽤，在mp3(或ogg)⽂件播放时，该事件每100ms发⽣⼀次.那么看⼀下handleChanges函数的定义吧,
handleChanges( Number: loadPercent, Number: playedPercentRelative,Number: playedPercentAbsolute, Number: playedTime, Number: totalTime )
参数:
1. loadPercent: 0-100，定义下载的百分⽐,
2. playedPercentRelative: 0-100，定义与当前下载的百分⽐相较的播放百分⽐.
3. playedPercentAbsolute: 0-100，定义当前播放的百分⽐,
4. playedTime: 当前播放时间，毫秒单位.
5. totalTime: 定义整个播放时间,，毫秒单位.
例⼦:
$("#jpId").jPlayer("onProgressChange", function(lp,ppr,ppa,pt,tt) {
$("#myLoadInfo").text(lp+"%"); // 显⽰下载的百分⽐.
$"#myPlayInfo").text(ppa+"%"); // 显⽰播放的百分⽐.
});
l. $(id).jPlayer( "getData", String: dataName ) : Variable
该⽅法是有来访问jPlay内部的配置信息.内部的配置对象也可以通过$(id).data("fig")来访问，但是,however，这会开放所有的针对data的读/写操作，这个只对⾼级的开发者建议使⽤哦.参数:dataName,⽤来定义从jPlay插件内部配置对象中返回的data的元素名，返回的数据类型根据dataName不同⽽不同，什么都有的.下⾯是⼀⼤堆数据集，包括，构造器数据集(Constructor option data set at creation)，内部配置数据集(Internal Configuration Data), 诊断信息(Diagnostic Information), cssID数据集(CSS Id Information), 分享cssId结构的对象集(Objects that share the cssId structure)
例⼦:
$("#jpId").jPlayer( {
ready: function() {
this.element.jPlayer("setFile", "elvis.mp3").jPlayer("play");
$("#jpHTML5").text("html5 = " + this.element.jPlayer("getData", "html5")); //显⽰html5相关的信息
}
});
setInterval( function() {//设置计时器
if($("#jpId").jPlayer("getData", "diag.isPlaying"))//判断是不是在播放
$("#jpPlaying").text("Listen up!"); //如果在放就说'听着'
} else {
$("#jpPlaying").text("Silence is golden!");//不是就说，沉默是⾦呐
}
var config = $("#jpId").data("fig");//整个取出来
var mSecLeft = alTime - config.diag.playedTime;//还有多少时间才结束
$("#jpTimeLeft").text(mSecLeft + " milliseconds remain!");
}, 500 );
4\ jPlayer函数
a. $.vertTime( Number: milliSeconds ) : String
这个函数⽤来把时间从毫秒转换成⼩时/分/秒的字符串形式.字符串形式由$.jPlayer.timeFormat对象来定义.参数就是毫秒数.
例⼦:
$("#jpId").jPlayer("onProgressChange", function(lp,ppr,ppa,pt,tt) {
$"#playTime").text($.vertTime(pt)); //当前播放时间 默认格式'mm:ss'
$"#totalTime").text($.vertTime(tt)); //总共播放时间 默认格式'mm:ss'
});
5\ jPlayer对象
a. $.jPlayer.defaults : Object
这个对象保存有jPlayer实例的默认值，通过在jPlayer构造器中设置选项值，开发者可以修改$.jPlayer.defaults对象来配置所有后继的jPlayer 实例，但是如果在实例化jPlayer之后，再改变默认值的话，那么对于已有的jPlayer实例就不会造成影响了.
b. $.jPlayer.timeFormat : Object
这个对象⽤来给出$.vertTime( Number: milliSeconds )函数返回的时间格式.有⼀系列的参数:
1.showHour: 布尔值，默认为false，显⽰⼩时,
2. showMin: 布尔值，默认为true，显⽰分钟,
3. showSec: 布尔值，默认为true，显⽰秒,
4.padHour: 布尔值，默认为false, 在⼩时数⼩10之前加0,
5. padMin,
6. padSec, 这两个参数这个作者完全进⼊了迷糊的场景了，不说也罢
7. sepHour, sepMin,sepSec, 跟在⼩时，分钟，秒之后的分隔符, 显然作者到这时还没有睡醒过来.
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论