初识jplayer插件是因为它的兼容性是最好的，可以兼容到IE6，官网上对它兼容性有很详细的说明

这个是我选择使用它的首要原因。

现在从需求上来了解它的使用方法吧。第一个需求：MP3格式的音频在网页播放，样式如下：

刚看到这个需求的时候，还是觉着有些难度的。我从官网（/）上下载了这个的压缩包，直接拿出了里面的例子套用（路径：/examples/blue.monday/demo-01-supplied-mp3.htm），不得不说，这也是学会使用这个插件的最快的方法。压缩包里面的例子很全面，总有一款适合你。

demo的样式是这样的：

现在看一下它的html结构：

<div></div><!--存放音频和视频源，绝对需要--> <div role="application" aria-label="media player"><!--播放器样式wrap--> <div> <div> <div><!--播放和停止按钮--> <button role="button" tabindex="0">play</button> <button role="button" tabindex="0">stop</button> </div> <div><!--进度条--> <div> <div></div> </div> </div> <div><!--音量控制键--> <button role="button" tabindex="0">mute</button> <button role="button" tabindex="0">max volume</button> <div> <div></div> </div> </div> <div><!--视频时间和重复播放按钮--> <div role="timer" aria-label="time"> </div> <div role="timer" aria-label="duration"> </div> <div> <button role="button" tabindex="0">repeat</button> </div> </div> </div> <div><!--视频的主题--> <div aria-label="title"> </div> </div> <div><!--jplayer提示信息，默认隐藏--> <span>Update Required</span> To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a> </div> </div> </div>

结构是不是很清晰呢，我们需要的所有功能这里面都已经包含了，根据我的需求，我可以只保留播放和暂停按钮以及进度条，简化过后的html：

<div></div><!--存放音频和视频源，绝对需要--> <div role="application" aria-label="media player"><!--播放器样式wrap--> <div> <div> <div><!--播放暂停按钮--> <button role="button" tabindex="0">play</button> </div> <div><!--进度条--> <div> <div></div> </div> </div> </div> </div> </div>

接下来就是样式问题了。我们可以通过重置它的样式来实现我们原本的功能，我建议是在html上新增class，进行重置。

具体怎么实现我就不再细说了，进入最关键的地方，js的调用。

先看一下demo中怎么调用的?并且用到了什么参数?参数代表的是什么意思?

<script type="text/javascript"> //<![CDATA[ $(document).ready(function(){ $("#jquery_jplayer_1").jPlayer({ ready: function () { $(this).jPlayer("setMedia", { title: "Bubble", mp3: "http://jplayer.org/audio/mp3/Miaow-07-Bubble.mp3" }); }, swfPath: "../../dist/jplayer", supplied: "mp3", wmode: "window", useStateClassSkin: true, autoBlur: false, smoothPlayBar: true, keyEnabled: true, remainingDuration: true, toggleDuration: true }); }); //]]> </script>

第一个参数：ready

官网的解释是：定义绑定到$.jPlayer.event.ready 事件的事件处理器函数。(事件处理器ready创建的目的是消除JS代码和Flash代码间的竞态条件。因此保证当js代码执行的时候Flash函数定义已经存在。)

通俗来说就是用来存放媒体的链接、主题。它支持的格式有：MP3、M4V、webma, webmv, oga, ogv, wav, fla, flv, rtmpa, rtmpv，媒体地址必须放在ready内，否则不会生效。

第二个参数：swfPath

官网的解释是：定义jPlayer 的Jplayer.swf文件的路径。它允许开发者把swf文件放在任何位置，使用相对定位或是绝对路径合作或是相对服务器路径引用。

该参数是必须存在的。删除它，ie的低版本浏览器将不会正常播放，并且文件的路径必须是正确的，可以使用相对路径或绝对地址。

第三个参数：supplied

这个参数是告知该媒体支持的格式，对于后台开发而言，在上传媒体时，有十分重要提示作用。

第四个参数：wmode

即窗口模式。有效的wmode值有: window, transparent, opaque, direct, gpu。这些值具体是什么意思呢，度娘已经给出了许多，就不赘述了，就说说它们间的区别。

window：缺省模式；transparent：透明模式；opaque：无窗口模式；'direct'和'gpu'是flashplayer10及以更高版本新增的参数，与前面三个值不能同时用的，不然会引起冲突。

jquery插件Jplayer使用方法简析
本文由 IT学习网 整理，转载请注明“转自IT学习网”，并附上链接。
原文链接：

jquery插件Jplayer插件

标签分类：

jquery插件 Jplayer插件 上一篇：上一篇：基于jquery实现轮播特效
下一篇： 下一篇：jQuery点击其他地方时菜单消失的实现方法