| 标题 | 基于jQuery的网页影音播放器jPlayer的基本使用教程 |
| 内容 | 这篇文章主要介绍了基于jQuery的网页影音播放器jPlayer的基本使用教程,文中的示例主要针对其播放音频文件的用法,需要的朋友可以参考下 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); }); |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。