今天开始写些随笔，就从Jplayer开始吧

　　今天才开始用Jplayer，可能有点落伍了，但是看到网上千篇一律的使用说明，开始决定把自己的使用心得分享一下，废话不多说，开始吧。

　　Step1：

　　官网上有具体的搭建顺序，URL：http://www.jplayer.org/latest/quick-start-guide/,如下图：

　　

　　　我这里就以音乐播放器为例了，点击标红的超链。进入后会有一步一步的提示。

 

　　 我使用的就是jplayer2.7.0的版本，引用的都有jquery-1.11.1.min.js、jquery.jplayer.min.js、jplayer.blue.monday.css主要是这3个文件。

但是我们项目里使用了easyUI，引用的jQuery核心版本是1.8.3，然后我把1.11.1替换为1.8.3，没有报错，可以正常使用，下面是我的页面头

      

   标红的这3个就是必须要引用的文件了。

   然后是html标签

  

<div id="jquery_jplayer_1" class="jp-jplayer"></div>

        <div id="jp_container_1" class="jp-audio">

            <div class="jp-type-single">

                <div class="jp-gui jp-interface">

                    <ul class="jp-controls">

                        <li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>

                        <li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>

                        <li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>

                        <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>

                        <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>

                        <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>

                    </ul>

                    <div class="jp-progress">

                        <div class="jp-seek-bar">

                            <div class="jp-play-bar"></div>

                        </div>

                    </div>

                    <div class="jp-volume-bar">

                        <div class="jp-volume-bar-value"></div>

                    </div>

                    <div class="jp-time-holder">

                        <div class="jp-current-time"></div>

                        <div class="jp-duration"></div>

                        <ul class="jp-toggles">

                            <li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>

                            <li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>

                        </ul>

                    </div>

                </div>

                <div class="jp-details">

                    <ul>

                        <li><span class="jp-title"></span></li>

                    </ul>

                </div>

                <div class="jp-no-solution">

                    <span>Update Required</span>

                    To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.

                </div>

            </div>

        </div>

 

 继续最关键的部分：页面初始化函数：

<script type="text/javascript">

        $(document).ready(function () {

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

            });

        });

    </script>

到此为止，播放器就可以正常工作了