基于jQuery的网页影音播放器jPlayer的基本使用教程


Posted in Javascript onMarch 08, 2016

jPlayer简介:

想在网页上播放背景音乐,不想用html标签的方式,因为那样只有音乐全部下载完以后才能播放,还容易出现跨浏览器兼容性的问题,于是选了一款基于jQuery的播放器jPlayer来做。

设置jPlayer的尺寸大小
使用构造函数配置jPlayer({size:Object})设置jPlayer的高宽。

使用构造函数配置jPlayer({sizeFull:Object})设置全屏尺寸。

注意可通过构造函数配置jPlayer({backgroundColor:"#RRGGBB"})设置jPlayer背景颜色。

Flash 安全规则
使用下面的代码放宽了对jPlayer SWF 文件的限制,并且可以调用任何域名的swf文件了。

flash.system.Security.allowDomain("*");
flash.system.Security.allowInsecureDomain("*");

部署

通常,要上传swf文件和js文件到你域名下的js目录中。更改swf路径使用构造函数配置jPlayer({"swfPath":path})。

严格来讲,插件文件可能会远程链接到jplayer.org上,但请求你们不要链接到jplayer.com上,因为当前我们还没有充足资源做一个cdn。另外,远程服务器上的Flash播放软件要求所有的jPlayer("setMedia", media)设置的多媒体文件URL使用绝对路径。

要在本地开发,你需要在自己的电脑上安装一个服务器,比如apache,使localhost生效。

使用Javascript API控制你网站上的媒体文件jPlayer支持的媒体格式:HTML5: mp3, m4a (AAC), m4v (H.264), ogv*, oga*, wav*, webm* Flash: mp3, m4a (AAC), m4v (H.264)

jPlayer需要两个文件上传到你的服务器:

(1)Jplayer.swf

(2)jquery.jplayer.min.js

jPlayer构造在jQuery选择器上。采用 $(ID).jPlayer(Object: options) 的形式执行动作。在某些场合,jPlayer也可以构造在body上,指你不用播放视频的时候。

