jPlayer简介

想在网页上播放背景音乐,不想用html标签的方式,因为那样只有音乐全部下载完以后才能播放,还容易出现跨浏览器兼容性的问题,于是选了一款基于jQuery的播放器jPlayer来做。

jPlayer的官方网站: http://www.jplayer.org/

jPlayer可以做什么:

1.控制并播放你网站上的媒体文件

2.创建播放器,利用html+css定制化播放器样式

3.将音频和视频加入到你的jQuery项目中

4.支持更多的使用HTML5规范的设备

5.支持使用Flash Fallback的旧浏览器

6.使用Javascript API控制你网站上的媒体文件

jPlayer支持的媒体格式

HTML5: mp3, m4a (AAC), m4v (H.264), ogv*, oga*, wav*, webm*

Flash: mp3, m4a (AAC), m4v (H.264)

使用方法:

可以参考jPlayer官网提供的实例:http://www.jplayer.org/latest/demos/

使用jPlayer的注意事项

如果是简单的使用,只需要注意下面几点

1.引入jQuery和jPlayer的脚本文件,jquery.jplayer.min.js的路径可以写成绝对路劲或相对于引用文件的路径。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.jplayer.min.js"></script>

2.用html和css构建播放器,因为我要做背景音乐,只需要音量开关的控制,不需要进度条、播放、暂停按钮,因此将这些元素省略。从这里可以看出jPlayer的可定制性是很强的,我们可以将不需要的元素去掉,也可以利用它提供的Javascript API创造自己需要的部件。

<div class="jp-cont">
   <div id="jquery_jplayer_1" class="jp-jplayer"></div>
     <a href="#" id="unmute" class="volumn_btn unmute_on"></a>
    <a href="#" id="mute" class="volumn_btn mute_off"></a>
</div>  

class为jp-cont的div是容器,将position设为absolute可以很方便的控制定位。两个a标签是音量按钮,一个开一个关,注意要将它们设置成绝对定位,否则会被播放器覆盖而无法显示。

最重要的结构是<div id="jquery_jplayer_1" class="jp-jplayer"></div>,加入这个结构jPlayer的播放器才能初始化成功,我需要隐藏播放器因此将这个div的display属性设为none。

3.初始化脚本,加上初始化jPlayer的脚本和自定义按钮的脚本, 就可以使用了。

实例展示

效果如下,点击按钮可以关闭或打开声音,音乐是一直在播放的

下载jPlayer背景音乐脚本

代码下载: jQuery.jPlayer制作背景音乐脚本实例 已下载 1401 次

优点:文件不需要全部下载即可播放,支持文件格式较多,可定制化UI界面。]

后记:在IE9上测试代码有问题,即使加上强制IE9模仿IE8的代码也无效,具体问题正在查找中。jPlayer是支持IE9的,应该是我的代码有问题。

17条留言

  1. 3初始化脚本,加上初始化jPlayer的脚本和自定义按钮的脚本, 就可以使用了。

    你好,请问这个脚本怎么弄呀,官网的看过了,不太会呀。谢谢!

    1. 你可以参考官网的一个例子
      http://jplayer.org/latest/demo-05/
      点击Show jPlayer Inspector可以查看初始化代码

      最好下载demo看一下,下载地址 http://jplayer.org/latest/jQuery.jPlayer.2.1.0.demos.zip
      打开demo文件夹,找到demo-05.htm这个文件,这是我说的例子的源文件,你可以简单看一下。

      播放器要工作,其实就是三个步骤:引入需要js和css文件,写好jplayer规定的html代码,将初始化代码放在jquery的$(document).ready()事件中,等DOM加载完成后再执行初始化代码。

      在demo-05.htm中初始化代码就是这一段

      $(document).ready(function(){
      	var myCirclePlayer = new CirclePlayer("#jquery_jplayer_1",
      	{
      		m4a: "http://www.jplayer.org/audio/m4a/Miaow-07-Bubble.m4a",
      		oga: "http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg"
      	}, {
      		cssSelectorAncestor: "#cp_container_1",
      		swfPath: "js",
      		wmode: "window"
      	});
      });

      你要注意的是这里面#开头的ID,这些是和HTML结构中的ID相对应的
      #jquery_jplayer_1对应

      <div id="jquery_jplayer_1" class="cp-jplayer"></div>

      #cp_container_1对应

      <div id="cp_container_1" class="cp-container">

      保证HTML结构正确,初始化代码中的ID不要弄错,播放器就可以用了,如果想进一步定制化,需要研究一下文档 http://jplayer.org/latest/developer-guide/

      如果有问题随时欢迎

  2. lz,求救,我发现IPHONE 播放不了音乐,真的很急,希望能看到

    //

  3. 非常感谢demo~ [路过]

  4. 加我QQ好吗,我还有更多问题想请教你,谢谢!QQ:396218262

  5. 解压后打开,为啥360能放,IE8和FF不能放啊。

    1. 我试了,ie7 ie8 ie9 和firefox 8.0.1都能播,源文件里的MP3地址是http://www.jplayer.org/audio/mp3/Miaow-07-Bubble.mp3, 是网络音乐如果网速卡就播不了,建议换成本地的MP3。最好装server(例如wamp)测试,如果直接打开浏览器可能会禁止flash和网络通信,就无法播放了。

      1. 换成本地文件后,我把jplayer.swf设置为flash player信任文件就可以放了。不知道这样的话放到网上,需不需要用js控制添加信任文件,毕竟最后还是要放到项目中去的。

        1. 你说的信任文件是指在adobe的“Adobe Flash Player设置管理器->始终信任以下位置的文件”吗?
          在adobe的文档中说这个一般是本地测试的时候才有必要添加,如果有服务器的话就不用,如果你设置了本地的php或者asp测试环境,应该不会遇到这个提示的。
          Adobe的说明http://www.macromedia.com/support/documentation/en/
          flashplayer/help/settings_manager04a.html#119065

          You are most likely seeing this page because you are testing your SWF or FLV content locally, and that content is trying to use older security rules to communicate with the Internet

          1. 哦,我就设的那个,问题解决了,谢谢了。

  6. jplayer在ipad和iphone上可以正常播放吗

    1. 可以的,这个播放器是基于javascript的,而且ipad和iphone支持html5,这款播放器也有html5的特性

  7. 貌似ie9里可以用

评论功能已关闭