基于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 相关文章推荐
解决Extjs 4 Panel作为Window组件的子组件时出现双重边框问题
Jan 11 Javascript
jQuery中bind()方法用法实例
Jan 19 Javascript
JQuery validate插件验证用户注册信息
May 11 Javascript
javascript正则表达式之分组概念与用法实例
Jun 16 Javascript
无循环 JavaScript(map、reduce、filter和find)
Apr 08 Javascript
React中ES5与ES6写法的区别总结
Apr 21 Javascript
ES6 javascript中class静态方法、属性与实例属性用法示例
Oct 30 Javascript
Angular实现搜索框及价格上下限功能
Jan 19 Javascript
node.js学习笔记之koa框架和简单爬虫练习
Dec 13 Javascript
JavaScript事件对象深入详解
Dec 30 Javascript
JS实现移动端在线签协议功能
Aug 22 Javascript
jquery弹窗时禁止body滚动条滚动的例子
Sep 21 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_xmlhttp 乱码问题解决方法
2009/08/07 PHP
jQuery 动画基础教程
2008/12/25 Javascript
学习ExtJS border布局
2009/10/08 Javascript
超简单的jquery的AJAX用法
2010/05/10 Javascript
javascript权威指南 学习笔记之变量作用域分享
2011/09/28 Javascript
JS去掉第一个字符和最后一个字符的实现代码
2014/02/20 Javascript
jQuery实现带滚动导航效果的全屏滚动相册实例
2015/06/19 Javascript
javascript学习笔记之函数定义
2015/06/25 Javascript
JavaScript设置表单上传时文件个数的方法
2015/08/11 Javascript
FullCalendar日历插件应用之数据展现(一)
2015/12/23 Javascript
JavaScript实现复制或剪切内容到剪贴板功能的方法
2016/05/23 Javascript
JavaScript实现设置默认日期范围为最近40天的方法分析
2017/07/12 Javascript
使用JS和canvas实现gif动图的停止和播放代码
2017/09/01 Javascript
React中jquery引用的实现方法
2017/09/12 jQuery
webpack+vue中使用别名路径引用静态图片地址
2017/11/20 Javascript
angularjs中$http异步上传Excel文件方法
2018/02/23 Javascript
在vue项目中,使用axios跨域处理
2018/03/07 Javascript
ios中视频的最后一桢问题解决
2019/05/14 Javascript
layui复选框限制选择个数的方法
2019/09/18 Javascript
如何使用Jquery动态生成二级选项列表
2020/02/06 jQuery
Python3连接SQLServer、Oracle、MySql的方法
2018/06/28 Python
pycharm 实现显示project 选项卡的方法
2019/01/17 Python
Python使用pymysql模块操作mysql增删改查实例分析
2019/12/19 Python
关于python 跨域处理方式详解
2020/03/28 Python
python为什么会环境变量设置不成功
2020/06/23 Python
Python 串口通信的实现
2020/09/29 Python
基于python实现监听Rabbitmq系统日志代码示例
2020/11/28 Python
Python项目打包成二进制的方法
2020/12/30 Python
幼儿园大班教学反思
2014/02/10 职场文书
电子商务个人职业生涯规划范文
2014/02/12 职场文书
财务科长个人对照检查材料
2014/09/18 职场文书
秋季运动会开幕词
2015/01/28 职场文书
少年派的奇幻漂流观后感
2015/06/08 职场文书
工资证明范本
2015/06/12 职场文书
uni-app 微信小程序授权登录的实现步骤
2022/02/18 Javascript
Mysql事务索引知识汇总
2022/03/17 MySQL