JPlayer使用之二,主要函数介绍

  上一篇插件搭建的顺序最后一步的页面初始化函数中,就是最重要的一步,就先从这个函数说起吧。

$("#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>

 

你可能感兴趣的:(play)