基于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 相关文章推荐
jQuery 动画基础教程
Dec 25 Javascript
JavaScript中两种链式调用实现代码
Jan 12 Javascript
用jquery实现输入框获取焦点消失文字
Apr 27 Javascript
window.navigate 与 window.location.href 的使用区别介绍
Sep 21 Javascript
Javascript 按位左移运算符使用介绍(
Feb 04 Javascript
JavaScript Ajax编程 应用篇
Jul 02 Javascript
微信小程序 缓存(本地缓存、异步缓存、同步缓存)详解
Jan 17 Javascript
原生js实现鼠标跟随效果
Feb 28 Javascript
浅谈关于angularJs中使用$.ajax的注意点
Aug 12 Javascript
基于vue.js中关于下拉框的值默认及绑定问题
Aug 22 Javascript
详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计
Aug 31 Javascript
微信小程序 扭蛋抽奖机css3动画实现详解
Jul 19 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
如何在PHP中使用Oracle数据库(5)
2006/10/09 PHP
Bo-Blog专用的给Windows服务器的IIS Rewrite程序
2007/08/26 PHP
PDO版本问题 Invalid parameter number: no parameters were bound
2013/01/06 PHP
基于PHP常用字符串的总结(待续)
2013/06/07 PHP
PHP实现的各类hash算法长度及性能测试实例
2017/08/27 PHP
Javascript继承(上)——对象构建介绍
2012/11/08 Javascript
js解析与序列化json数据(一)json.stringify()的基本用法
2013/02/01 Javascript
HTML页面滚动时获取离页面顶部的距离2种实现方法
2013/09/05 Javascript
Underscore.js常用方法总结
2015/02/28 Javascript
JavaScript将数组转换成CSV格式的方法
2015/03/19 Javascript
js的flv视频播放器插件使用方法
2015/06/23 Javascript
jQuery实用技巧必备(下)
2015/11/03 Javascript
Bootstrap框架动态生成Web页面文章内目录的方法
2016/05/12 Javascript
基于jQuery实现仿QQ空间送礼物功能代码
2016/05/24 Javascript
最原始的jQuery注册验证方式
2016/10/11 Javascript
JavaScript实现类似拉勾网的鼠标移入移出效果
2016/10/27 Javascript
JavaScript中利用for循环遍历数组
2017/01/15 Javascript
Vue隐藏显示、只读实例代码
2018/07/18 Javascript
JS代码屏蔽F12,右键,粘贴,复制,剪切,选中,操作实例
2019/09/17 Javascript
vue radio单选框,获取当前项(每一项)的value值操作
2020/09/10 Javascript
关于python的list相关知识(推荐)
2017/08/30 Python
浅谈python和C语言混编的几种方式(推荐)
2017/09/27 Python
在python中使用requests 模拟浏览器发送请求数据的方法
2018/12/26 Python
python多线程下信号处理程序示例
2019/05/31 Python
jenkins配置python脚本定时任务过程图解
2019/10/29 Python
Python OpenCV图像指定区域裁剪的实现
2019/10/30 Python
python3.7添加dlib模块的方法
2020/07/01 Python
Timberland德国官网:靴子、鞋子、衣服、夹克及配件
2019/12/10 全球购物
宝信软件JAVA工程师面试经历
2012/08/19 面试题
优秀学生自我鉴定范例
2013/12/18 职场文书
员工团队活动方案
2014/08/28 职场文书
委托书的样本
2015/01/28 职场文书
大学生学期个人总结
2015/02/12 职场文书
辞职信格式模板
2015/02/27 职场文书
Html5页面播放M4a音频文件
2021/03/30 HTML / CSS
Win11 引入 Windows 365 云操作系统,适应疫情期间混合办公模式:启动时直接登录、模
2022/04/06 数码科技