JPlayer使用之二，主要函數介紹

標籤：style   blog   http   color   io   使用   java   檔案   div   

　　上一篇外掛程式搭建的順序最後一步的頁面初始化函數中，就是最重要的一步，就先從這個函數說起吧。

$("#jquery_jplayer_1").jPlayer({                ready: function () {                    $(this).jPlayer("setMedia", {                        title: "Bubble",                        mp3: "@Scripts.Url("~/content/test.mp3")"                        //mp3:"D:\Documents\Music\test.mp3"                    });                },                swfPath: "/Scripts/JPlayer",                supplied: "mp3"            });

第一行代碼$("#jquery_jplayer_1").jPlayer()這個方法，將jquery_jplayer_1這個div初始化成播放器，然後括弧裡的ready、swfPath、Supplied都是這個播放器的參數，即Json格式的options，一個個來解釋

swfPath：當瀏覽器不支援Html5時，使用Flash來顯示播放器，這個參數就是指的源檔案中jplayer.swf的路徑，也可以這樣寫：swfPath:"/Scripts/Jplayer/jplayer.swf"

supplied:當前播放器支援的格式

最後，當這些參數設定好了以後，就該調用ready函數了，裡面的$(this)還是指剛剛那個播放器，$(this).jPlayer("setMedia")設定要播放的檔案,方法裡面的同樣是json格式的參數，如title：標題，MP3:"檔案路徑"。

然後我的項目裡需要用到動態來播放，也就是點擊不同按鈕播放不同的檔案，可以像下面這麼使用：

比如一個button按鈕的click事件中可以加入下列代碼：

$("#jquery_jplayer_1")       .jPlayer("stop")       .jPlayer("setMedia",     {wav:"@Url.Action("GetRecordAudio")/?path=‘sdf‘" })                                       .jPlayer("play");

檔案的url我做了一下處理，因為要訪問項目外其他的檔案，所以在後台action中返回了一個FileStreamResult的類型，順便貼出來：

//返回伺服器檔案        public FileStreamResult GetRecordAudio(string path)        {            FileStream file = new FileStream(@"D:\Documents\Music\test.wav",FileMode.Open);            return File(file, "application/octet-stream");        }

path可以自己處理，這樣我就完成了一個動態播放音樂的功能。

 

附上jplayer官方API地址：http://www.jplayer.org/latest/developer-guide/

 

在網上看到有朋友說播放器無法隱藏，在官網上找到瞭解決辦法（好像使用html5的時候才支援隱藏）：

    <head>    <style>    #jquery_jplayer {    display:none; /* 當使用flash顯示的時候無效 */    }    </style>    <script type="text/javascript">    $("#jquery_jplayer").hide(); /*當使用flash顯示的時候無效 */    </script>    </head>         <body>    <div id="jquery_jplayer"></div>    </body>

 

JPlayer使用之二，主要函數介紹