jPlayer使用指南

来源链:接:基础1\FLASH安全规则a.jPlay插件的SWF文件必须要在你的域内,子域与主域被视为不同域.也不要从happyworm.com网站(就是提供这个插件的网站)来链接这些SWF文件.你需要把这些文件上传到你的域下的js目录中,如果需要的话,也可以通过创建选项swfPath来更改路径.下面作者开始吐槽:从技术上讲,你是可以从他的happyworm.com网站上链接一些JS文件,但你的网站中必须要有一个Jplayer.swf.当然作者不建议你这么干,因为他们的资源是有限的,架不住啊.b.在本地运行jPlayer会生成FLASH安全问题,你需要通过FLASHSETTINGSMANAGER来解决这个问题.有兴趣去仔细看看啊.2\MP3编码a.因为有些浏览器使用jPlayer的FLASH元素,所有要播放的MP3文件必须要根据浏览器的ADOBEFLASH插件的限制来编码.1.ConstantBitrateEncoded,不变比特编码,2.SampleRate:样本率(在计算机或通信系统的音频开发中，采样频率指每秒收集的用于数字化代表事件的声音采样的个数),11,0025Hz的倍数,如22,050Hzand44,100Hz都是可用的采样率.3\应用服务针对MP3/OGG的响应a.你的域服务必须要对MP3/OGG的正确响应,即1.MP3文件必须要有audio/mpeg或者application/octet-stream的内容类型(MIMEType);2.OGG文件必须要有application/ogg的内容类型(MIMEType);3.Content-Encoding:gzip,(许多要求标头字段可让客户端在值的部份指定数个可接受的选项，而且在某些情况中，甚至可以指定每一个选项的喜好等级。多个项目可使用逗号来区隔。例如，客户端可以传送包括Content-Encoding:gzip,compress的要求标头，指出它将接受任一种压缩类型。如果服务器对响应本文使用gzip编码方式，则它的响应标头将包括Content-Encoding:gzip),是不可以的,因为AdobeFlashPlugin会挂掉.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\描述;a.jPlay构造器当你给定一个id后,就会使用你提供的选项(如果有的话)创建了.jPlay使用的层必须要是空的,并且其它的什么猫猫狗狗的应用都不能使用.作者又很贴心的提示,如果你觉得为难,就把它放到body中的顶层元素吧,这样jPlay的操作就不会被其它什么最讨厌的干扰了.b.注意啊,最重要的选项是ready项,这个项呢定义了当jPlay一旦可用时做什么.在ready()被调用之前,试图向jPlay发送什么命令的,必将导致运行时错误,那是无疑的.c.还有下一个最重要的选项就是swfPath了,定义了jPlayerSWF文件的位置,记得哦,把这个SWF文件上传到你的服务器中,再次强调.2\参数a.选项:1.ready:函数(默认:function(){}),定义了一个当jPlay插件可用时调用的函数.为了引用当前实例,请使用this.element.一般情况下推荐,this.element.jPlayer(setFile,mp3),为jPlay指定一个将要使用的可用MP3文件.//这个函数啊,是用来消除javascript代码与flash代码之间的竞争的,确保了javascript代码执行时,flash函数定义都到位了.2.swfPaht:字符串:(默认:js),定义jPlayerSWF文件的相对或绝路径//这样就为开发者提供了一个可选的SWF存放路径,当然URL要以标准的URL编码方式,并且对于反斜杠不依赖,myPath/=myPath3.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们的关联,开发者可以自己定义一套CSSid,那我直是没事干了,闲得.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\一些例子:a.先来个HTML的框架headscripttype=text/javascriptsrc=链接的jquery的js文件/scriptscripttype=text/javascriptsrc=js/jquery.jplayer.js//主角出场/scriptscript$(document).ready(function(){});//玩活的地方/script/headbodydivid=jpId/div//为播放器准备的层,按作者的教导这个层可不能hidden的/bodyb.例子1:开始初始化jPlayer$(document).ready(function(){$(#jpId).jPlayer({//先要引用存放播放器的层ready:function(){//ready属性的设置this.element.jPlayer(setFile,../mp3/elvis.mp3);//定义mp3文件,}});});c.例子2:开始初始化jPlayer$(#jpId).jPlayer({ready:function(){this.element.jPlayer(setFile,mp3/elvis.mp3,ogg/elvis.ogg);//定义mp3文件及对应的ogg文件},oggSupport:true,//ogg文件支持使能swfPath:设置作者宝贵的SWF文件路径.});d.例子3:开始初始化jPlayer$(#jpId).jPlayer({ready:function(){this.element.jPlayer(setFile,).jPlayer(play);//设置初始化成功后播放的mp3文件,且自动就播放了},swfPath:jPlayer/js//设置作者宝贵的SWF文件路径.});d.例子4:觉得前面初始化例子太简单的话,那么下面的例子就高级一些了,反正我没感觉高级在哪里.$(#jpId).jPlayer({ready:function(){//直接调用该实例的jPlayer方法(但如果这么干,就不能支持jQuery宝贵的连缀操作了)this.setFile(mp3/elvis.mp3,ogg/elvis.ogg);//定义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,[Strin