位置: 编程技术 - 正文
基于jQuery的网页影音播放器jPlayer的基本使用教程(jquery网页设计)
编辑：rootadmin推荐整理分享基于jQuery的网页影音播放器jPlayer的基本使用教程(jquery网页设计)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:用jquery制作的网站,jquery网页制作,使用jquery网页开发的优势,jquerymobile实例网站,使用jquery网页开发的优势,用jquery制作的网站,用jquery制作的网站,用jquery制作的网站,内容如对您有帮助，希望把文章链接给更多的朋友！
jPlayer简介：
想在网页上播放背景音乐，不想用html标签的方式，因为那样只有音乐全部下载完以后才能播放，还容易出现跨浏览器兼容性的问题，于是选了一款基于jQuery的播放器jPlayer来做。
设置jPlayer的尺寸大小使用构造函数配置jPlayer({size:Object})设置jPlayer的高宽。
使用构造函数配置jPlayer({sizeFull:Object})设置全屏尺寸。
注意可通过构造函数配置jPlayer({backgroundColor:"#RRGGBB"})设置jPlayer背景颜色。
Flash 安全规则使用下面的代码放宽了对jPlayer SWF 文件的限制，并且可以调用任何域名的swf文件了。
部署
通常，要上传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.), ogv*, oga*, wav*, webm* Flash: mp3, m4a (AAC), m4v (H.)
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({”选择的是一个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常用的方法：
分享个实用的jQuery代码片段 jQuery是一款优秀的JavaScript库，它在WEB开发者和网页设计师中非常出名，帮助网页设计师开发出很多有创意和漂亮的WEB页面。本文主要分享了个有用的jQ
JQuery Mobile实现导航栏和页脚 导航栏由一组水平排列的链接构成，通常位于页眉或页脚内部。默认地，导航栏中的链接会自动转换为按钮（无需data-role="button"）。导航栏部分的代码
使用jquery.qrcode.min.js实现中文转化二维码 今天还是要讲一下关于二维码的知识，前几篇讲解中有讲到我使用的可以生成二维码的js是qrcode.js，然后结合Cordovad的插件$cordovaBarcodeScanner插件可以扫描
标签: jquery网页设计
本文链接地址:https://www.jiuchutong.com/biancheng/383058.html 转载请保留说明！上一篇：利用jQuery设计一个简单的web音乐播放器的实例分享(jquery的设计模式)
下一篇：分享12个实用的jQuery代码片段(实用的app都有哪些)
