jquery插件Jplayer使用方法简析

这篇文章主要介绍了jquery插件jp播放器使用方法简析，具有实用价值，感兴趣的小伙伴们可以参考一下

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

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

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

刚看到这个需求的时候，还是觉着有些难度的。我从官网(

http://www.jplayer.cn

/)上下载了这个的压缩包，直接拿出了里面的例子套用(路径：/examples/blue。周一/演示-01-提供-MP3。htm)，不得不说，这也是学会使用这个插件的最快的方法。压缩包里面的例子很全面，总有一款适合你。

演示的样式是这样的：

现在看一下它的超文本标记语言结构：

div id= jquery _ jp layer _ 1 class= jp-jp layer /div！-存放音频和视频源，绝对需要-

div id= jp _ container _ 1 class= jp-audio role= application aria-label= media player ！-播放器样式包装-

div class=jp-type-single

div class=jp-gui jp-interface

div class=jp-controls ！-播放和停止按钮-

按钮 jp-play role= button tabindex= 0 play/button

按钮 jp-stop role= button tabindex= 0 stop/button

/div

div class=jp-progress ！-进度条-

div class=jp-seek-bar

div class=jp-play-bar/div

/div

div class=jp-volume-controls ！-音量控制键-

button class= jp-mute role= button tabindex= 0 静音/按钮

button class= jp-volume-max role= button tabindex= 0 最大音量/按钮

div class=jp-volume-bar

div class= jp-volume-bar-value /div

/div

div class=jp-time-holder ！-视频时间和重复播放按钮-

div class= jp-current-time role= timer aria-label= time nbsp ./div

div class= jp-duration role= timer aria-label= duration nbsp ./div

jp-切换

jp-重复 role= button tabindex= 0 重复/button

/div

div class=jp-details ！-视频的主题-

div class=" jp-title " aria-label= title nbsp ./div

/div

div class=jp-no-solution ！-jp播放器提示信息，默认隐藏-

跨度需要更新/span

若要播放媒体，您需要将浏览器更新到最新版本，或者更新您的a href= http://获取。土坯。com/flash player/ target= _ blank flash插件/a

/div

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

div id= jquery _ jp layer _ 1 class= jp-jp layer /div！-存放音频和视频源，绝对需要-

div id= jp _ container _ 1 class= jp-audio role= application aria-label= media player ！-播放器样式包装-

div class=jp-type-single

div class=jp-gui jp-interface

div class=jp-controls ！-播放暂停按钮-

按钮 jp-play role= button tabindex= 0 play/button

/div

div class=jp-progress ！-进度条-

div class=jp-seek-bar

div class=jp-play-bar/div

/div

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

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

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

脚本类型=文本/javascript

//![CDATA[

$(文档)。ready(function(){

$(#jquery_jplayer_1 ).jp播放器({

就绪：函数(){

$(这个)。jp播放器( setMedia ，{

标题："泡沫",

MP3: http://jp player。org/audio/MP3/Miaow-07-bubble。 MP3

});

swfPath:././dist/jp player ，

提供： mp3 ，

wmode:窗口，

usestateclasskin:true，

错误，

smoothPlayBar:没错，

keyEnabled: true，

remainingDuration: true，

toggleDuration:真

});

//]]

/脚本

第一个参数：

ready

官网的解释是：定义绑定到$ . jp player . event . ready事件的事件处理函数。(创建事件处理程序ready是为了消除JS代码和Flash代码之间的竞争情况。所以保证了执行js代码时，Flash函数的定义已经存在。)

一般来说是用来存储媒体的链接和主题的。其支持的格式有：MP3、M4V、WebMA、WebMV、OGA、OGV、WAV、FLA、FLV、RTMPA、RTMPV。媒体地址必须置于就绪状态，否则不会生效。

第二个参数：

swfPath

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

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

第三个参数：

supplied

该参数用于告知媒体支持的格式，在上传媒体时对于后台开发非常重要。

第四个参数：

wmode

即窗口模式。有效的wmode值包括：窗口、透明、不透明、直接、GPU。这些值具体意味着什么？度娘已经给了很多了，我就不赘述了，只说两者的区别。

窗口：默认模式；透明：透明模式；不透明：无窗模式； Direct 和 gpu 是flashplayer10及以后版本的新参数，不能和前三个值同时使用，否则会造成冲突。

所以还是有点官方的。我试着删除这个参数。在chrome46.0.2490.86、Firefox45.0.2、Opera36.0.2130.65、IE7和8中，音频仍然可以正常播放。根据官方API，注意火狐3.6音频播放器在使用Flash解决方案时需要设置选项{wmode:window}。否则，浏览器无法在页面中正确放置Flash。