今天开始写些随笔，就从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>

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