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>