JQuery插件使用之JMp3 & JMedia Player

 

     

     项目接近尾声了，现在各种测试和完善。因为需要在网站上播放视频和音乐，就搜罗搜罗了一些播放插件。

 

     最终确定的插件都是基于JQuery开发的，音乐插件JMp3(http://www.sean-o.com/jquery/jmp3/) 

   视频插件JQuery  Media(http://jquery.malsup.com/media/)

 

     首先介绍如何使用JMp3。

     1.在使用JMp3时，参考它的官网的描述，需要下载一个相关联的轻量级的控件( Flash Single MP3 Player)。

     

     2.需要下载JQuery，我使用的是JQuery1.7。推荐各位使用新版的JQuery

     

     3.下载JMp3插件(在官网有下载链接)。

     

      然后开始配置：

      在html的Head中包括相关js文件:

     

           

           

     

     

     配置相关参数:

     

     然后在html页面中需要插入控件的代码:

      
   

           
   
 
   

          默认播放音乐的文件名为sound.mp3。如果需要播放自定义的音乐文件，则需要在配置项中指定： 
   
 
   

          指定格式如下: 
   
 
   

          $(function(){ 
    
                $('#external').jmp3(function(){ 
    
                     
      
    file:"./" 
    
                     backcolor:"ffd700", 
    
                     forecolor:"8B4513", 
    
                     width:300, 
    
                     autoStart:"true", 
    
                     repeatPlay:"true", 
    
                     showdownload:"true" 
    
                }); 
    
           }); 
    
 
    

           自定义的音乐文件所在服务器文件夹。 
    
 
    

           加入自定义文件: 
    
 
    

           apologize.mp3
     将默认sound.mp3文件更改为:apologize.mp3 
    
 
    

           到此设置成功. 
    
 
    

        
    
 
    

           JMedia Player使用: 
    
 
    

                 JMedia使用比较简单，下载好插件。然后再相关html文件中引用，然后即可。格式如下: 
    
 
    

           js代码: 
    
 
    

        
    
 
    

           $('.media').media(); 
    
 
    

        
    
 
    

           html标签: 
    
 
    

        
    
 
    

            class="media" 
      href="sample.mov">My Quicktime Movie 
    
 
    
     My Flash Movie 
     My Audio File 
 
    
     打开网页就可以看到视频播放了。