温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

JQuery插件使用之JMp3 & JMedia Player

发布时间:2020-04-05 15:37:10 来源:网络 阅读:1039 作者:转身陌路 栏目:web开发

 

     
     项目接近尾声了,现在各种测试和完善。因为需要在网站上播放视频和音乐,就搜罗搜罗了一些播放插件。
 
     最终确定的插件都是基于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文件:
      <head>
           <script type="text/javascript" src="/js/jquery/jquery.js"></script>
           <script type="text/javascript" src="/js/jquery/jmp3/jquery.jmp3.js"></script>
     </head>
     
     配置相关参数:
     <script type="text/javascript">
        $(document).ready(function(){
                // default options
                $(".mp3").jmp3();
                // custom options
                $("#mysong").jmp3({
                        backcolor: "000000",
                        forecolor: "00ff00",
                        width: 200,
                        showdownload: "true"
                });
        });
     </script>
     然后在html页面中需要插入控件的代码:
     <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="150" height="20"
          codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab">
          <param name="movie" value="singlemp3player.swf?showDownload=false" />
          <param name="wmode" value="transparent" />
          <embed wmode="transparent" width="150" height="20" src="singlemp3player.swf?showDownload=false"
          type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
     </object>
     
     默认播放音乐的文件名为sound.mp3。如果需要播放自定义的音乐文件,则需要在配置项中指定:
     指定格式如下:
     $(function(){
               $('#external').jmp3(function(){
                    file:"./"
                    backcolor:"ffd700",
                    forecolor:"8B4513",
                    width:300,
                    autoStart:"true",
                    repeatPlay:"true",
                    showdownload:"true"
               });
          });
     自定义的音乐文件所在服务器文件夹。
     加入自定义文件:
     <span id="external" class="mp3">apologize.mp3</span></p>     将默认sound.mp3文件更改为:apologize.mp3
     到此设置成功.
 
     JMedia Player使用:
           JMedia使用比较简单,下载好插件。然后再相关html文件中引用,然后即可。格式如下:
     js代码:
 
     $('.media').media();
 
     html标签:
 
     <a class="media" href="sample.mov">My Quicktime Movie</a>
     <a class="media" href="sample.swf">My Flash Movie</a> 
<a class="media" href="sample.wma">My Audio File</a>
     打开网页就可以看到视频播放了。
向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI