jquery插件Jplayer使用方法简析


Posted in Javascript onApril 22, 2016

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

jquery插件Jplayer使用方法简析

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

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

jquery插件Jplayer使用方法简析

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

demo的样式是这样的:

jquery插件Jplayer使用方法简析

现在看一下它的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"> </div>
        <div class="jp-duration" role="timer" aria-label="duration"> </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"> </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你就找到了解决之道。

Javascript 相关文章推荐
javascript 避免闭包引发的问题
Mar 17 Javascript
Jquery中$.post和$.ajax的用法小结
Apr 28 Javascript
javascript实现图片跟随鼠标移动效果的方法
May 13 Javascript
AngularJS中实现用户访问的身份认证和表单验证功能
Apr 21 Javascript
Highcharts学习之坐标轴
Aug 02 Javascript
jQuery niceScroll滚动条错位问题的解决方法
Feb 03 jQuery
浅谈react性能优化的方法
Sep 05 Javascript
详解Express笔记之动态渲染HTML(新手入坑)
Dec 13 Javascript
vue-cli3 从搭建到优化的详细步骤
Jan 20 Javascript
layui插件表单验证提交触发提交的例子
Sep 09 Javascript
javascript实现简单打字游戏
Oct 29 Javascript
JS如何实现在弹出窗口中加载页面
Dec 03 Javascript
jQuery点击其他地方时菜单消失的实现方法
Apr 22 #Javascript
JS验证逗号隔开可以是中文字母数字
Apr 22 #Javascript
JS简单循环遍历json数组的方法
Apr 22 #Javascript
JavaScript中数组去除重复的三种方法
Apr 22 #Javascript
IE和Firefox之间在JavaScript语法上的差异
Apr 22 #Javascript
动态加载JavaScript文件的两种方法
Apr 22 #Javascript
JavaScript记录光标在编辑器中位置的实现方法
Apr 22 #Javascript
You might like
不用iconv库的gb2312与utf-8的互换函数
2006/10/09 PHP
PHP中round()函数对浮点数进行四舍五入的方法
2014/11/19 PHP
CentOS7系统搭建LAMP及更新PHP版本操作详解
2020/03/26 PHP
Javascript 面试题随笔
2011/03/31 Javascript
js 火狐下取本地路径实现思路
2013/04/02 Javascript
js使用DOM设置单选按钮、复选框及下拉菜单的方法
2015/01/20 Javascript
使用JQuery FancyBox插件实现图片展示特效
2015/11/16 Javascript
原生JS和jQuery版实现文件上传功能
2016/04/18 Javascript
JS获取中文拼音首字母并通过拼音首字母快速查找页面内对应中文内容的方法【附demo源码】
2016/08/19 Javascript
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
2017/03/21 jQuery
Vue.js框架路由使用方法实例详解
2017/08/25 Javascript
JavaScript实现音乐自动切换和轮播
2017/11/05 Javascript
Vue.js添加组件操作示例
2018/06/13 Javascript
修改layui的后台模板的左侧导航栏可以伸缩的方法
2019/09/10 Javascript
解决在Vue中使用axios用form表单出现的问题
2019/10/30 Javascript
openLayer4实现动态改变标注图标
2020/08/17 Javascript
vant自定义二级菜单操作
2020/11/02 Javascript
解决vuex改变了state的值,但是页面没有更新的问题
2020/11/12 Javascript
python转换摩斯密码示例
2014/02/16 Python
解决Python 命令行执行脚本时,提示导入的包找不到的问题
2019/01/19 Python
python代码实现逻辑回归logistic原理
2019/08/07 Python
Pytorch mask_select 函数的用法详解
2020/02/18 Python
使用Python实现微信拍一拍功能的思路代码
2020/07/09 Python
详解基于 Canvas 手撸一个六边形能力图
2019/09/02 HTML / CSS
彪马日本官网:PUMA日本
2019/01/31 全球购物
Java面试笔试题大全
2016/11/23 面试题
护理学毕业生自荐信
2013/10/02 职场文书
大三自我鉴定范文
2013/10/05 职场文书
职业生涯规划设计步骤
2014/01/12 职场文书
班长自荐书范文
2014/02/11 职场文书
学校联谊活动方案
2014/02/15 职场文书
新任教师自我鉴定
2014/02/24 职场文书
nginx简单配置多个server的方法
2021/03/31 Servers
Nginx实现高可用集群构建(Keepalived+Haproxy+Nginx)
2021/05/27 Servers
OpenCV-Python实现轮廓拟合
2021/06/08 Python
python神经网络Xception模型
2022/05/06 Python