jplayer 实战

今天客户一个 B2C服装类网上商城系统 需要在网站里播放背景音乐。bgsound是不行的，因为只有IE支持这个标签。关键是要跨浏览器。 

考虑jquery，发现jplayer可以实现这个效果。试了一下，门槛还算OK。 

Html代码  

1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>  
2.   
3. <script type="text/javascript" src="/js/jquery/jquery.jplayer.min.js"></script>  
4.   
5.   
6. <div id="jquery_jplayer"></div>  
7.   
8. <img id="jplayer" src="/images/music-play.png" width="44" height="41" style="float:right;"/>   
9.   
10. <img id="jstop" style="display:none" src="/images/music-stop.png" width="44" height="41" style="float:right;"/>   

Js代码  

1. $("#jplayer").click(function(){  
2.     $(this).hide();  
3.     $("#jstop").show();  
4.     $("#jquery_jplayer").jPlayer( "pause" );  
5. });  
6.   
7. $("#jstop").click(function(){  
8.     $(this).hide();  
9.     $("#jplayer").show();  
10.     $("#jquery_jplayer").jPlayer( "play" );  
11. });  
12.   
13. $(document).ready(function(){  
14.     $("#jquery_jplayer").jPlayer({  
15.         ready: function () {  
16.             this.element.jPlayer("setFile", "${music}", "").jPlayer("play");  
17.         },  
18.         volume: 50,  
19.         oggSupport: false,  
20.         preload: 'none',  
21.         swfPath:"http://www.i.com/js/jquery"  
22.     })  
23.     .jPlayer("onSoundComplete", function() {  
24.         this.element.jPlayer("play");  
25.     });  
26. });  

如果 swfPath:"http://www.ipremoire.com/js/jquery"不设置swf目录路径。