基于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 相关文章推荐
比较详细的javascript对象的property和prototype是什么一种关系
Aug 06 Javascript
javascript OFFICE控件测试代码
Dec 08 Javascript
JQUERY实现网页右下角固定位置展开关闭特效的方法
Jul 27 Javascript
jQuery实现立体式数字滚动条增加效果
Dec 21 Javascript
vue移动端裁剪图片结合插件Cropper的使用实例代码
Jul 10 Javascript
Angular项目中$scope.$apply()方法的使用详解
Jul 26 Javascript
JS实现页面打印(整体、局部)
Aug 18 Javascript
Javascript 严格模式use strict详解
Sep 16 Javascript
利用jqprint插件打印页面内容的实现方法
Jan 09 Javascript
webpack配置导致字体图标无法显示的解决方法
Mar 06 Javascript
node.JS路径解析之PATH模块使用方法详解
Feb 06 Javascript
(开源)微信小程序+mqtt,esp8266温湿度读取
Apr 02 Javascript
利用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
PHP5中新增stdClass 内部保留类
2011/06/13 PHP
PHP取进制余数函数代码
2012/01/19 PHP
php面向对象中的魔术方法中文说明
2014/03/04 PHP
PHP使用glob函数遍历目录或文件夹的方法
2014/12/16 PHP
php数组键名技巧小结
2015/02/17 PHP
php判断当前操作系统类型
2015/10/28 PHP
Yii开启片段缓存的方法
2016/03/28 PHP
非常有用的40款jQuery 插件推荐(系列二)
2011/12/25 Javascript
面向对象Javascript核心支持代码分享
2012/05/23 Javascript
js读取注册表的键值示例
2013/09/25 Javascript
js实现仿Discuz文本框弹出层效果
2015/08/13 Javascript
ionic实现滑动的三种方式
2016/08/27 Javascript
利用vue.js插入dom节点的方法
2017/03/15 Javascript
深入理解Node中的buffer模块
2017/06/03 Javascript
JavaScript实现三级级联特效
2017/11/05 Javascript
Vue+axios实现统一接口管理的方法
2018/07/23 Javascript
在Vue项目中,防止页面被缩放和放大示例
2019/10/28 Javascript
vue列表数据发生变化指令没有更新问题及解决方法
2020/01/16 Javascript
微信小程序仿淘宝热搜词在搜索框中轮播功能
2020/01/21 Javascript
Python解释执行原理分析
2014/08/22 Python
python入门教程之识别验证码
2017/03/04 Python
Python语言的变量认识及操作方法
2018/02/11 Python
详解Django中间件执行顺序
2018/07/16 Python
使用selenium模拟登录解决滑块验证问题的实现
2019/05/10 Python
PyQT5 实现快捷键复制表格数据的方法示例
2020/06/19 Python
浅析python中的del用法
2020/09/02 Python
深入理解css属性的选择对动画性能的影响
2016/04/20 HTML / CSS
世界排名第一的万圣节服装店:Spirit Halloween
2018/10/16 全球购物
土耳其玩具商店:Toyzz Shop
2019/08/02 全球购物
简历中求职的个人自我评价
2013/12/03 职场文书
拉拉队口号
2014/06/16 职场文书
离婚财产分配协议书
2014/10/21 职场文书
个人培训总结
2015/03/05 职场文书
有关西游记的读书笔记
2015/06/25 职场文书
小学教师暑期培训心得体会
2016/01/09 职场文书
oracle重置序列从0开始递增1
2022/02/28 Oracle