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

時間 2019-11-20

標籤 jplayer 使用之二主要函數介紹简体版

原文原文鏈接

　　上一篇插件搭建的順序最後一步的頁面初始化函數中，就是最重要的一步，就先從這個函數提及吧。javascript

$("#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，一個個來解釋html

swfPath：當瀏覽器不支持Html5時，使用Flash來顯示播放器，這個參數就是指的源文件中jplayer.swf的路徑，也能夠這樣寫：swfPath:"/Scripts/Jplayer/jplayer.swf"html5

supplied:當前播放器支持的格式java

最後，當這些參數設置好了之後，就該調用ready函數了，裏面的$(this)仍是指剛剛那個播放器，$(this).jPlayer("setMedia")設定要播放的文件,方法裏面的一樣是json格式的參數，如title：標題，MP3:"文件路徑"。jquery

而後個人項目裏須要用到動態來播放，也就是點擊不一樣按鈕播放不一樣的文件，能夠像下面這麼使用：json

好比一個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能夠本身處理，這樣我就完成了一個動態播放音樂的功能。app

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

在網上看到有朋友說播放器沒法隱藏，在官網上找到了解決辦法（好像使用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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。