溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

JQuery插件使用之JMp3 & JMedia Player

發(fā)布時間：2020-04-05 15:37:10 來源：網(wǎng)絡(luò) 閱讀：1038 作者：轉(zhuǎn)身陌路 欄目：web開發(fā)

 

     
     項目接近尾聲了，現(xiàn)在各種測試和完善。因為需要在網(wǎng)站上播放視頻和音樂，就搜羅搜羅了一些播放插件。
 
     最終確定的插件都是基于JQuery開發(fā)的，音樂插件JMp3(http://www.sean-o.com/jquery/jmp3/) 
   視頻插件JQuery  Media(http://jquery.malsup.com/media/)
 
     首先介紹如何使用JMp3。
     1.在使用JMp3時，參考它的官網(wǎng)的描述，需要下載一個相關(guān)聯(lián)的輕量級的控件(Flash Single MP3 Player)。
     
     2.需要下載JQuery，我使用的是JQuery1.7。推薦各位使用新版的JQuery
     
     3.下載JMp3插件(在官網(wǎng)有下載鏈接)。
     
      然后開始配置：
      在html的Head中包括相關(guān)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>
     
     配置相關(guān)參數(shù):
     <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>
     
     默認(rèn)播放音樂的文件名為sound.mp3。如果需要播放自定義的音樂文件，則需要在配置項中指定：
     指定格式如下:
     $(function(){
               $('#external').jmp3(function(){
                    file:"./"
                    backcolor:"ffd700",
                    forecolor:"8B4513",
                    width:300,
                    autoStart:"true",
                    repeatPlay:"true",
                    showdownload:"true"
               });
          });
     自定義的音樂文件所在服務(wù)器文件夾。
     加入自定義文件:
     <span id="external" class="mp3">apologize.mp3</span></p>     將默認(rèn)sound.mp3文件更改為:apologize.mp3
     到此設(shè)置成功.
 
     JMedia Player使用:
           JMedia使用比較簡單，下載好插件。然后再相關(guān)html文件中引用，然后即可。格式如下:
     js代碼:
 
     $('.media').media();
 
     html標(biāo)簽:
 
     <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> 
     打開網(wǎng)頁就可以看到視頻播放了。
向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手