这篇文章主要介绍了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
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
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
/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
/div
/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
/div
/div
/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。
第五个参数：useStateClassSkin
默认情况下，JP-state-playing，JP-state-muted类将被添加到处于播放和静音状态的dom元素中。这些状态将对应于一些皮肤。是否要使用这些状态对应的皮肤？检查它在当前页面上是否有效。评论了一下，发现音频不能中途暂停。我只能让它播放，然后再点播放。暂停功能无效。
第六个参数：autoBlur
点击后自动失去焦点。删除后对音频没有其他影响。该参数是可选的。
第七个参数：smoothPlayBar
官方解释：平滑过渡播放条。
如果设置值为false，可以发现点击进度条，没有过渡过程，而是直接到点击的位置，体验不好。
第八个参数：keyEnabled
官方解释：启用该实例的键盘控制器功能。
通俗点就是是否允许键盘控制播放。
第九个参数：remainingDuration
是否显示剩余播放时间，如果为false，则duration的dom显示[3:07]，如果为true，则显示[-3:07]。如果我的音频没有时间段显示样式，此参数也是可选的。
第十个参数：toggleDuration
允许在点击剩余时间的dom时切换剩余播放时间的模式，比如从[3:07]点击到[-3: 07]。如果设置为false，则点击无效，只能显示remainingDuration设置的模式。也是一个可选参数。
如上，你知道如何使用演示中使用的所有参数吗？如果还是不清楚，可以直接用压缩包里的demo自己试试。
除了上述参数之外，还有几个参数需要特别说明：
Size:设置媒体的宽度和高度；
CssSelectorAncestor:定义所有CSS选择器的祖先的cssSelector。相当于css的元素选择器；
全局：当卷为真时共享卷。当一页上有多个媒体时，调整其中一个媒体的音量，其他媒体也会相应改变。false不会受到影响。
这样就实现了一些简单的媒体播放需求。有许多页面会要求自动播放。如何在jpalyer中实现？其实不难。
在就绪参数下，
$(这个)。jp player(' setMedia '，{
自动播放：真
}).jp player(' play ')；
将实现自动播放。该网页需要升级，媒体流通将需要自动播放。如何才能实现？API提供了这样的事件：
已结束：函数(){
$(这个)。jp player(' play ')；
},
继续升级需求，媒体会自动播放1秒然后停止。如何实现这一点？
$(这个)。jp player(' setMedia '，{
}).jp player(' pause '，1)；
这还不够。一个页面同时有多个媒体(这个我就不细说了，压缩包里有案例)。怎么才能防止它同时播放？
Play: function() {//当前媒体播放时，其他媒体暂停播放。
$(这个)。jp layer(' pauseOthers ')；
},
.
需求有很多变化，但是从来不变，还有一些功能我觉得实现不了。可以多看看官网的API，说不定会找到解决办法。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。