注意:swfPath,它定义jPlayer SWF文件的路径。记得把SWF文件上传到你的服务器!你也可以使用类似jPlayer({solution:"flash, html")的语句规定用什么方式播放媒体优先。

初始化后更改设置
初始化之后 使用类似 jPlayer("option",{key:value})的形式改变设置。
实现一个自动播放音乐的网页

$(document).ready(function(){
 $("#jquery_jplayer_1").jPlayer({
 ready: function (event) {
  $(this).jPlayer("setMedia", {
  m4a:"http://www.jplayer.org/audio/m4a/TSP-01-Cro_magnon_man.m4a",
  oga:"http://www.jplayer.org/audio/ogg/TSP-01-Cro_magnon_man.ogg"
  });
 },
 swfPath: "js",
 supplied: "m4a, oga",
 }).jPlayer("play");
});

解释一下上面的代码:

第一行“$(document).ready(function(){”大家都无比亲切吧,文档载入事件。

第二行“$("#jquery_jplayer_1").jPlayer({”选择的是一个DIV,用于承载HTML5元素或是Flash,大家在文档里写一个空的DIV即可。

第三行“ready: function (event) {”,ready是一个键,function是一个值,灰常熟悉的东西。

第四行“$(this).jPlayer("setMedia", {”this指的是“$("#jquery_jplayer_1")”,意为:“$("#jquery_jplayer_1").jPlayer("setMedia", {”很熟悉。setMedia是一个option,根据第二步说的。

第九行“swfPath: "js",”,这个定义了swf播放器所在的相对路径,如果你不打算兼容不支持HTML5的网页,可以不写:)

第十行“supplied: "m4a, oga",”所支持的格式。

第十一行“jPlayer("play");”意为:$("#jquery_jplayer_1").jPlayer("play");,播放媒体,实现自动播放。

jPlayer常用的方法:

//播放
$("#jpId").jPlayer("play");
//暂停
$("#jpId").jPlayer("pause");
//停止
$("#jpId").jPlayer("stop");
//设置进度相关
//1.按歌曲时长百分比
$("#jpId").jPlayer("playHead", 0);// 从 0% 处开始播放
$("#jpId").jPlayer("playHead", 10);// 从 10% 处开始播放
$("#jpId").jPlayer("playHead", 100);// 从 100% 处开始播放
//2.按播放毫秒数
$("#jpId").jPlayer("playHeadTime", 0);// 从 0毫秒 处开始播放
$("#jpId").jPlayer("playHeadTime", 10000); // 从 10000毫秒(10秒) 处开始播放
//设定音量
$("#jpId").jPlayer("volume", 0.25); //设为最大音量的 25%
//绑定事件
//播放结束事件
$("#jpId").jPlayer("onSoundComplete", function() {
  //alert('播放结束了');
  this.element.jPlayer("play"); // 循环播放
});
//播放进行事件
$("#jpId").jPlayer("onProgressChange", function(lp,ppr,ppa,pt,tt) {
  var s = '缓冲百分比:'+lp +'% ,';
  s += '已播放占已缓冲的百分比:'+ppr +'% ,';
  s += '已播放占总时长的百分比:'+ppa +'%';
  s += '已播放时间:'+pt+ '毫秒 ,';
  s += '总时间:'+tt+ '毫秒';
  $("#play_info").text(s);
});
Javascript 相关文章推荐
ie中js创建checkbox默认选中问题探讨
Oct 21 Javascript
了不起的node.js读书笔记之mongodb数据库交互
Dec 22 Javascript
详解JavaScript中Date.UTC()方法的使用
Jun 12 Javascript
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
Nov 06 Javascript
浅析JavaScript中命名空间namespace模式
Jun 22 Javascript
jQuery窗口拖动功能的实现代码
Feb 04 Javascript
webpack打包并将文件加载到指定的位置方法
Feb 22 Javascript
JavaScript引用类型之基本包装类型实例分析【Boolean、Number和String】
Aug 09 Javascript
Vue $emit $refs子父组件间方法的调用实例
Sep 12 Javascript
javascript如何实现create方法
Nov 04 Javascript
基于javascript的无缝滚动动画实现2
Aug 07 Javascript
jquery实现拖拽添加元素功能
Dec 01 jQuery
利用jQuery设计一个简单的web音乐播放器的实例分享
Mar 08 #Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
Mar 08 #Javascript
js实现数组冒泡排序、快速排序原理
Mar 08 #Javascript
Bootstrap多级导航栏(级联导航)的实现代码
Mar 08 #Javascript
javascript html实现网页版日历代码
Mar 08 #Javascript
一道关于JavaScript变量作用域的面试题
Mar 08 #Javascript
理解javascript函数式编程中的闭包(closure)
Mar 08 #Javascript
You might like
PHP 将逗号、空格、回车分隔的字符串转换为数组的函数
2012/06/07 PHP
php中jpgraph类库的使用介绍
2013/08/08 PHP
Extjs学习笔记之七 布局
2010/01/08 Javascript
javascript onmouseout 解决办法
2010/07/17 Javascript
JavaScript随机生成信用卡卡号的方法
2015/04/07 Javascript
JavaScript控制网页平滑滚动到指定元素位置的方法
2015/04/17 Javascript
JavaScript中循环遍历Array与Map的方法小结
2016/03/12 Javascript
关于js函数解释(包括内嵌,对象等)
2016/11/20 Javascript
Angular directive递归实现目录树结构代码实例
2017/05/05 Javascript
js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果
2017/07/17 Javascript
解决Js先触发失去焦点事件再执行点击事件的问题
2018/08/30 Javascript
Nuxt.js之自动路由原理的实现方法
2018/11/21 Javascript
jquery实现选项卡切换代码实例
2019/05/14 jQuery
node.js实现http服务器与浏览器之间的内容缓存操作示例
2020/02/11 Javascript
[00:37]2016完美“圣”典风云人物:AMS宣传片
2016/12/06 DOTA
Python中条件选择和循环语句使用方法介绍
2013/03/13 Python
python自定义类并使用的方法
2015/05/07 Python
Python 实现一行输入多个值的方法
2018/04/21 Python
Pandas透视表(pivot_table)详解
2019/07/22 Python
django-xadmin根据当前登录用户动态设置表单字段默认值方式
2020/03/13 Python
Python离线安装各种库及pip的方法
2020/11/28 Python
html5与css3小应用
2013/04/03 HTML / CSS
HTML5去掉输入框type为number时的上下箭头的实现方法
2020/01/03 HTML / CSS
英国在线电子和小工具商店:TecoBuy
2018/10/06 全球购物
英国电子专家:maplin
2019/09/04 全球购物
英国床垫和床架购物网站:Bedman
2019/11/04 全球购物
J2EE面试题大全
2016/08/06 面试题
工业自动化毕业生自荐信范文
2014/01/04 职场文书
尽职尽责村干部自我鉴定
2014/01/23 职场文书
财务会计毕业生个人求职信
2014/02/03 职场文书
付款委托书范本
2014/10/05 职场文书
社区四风存在问题及整改措施
2014/10/26 职场文书
环保证明
2015/06/23 职场文书
Vue项目打包、合并及压缩优化网页响应速度
2021/07/07 Vue.js
MySQ InnoDB和MyISAM存储引擎介绍
2022/04/26 MySQL
使用CSS自定义属性实现骨架屏效果
2022/06/21 HTML / CSS