jquery插件播放器使用方法简析

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

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

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

刚看到这个需求的时候，还是觉着有些难度的。我从官网(http://www.jplayer.cn/)上下载了这个的压缩包，直接拿出了里面的例子套用（路径：/示例/蓝色。星期一/demo-01-提供-mp3.htm)，不得不说，这也是学会使用这个插件的最快的方法。压缩包里面的例子很全面，总有一款适合你。

演示的样式是这样的：

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

div id=' jquery _ jplayer _ 1 ' class=' jp-jplayer '/div！-存放音频和视频源，绝对需要-div id=' jp _ container _ 1 ' class=' jp-audio '角色='应用程序' aria-label='媒体播放器'！-播放器样式wrap-div class=' jp-type-single ' div class=' jp-GUI jp-interface ' div class=' jp-controls '！-播放和停止按钮- button class='jp-play '角色=' button ' tabindex=' 0 ' play/button button class=' jp-stop '角色=' button ' tabindex=' 0 ' stop/button/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 '角色=' button ' tabindex=' 0 ' mute/button button class=' jp-volume-max '角色=' button ' tabindex=' 0 '最大音量/button div class=' jp-volume-bar ' div class=' jp-volume-bar-value '/div/div/class=' jp-time-holder '！-视频时间和重复播放按钮- div class='jp-current-time '角色=' timer ' aria-label=' time '/div class=' jp-duration '角色=' timer ' aria-label=' duration '/div class=' jp-toggles ' button class=' jp-repeat '角色=' button ' tabindex=' 0 ' repeat/button/div/div class=' jp-details '！-视频的主题-div class=' jp-title ' aria-label=' title '/div/div class=' jp-no-solution '！- jplayer提示信息，默认隐藏跨度需要更新/span要播放媒体，您需要将浏览器更新到最新版本，或者更新您的a href=http://get。土坯房。com/flash player/' target=' _ blank ' flash插件/a/div/div/div结构是不是很清晰呢，我们需要的所有功能这里面都已经包含了，根据我的需求，我可以只保留播放和暂停按钮以及进度条，简化过后的html:

div id=' jquery _ jplayer _ 1 ' class=' jp-jplayer '/div！-存放音频和视频源，绝对需要-div id=' jp _ container _ 1 ' class=' jp-audio '角色='应用程序' aria-label='媒体播放器'！-播放器样式wrap-div class=' jp-type-single ' div class=' jp-GUI jp-interface ' div class=' jp-controls '！-播放暂停按钮- button class='jp-play '角色=' button ' tabindex=' 0 ' play/button/div class=' jp-progress '！-进度条-div class=' jp-seek-bar ' div class=' jp-play-bar '/div/div/div/div

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

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

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

脚本类型='text/javascript'//！[CDATA[$(文档)。ready(function(){ $(' # jquery _ jplayer _ 1 '))。jPlayer({ ready : function(){ $(this))。jPlayer('setMedia '，{ title: 'Bubble '，MP 3: ' http://jPlayer . org/audio/MP3/缪w-07-Bubble . MP3 ' })；}，swfPath: '././dist/jplayer '，supplied: 'mp3 '，wmode: 'window '，useStateClassSkin: true，autoBlur: false，smoothPlayBar: true，keyEnabled: true，remainingDuration: true，togled ural 3360 })；});//]]/脚本的第一个参数：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低版本浏览器将无法正常播放，文件路径必须正确，可以使用相对路径或绝对地址。

第三个参数：已提供。

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

第四个参数：wmode。

窗口模式。有效的wmode值是：窗口、透明、不透明、直接和GPU。这些价值观到底意味着什么？杜娘已经给了很多，我就不细说了，只说说他们之间的区别。

窗口：默认模式；透明：透明模式；不透明：无窗模式；“Direct”和“gpu”是flashplayer10和更高版本中的新参数。它们不能与前三个值同时使用，否则会导致冲突。

所以还是有一些官员。我试图删除这个参数。在chrome46.0.2490.86、Firefox45.0.2、Opera36.0.2130.65、IE7和IE 8中，音频仍然可以正常播放。根据官方API的投诉，注意火狐3.6音频播放器需要设置选项{wmode:'window'}，否则浏览器将无法在页面上正确放置Flash。

第五个参数：useStateClassSkin。

默认情况下，播放和静音状态下的dom元素会添加类JP-state-playing，JP-state-静音状态会对应一些皮肤。是否要使用这些状态对应的皮肤？检查它在当前页面上是否工作。评论完之后发现音频中间不能暂停。我只能在它播放完毕后再点击播放，暂停功能失效。

第六个参数：autoBlur。

点击后自动失去焦点。删除后，对音频没有其他影响。此参数是可选的。

第七个参数：smoothPlayBar。

官方解释：平稳过渡海报。

如果值设置为false，可以发现点击进度条的时候没有过渡过程，而是直接直奔主题，体验不好。

第八个参数：keyEnabled。

官方解释：启用此实例的键盘控制器功能。

流行的观点是是否允许键盘控制播放。

第九个参数：remainingDuration。

是否显示剩余播放时间，如果为假，时长dom显示[3:07]，如果为真，显示[-:07]。如果我的音频没有时间段显示样式，那么这个参数是可选的。

第十个参数：toggleDuration。

点击剩余时间dom时允许切换剩余播放时间模式，例如从[3:07]点击切换到[-3: 07]。如果设置为false，则点击无效，只能显示remainingDuration设置模式。也是可选参数。

如上，你知道如何使用演示中使用的所有参数吗？如果有不清楚的地方，可以直接用压缩包里的演示试用一下。

除了上述参数，还有几个参数需要具体说明。

Size:设置媒体的宽度和高度；

CssSelectorAncestor:定义了一个CSS选择器，它是所有CSS选择器的祖先。相当于css的元素选择器；

全局卷：为真时，共享卷；当一个页面上有多个媒体时，调整其中一个媒体的音量，其他媒体也会相应改变；如果为假，则不会受到影响。

这样就实现了一些简单的媒体播放需求。有很多页面需要自动播放，那么如何在jpalyer中实现呢？其实也不难。

在就绪参数下，

$(这个)。jPlayer('setMedia '，{ autoPlay: true})。jPlayer(' play ')；实现自动播放，页面需要升级，需要媒体循环自动播放。如何实现？该应用编程接口提供了这样一个事件：

ended:函数(){ $(this)。jPlayer(' play ')；}，需求继续升级，媒体自动播放1秒后停止。如何实现这一点？

$(这个)。jPlayer('setMedia '，{})。jPlayer('pause '，1)；这还不够。一个页面同时有多个媒体(这不详细，压缩包中有案例)。怎么防止同时玩？Play:函数(){//当前媒体播放时，其他媒体暂停播放$(此)。jPlayer(' pauseOthers ')；},需求变化很大，但离不开需求。有些功能是你认为无法实现的。你可以多看看官网API，也许你会找到解决办法。