zoukankan      html  css  js  c++  java
  • JPlayer使用之二,主要函数介绍

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

    $("#jquery_jplayer_1").jPlayer({
                    ready: function () {
                        $(this).jPlayer("setMedia", {
                            title: "Bubble",
                            mp3: "@Scripts.Url("~/content/test.mp3")"
                            //mp3:"D:DocumentsMusic	est.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:DocumentsMusic	est.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>
  • 相关阅读:
    MySQL存储树形数据优化技笔记
    收集18个高大上的浏览器小技巧
    收集18个高大上的浏览器小技巧
    盘点15个不起眼但非常强大的 Vim 命令
    盘点15个不起眼但非常强大的 Vim 命令
    为什么开发者应该摒弃敏捷?(转)
    为什么开发者应该摒弃敏捷?(转)
    MySQL 中事务、事务隔离级别详解
    pandas数据对齐
    Bokeh绘图
  • 原文地址:https://www.cnblogs.com/chengzi/p/3981107.html
Copyright © 2011-2022 走看看