jplayerPlayList使用demo

首先到官方网站下载jplayer和jplayer的皮肤包

http://www.jplayer.org/

引用css和js

<link href="./jplayer/skin/blue.monday/jplayer.blue.monday.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="./js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="./js/jquery.jplayer.js"></script>
<script type="text/javascript" src="./js/jplayer.playlist.js"></script>

其中jplayer.playlist.js在add-on文件夹里

css文件在skin文件夹里

然后初始化播放器

$(function(){
	//初始化播放器
	$("#jquery_jplayer_1").jPlayer({
        ready: function (event) {
            $(this).jPlayer("setMedia", {
                m4a:"./js/TSP-01-Cro_magnon_man.m4a",
                oga:"./js/TSP-01-Cro_magnon_man.ogg"
            });
        },
        swfPath: "./js",
        supplied: "m4a, oga",
    }).jPlayer("play");


var myPlaylist = new jPlayerPlaylist({
	  jPlayer: "#jquery_jplayer_1",
	  cssSelectorAncestor: "#jp_container_1"
	}, [
	  {
	    title:"Your Face",
	    artist:"The Stark Palace",
	    mp3:"http://www.jplayer.org/audio/mp3/TSP-05-Your_face.mp3",
	    oga:"http://www.jplayer.org/audio/ogg/TSP-05-Your_face.ogg",
	    poster: "http://www.jplayer.org/audio/poster/The_Stark_Palace_640x360.png"
	  },
	  {
            title:"Your Face",
            artist:"The Stark Palace",
            mp3:"http://www.jplayer.org/audio/mp3/TSP-05-Your_face.mp3",
            oga:"http://www.jplayer.org/audio/ogg/TSP-05-Your_face.ogg",
            poster: "http://www.jplayer.org/audio/poster/The_Stark_Palace_640x360.png"}
	], {
	    playlistOptions: {
	    enableRemoveControls: true
	  },
	  swfPath: "./js",
	  supplied: "ogv, m4v, oga, mp3",
	  smoothPlayBar: true,
	  keyEnabled: true,
	  audioFullScreen: true // Allows the audio poster to go full screen via keyboard
});


});

html播放器代码模板

                                                            <div id="jp_container_1" class="jp-audio">
								<div id="jquery_jplayer_1" class="jp-jplayer"></div>
								  <div class="jp-type-playlist">
								    <div class="jp-gui jp-interface">
								      <ul class="jp-controls">
											<li><a href="javascript:;" class="jp-previous" tabindex="1" title="上一首">上一首</a></li>
											<li><a href="javascript:;" class="jp-play" tabindex="1" title="播放">播放</a></li>
											<li><a href="javascript:;" class="jp-pause" tabindex="1" title="暂停">暂停</a></li>
											<li><a href="javascript:;" class="jp-next" tabindex="1" title="下一首">下一首</a></li>
											<li><a href="javascript:;" class="jp-stop" tabindex="1" title="停止">停止</a></li>
											<li><a href="javascript:;" class="jp-mute" tabindex="1" title="静音">静音</a></li>
											<li><a href="javascript:;" class="jp-unmute" tabindex="1" title="调节音量">调节音量</a></li>
											<li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="最大声音">最大声音</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>
								      <ul class="jp-toggles">
											<li><a href="javascript:;" class="jp-shuffle" tabindex="1" title="shuffle">shuffle on</a></li>
											<li><a href="javascript:;" class="jp-shuffle-off" tabindex="1" title="shuffle off">shuffle
											 off</a></li>
											<li><a href="javascript:;" class="jp-repeat" tabindex="1" title="单曲循环">单曲循环</a></li>
											<li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="关闭单曲循环">关闭单曲循环</a></li>
								      </ul>
								      <div class="jp-time-holder">
								        <div class="jp-current-time"></div>
								        <div class="jp-duration"></div>
								      </div>
								    </div>
								    <div class="jp-title">
								      <ul>
								        <li>Music Box</li>
								      </ul>
								    </div>
								    <div class="jp-playlist">
									    <ul>
									      <li></li> <!-- Empty <li> so your HTML conforms with the W3C spec -->
									    </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>

jPlayerPlaylist参数简单说明

1. var myPlaylist = new jPlayerPlaylist({cssSelector}, [playlist], {options});

2. 三个参数如下

3. var cssSelector = { jPlayer: "#jquery_jplayer_N", cssSelectorAncestor: "#jp_container_N" };//这个是html容器的id和播放器的id，N为自己定义

4. var playlist = []; // 这个是一个array，里面的元素是一个个json对象，具体json格式参照demo或者官方文档

5. var options = { swfPath: "/js", supplied: "ogv, m4v, oga, mp3" };//这个是playlist的选项，swfPath是swf文件的路径，supplied是支持播放格式，具体更多选项参照官方文档