您好,欢迎访问一九零五行业门户网

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

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);});
其它类似信息

推荐信息