Jplayer使用方法简析

1、现在看一下它的html结构：

<div id="jquery_jplayer_1" class="jp-jplayer"></div><!--存放音频和视频源，绝对需要-->
<div id="jp_container_1" class="jp-audio" role="application" aria-label="media player"><!--播放器样式wrap--><div class="jp-type-single"><div class="jp-gui jp-interface"><div class="jp-controls"><!--播放和停止按钮--><button class="jp-play" role="button" tabindex="0">play</button><button class="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">mute</button><button class="jp-volume-max" role="button" tabindex="0">max volume</button><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><div class="jp-toggles"><button class="jp-repeat" role="button" tabindex="0">repeat</button></div></div></div><div class="jp-details"><!--视频的主题--><div class="jp-title" aria-label="title">&nbsp;</div></div><div class="jp-no-solution"><!--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 id="jquery_jplayer_1" class="jp-jplayer"></div><!--存放音频和视频源，绝对需要-->
<div id="jp_container_1" class="jp-audio" role="application" aria-label="media player"><!--播放器样式wrap--><div class="jp-type-single"><div class="jp-gui jp-interface"><div class="jp-controls"><!--播放暂停按钮--><button class="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>

接下来就是样式问题了。我们可以通过重置它的样式来实现我们原本的功能，我建议是在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及以更高版本新增的参数，与前面三个值不能同时用的，不然会引起冲突。

这么说还是有些官方，我尝试删掉这个参数，在chrome46.0.2490.86，Firefox45.0.2，Opera36.0.2130.65，IE7、8中，音频依然可以正常播放。根据官方API所诉，注意Firefox 3.6 音频播放器使用Flash解决方案要求设置选项{wmode:"window"}否则的话，浏览器不嗯能够正确在页面中放置Flash。

第五个参数：useStateClassSkin

默认情况下，播放和静音状态下的dom 元素会添加class jp-state-playing, jp-state-muted 这些状态会对应一些皮肤，是否使用这些状态对应的皮肤。检验它是否对当前页面是否起作用了，我通过注释它后，发现音频不能中途暂停，只能让它播放结束后，再次点击播放，暂停功能失效。

第六个参数：autoBlur

点击之后自动失去焦点。删除后，对音频并无其他影响。该参数是可选项。

第七个参数：smoothPlayBar

官方解释：平滑过渡播放条。

将值设置为false，可以发现进度条是点击时，没有了过渡的过程，是直接到所点位置，体验并不好。

第八个参数：keyEnabled

官方解释：启用这个实例的键盘控制器特性。

通俗点就是是否允许键盘控制播放。

第九个参数：remainingDuration

是否显示剩余播放时间,如果为false 那么duration 那个dom显示的是【3:07】,如果为true 显示的为【-3:07】。像我的音频没有时间段显示的样式，那么这个参数也是可选的。

第十个参数：toggleDuration

允许点击剩余时间的dom 时切换剩余播放时间的方式，比如从【3:07】点击变成【-3：07】如果设置为false ,那么点击无效，只能显示remainingDuration 设置的方式。也是可选参数。

如上，demo里面所用到的参数你都知道怎么用了么？如果还有不清楚的，你可以自己直接使用压缩包里面的demo试验一下。

除了如上的参数，还有几个参数需特别说明一下:

size:设置媒体的宽高；

cssSelectorAncestor:定义所有cssSelector的祖先的一个cssSelector。作用相当于css的元素选择器；

globalVolume：true时共享volume，一个页面存在多个媒体时，调整其中一个的音量大小，其他也跟着改变，false则不受影响

这样一些简单的媒体播放需求就实现了。有很多页面会提出自动播放的需求，在jpalyer里面要怎么实现了。其实也不难。

在ready参数下，

$(this).jPlayer("setMedia", {autoPlay: true
}).jPlayer("play");

自动播放就实现了，页面需求升级，需要媒体循环自动播放，如何实现？在API提供了这样一个事件：

ended: function () {$(this).jPlayer("play");
},

需求继续升级，媒体自动播放1秒后停止，如何实现呢？

$(this).jPlayer("setMedia", {}).jPlayer("pause", 1);
这样还不够，一个页面同时有多个媒体（这个不细说，压缩包里面有案例），怎么阻止同时播放?play: function() { // 当前媒体播放时，其他媒体暂停播放$(this).jPlayer("pauseOthers");
},
......

需求变化很多，但万变不离其中，有觉得实现不了的功能，可以多多看下官网的API，maybe你就找到了解决之道。

Jplayer使用方法简析相关推荐

C# 并行运算方法简析
一.概述首先应该明白并行和并发的区别. 并发就是有多个几乎同时到达的线程需要被处理,但只有有限个CPU,所以需要竞争上岗. 并行指有多个CPU资源同时处理多个线程,不存在竞争的概念,可以大量节省运行 ...
Halcon阈值分割方法简析
1. 基于直方图的自动阈值分割 1.1 关键算子 auto_threshold(Image : Regions : Sigma : ):使用多阈值分割单通道图像. 首先,计算图像的灰度直方图. 然后, ...
噪声的频谱分析的重要意义_噪声测量：噪声源识别与定位的方法简析
来源:节选自<声学测量> 作者:陈克安曾向阳李海英噪声测量的一项重要内容就是估计和寻找产生噪声的声源.确定噪声源位置是实施控制噪声措施的先决条件.从声源上控制噪声可以大大减轻噪声治理 ...
【博学谷学习记录】超强总结，用心分享|产品经理需求分析方法简析
为什么要进行需求分析? 作为产品经理,每天要接触到大大小小不同的需求,在面对需求时,需要进行有效的需求分析,才能更好地了解问题,从而制定相应的解决方案,就是通过用户的问题,找到用户需求的最本质,给予最 ...
正则表达式中Pattern类、Matcher类和matches()方法简析
1.简介: java.util.regex是一个用正则表达式所订制的模式来对字符串进行匹配工作的类库包. 它包括两个类:Pattern和Matcher . Pattern: 一个Pattern是一 ...
【博学谷学习记录】超强总结，用心分享|产品经理PEST分析方法简析
PEST分析法是什么? PEST分析法是战略外部环境分析的基本工具,即通过政治的(Politics).经济的(Economic).社会的(Society)和技术的(Technology)角度或四个方面 ...
Nmap使用方法简析
NMAP 引子: Nmap, 是 Network Mapper 的缩写,由 Gordon Lyon 维护(更多关于 Mr. Lyon 的信息在这里: http://insecure.org/fyodo ...
refresh() 方法简析
IOC 控制反转_牦牛先生的博客-CSDN博客_ioc控制反转和依赖注入Spring Framework 概述https://blog.csdn.net/centrl/article/details/ ...
提高app用户粘性的方法简析
app运营中,产品的用户增长固然很重要,但是用户的粘性和留存率同样重要.留存决定着我们整体的用户数量,假如留存率很低的话即使你增长得很快,但流失得也很多,到头来会发现整体的用户量并没有大幅度的改观. ...

Jplayer使用方法简析

Jplayer使用方法简析相关推荐

最新文章

热门文章