jPlayer是一个用于控制和播放mp3文件的jQuery插件。它在后台使用Flash来播放mp3文件,前台播放器外观完全可以使用XHML/CSS自定义。支持:
有一点比较好的是,在支持html5的浏览器上会使用html5的标签audio或者video,而不支持的浏览器上使用swf来播放
选择需要播放的Mp3文件。
播放、暂停、停止控制。取得播放进度等信息。
官方网站:http://www.jplayer.org/
支持格式:
范例:
大部分都是官网上的demo,需要引入jquery.jplayer.min.js 以及官网上的2个css包,还有Jplayer.swfUpdate Required To play the media you will need to either update your browser to a recent version or update your Flash plugin.
目录结构如下,js文件夹中为官网提供的js文件,skin为官网提供的css皮肤包
这里遇到二个奇怪的问题,在本地时测试demo,只能播放官网说的m4v格式,而用flv格式就不行,但放在服务器上就解决了。
另外就是
ready: function () { $(this).jPlayer("setMedia", { flv: "/workflowLocal/j/1.flv" }); },这里的setMedia设置文件路径时候,本地只能引用url路径 比如:http://xxxxxxxxxxxxxx,而不能使用绝对或者相对路径
而在服务器上时,则可以使用绝对路径,但一定要是以项目根目录开始的绝对路径才可以。
这二个问题不知道怎么解决。。。
因为项目中要用到切换视频的功能,所以尝试了一下 代码如下 ,点击按钮切换
function a(){ $("#jquery_jplayer_1").jPlayer("setMedia", { flv: "/workflowLocal/j/2.flv" }); }
服务器上播放效果如下: