Jplayer(转)

Jplayer必须要加载

1.样式  jplayer.blue.monday.css

2.jq jquery.1.6.2.min.js 当前最新版本为1.6.2

3.jplayer的js jquery.jplayer.min.js

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

<script. type="text/javascript" src="./js/jquery.1.6.2.min.js"></script>

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

Jplayer单首歌播放

js代码如下

<script. type="text/javascript">

//<![CDATA[

$(document).ready(function(){                                  //一定要等页面全部加载完才能执行jplayer

$('#jplayer').jPlayer({                                           //jplayer为页面中存放jplayer容器的标签        

preload: 'metadata',                                    //预加载，不太清楚，缺省吧

ready: function () {                                              //ready：歌曲加载完成后执行

$(this).jPlayer("setMedia", {              //jPlayer("setMedia", 格式:路径)

mp3: './music/03.mp3'               //jPlayer支持许多格式，如mp3、m4a

}).jPlayer("play");                                 //$(this).jPlayer("setMedia", {mp3: './music/03.mp3'}).jPlayer("play"); )等价于$(this).jPlayer("setMedia", {mp3: './music/03.mp3'});$(this).jPlayer("play");

},

ended: function (event) {                           //表示歌曲播放结束后再播放。。

$(this).jPlayer("play");

},

swfPath: 'js',                                                //设置jPlayer.swf的存放位置，非常重要设置错误会出现很多火星问题

solution: 'html, flash',

supplied: 'mp3',                                      //支持文件：在这里设置了支持的文件，只有设置了才能播放

volume: 0.8,                                                //默认音量

muted: false,                                              //默认静音

backgroundColor: '#000000',                 //背景颜色

cssSelectorAncestor: '#jp_interface_1',       //选择播放器样式的容器

cssSelector: {                                            //设置css样式选择器

videoPlay: '.jp-video-play',

play: '.jp-play',

pause: '.jp-pause',

stop: '.jp-stop',

seekBar: '.jp-seek-bar',

playBar: '.jp-play-bar',

mute: '.jp-mute',

unmute: '.jp-unmute',

volumeBar: '.jp-volume-bar',

volumeBarValue: '.jp-volume-bar-value',

currentTime: '.jp-current-time',

duration: '.jp-duration'},

errorAlerts: true,                                      //错误报告

warningAlerts: true,                                //警告报告

nativeSupport: true,                                //对HTML5的支持，设置为false则强制调用swf播放不使用html5标签

});

});

//]]>

</script>

 

html代码：

 

 

 

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

  <div class="jp-audio">

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

      <div id="jp_interface_1" class="jp-interface">

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

        <ul class="jp-controls">

          <li><a href="#" class="jp-play" tabindex="1">play</a></li>

          <li><a href="#" class="jp-pause" tabindex="1">pause</a></li>

          <li><a href="#" class="jp-stop" tabindex="1">stop</a></li>

          <li><a href="#" class="jp-mute" tabindex="1">mute</a></li>

          <li><a href="#" class="jp-unmute" tabindex="1">unmute</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-current-time"></div>

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

      </div>

      <div id="jp_playlist_1" class="jp-playlist">

        <ul>

          <li>hello word</li>

        </ul>

      </div>

    </div>

  </div>

 

 

注：页面必须在挂在服务器上才能正常，不然播放器会出现很多火星问题，像火狐、IE不能播放只有chrome可以播放

附上添加了播放列表的js：

 

 

$(document).ready(function(){

var Playlist = function(instance, playlist, options) {

var self = this;

 

this.instance = instance; // String: To associate specific HTML with this playlist

this.playlist = playlist; // Array of Objects: The playlist

this.options = options; // Object: The jPlayer constructor options for this playlist

 

this.current = 0;

 

this.cssId = {

jPlayer: "jquery_jplayer_",

playlist: "jp_playlist_"

};

this.cssSelector = {};

 

$.each(this.cssId, function(entity, id) {

self.cssSelector[entity] = "#" + id + self.instance;

});

 

if(!this.options.cssSelectorAncestor) {

this.options.cssSelectorAncestor = this.cssSelector.interface;

}

 

$(this.cssSelector.jPlayer).jPlayer(this.options);

 

$(this.cssSelector.interface + " .jp-previous").click(function() {

self.playlistPrev();

$(this).blur();

return false;

});

 

$(this.cssSelector.interface + " .jp-next").click(function() {

self.playlistNext();

$(this).blur();

return false;

});

};

 

Playlist.prototype = {

displayPlaylist: function() {

var self = this;

$(this.cssSelector.playlist + " ul").empty();

for (i=0; i < this.playlist.length; i++) {

var listItem = (i === this.playlist.length-1) ? "<li class='jp-playlist-last'>" : "<li>";

listItem += "<a href='#' id='" + this.cssId.playlist + this.instance + "_item_" + i +"' tabindex='1'>"+ this.playlist[i].name +"</a>";

 

// Create links to free media

if(this.playlist[i].free) {

var first = true;

listItem += "<div class='jp-free-media'>(";

$.each(this.playlist[i], function(property,value) {

if($.jPlayer.prototype.format[property]) { // Check property is a media format.

if(first) {

first = false;

} else {

listItem += " | ";

}

listItem += "<a id='" + self.cssId.playlist + self.instance + "_item_" + i + "_" + property + "' href='" + value + "' tabindex='1'>" + property + "</a>";

}

});

listItem += ")</span>";

}

 

listItem += "</li>";

 

// Associate playlist items with their media

$(this.cssSelector.playlist + " ul").append(listItem);

$(this.cssSelector.playlist + "_item_" + i).data("index", i).click(function() {

var index = $(this).data("index");

if(self.current !== index) {

self.playlistChange(index);

} else {

$(self.cssSelector.jPlayer).jPlayer("play");

}

$(this).blur();

return false;

});

 

// Disable free media links to force access via right click

if(this.playlist[i].free) {

$.each(this.playlist[i], function(property,value) {

if($.jPlayer.prototype.format[property]) { // Check property is a media format.

$(self.cssSelector.playlist + "_item_" + i + "_" + property).data("index", i).click(function() {

var index = $(this).data("index");

$(self.cssSelector.playlist + "_item_" + index).click();

$(this).blur();

return false;

});

}

});

}

}

},

playlistInit: function(autoplay) {

if(autoplay) {

this.playlistChange(this.current);

} else {

this.playlistConfig(this.current);

}

},

playlistConfig: function(index) {

$(this.cssSelector.playlist + "_item_" + this.current).removeClass("jp-playlist-current").parent().removeClass("jp-playlist-current");

$(this.cssSelector.playlist + "_item_" + index).addClass("jp-playlist-current").parent().addClass("jp-playlist-current");

this.current = index;

$(this.cssSelector.jPlayer).jPlayer("setMedia", this.playlist[this.current]);

},

playlistChange: function(index) {

this.playlistConfig(index);

$(this.cssSelector.jPlayer).jPlayer("play");

},

playlistNext: function() {

var index = (this.current + 1 < this.playlist.length) ? this.current + 1 : 0;

this.playlistChange(index);

},

playlistPrev: function() {

var index = (this.current - 1 >= 0) ? this.current - 1 : this.playlist.length - 1;

this.playlistChange(index);

}

};

var audioPlaylist = new Playlist("1", 

[name:03.mp3:./music/03.mp3]

, {

ready: function() {

audioPlaylist.displayPlaylist();

audioPlaylist.playlistInit(false); // Parameter is a boolean for autoplay.

},

ended: function() {

audioPlaylist.playlistNext();

},

play: function() {

$(this).jPlayer("pauseOthers");

},

swfPath: 'js',

solution: 'html, flash',

supplied: 'mp3',

volume: 0.8,

muted: false,

backgroundColor: '#000000',

cssSelectorAncestor: '#jp_interface_1',

cssSelector: {

videoPlay: '',

play: '.jp-play',

pause: '.jp-pause',

stop: '.jp-stop',

seekBar: '.jp-seek-bar',

playBar: '.jp-play-bar',

mute: '.jp-mute',

unmute: '.jp-unmute',

volumeBar: '.jp-volume-bar',

volumeBarValue: '.jp-volume-bar-value',

currentTime: '.jp-current-time',

duration: '.jp-duration'},

errorAlerts: true,

warningAlerts: true,

nativeSupport: true,

});

 

});

//]]>

</script>

 

页面:

 

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

 

<div class="jp-audio">

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

<div id="jp_interface_1" class="jp-interface">

<ul class="jp-controls">

<li><a href="#" class="jp-play" tabindex="1">play</a></li>

<li><a href="#" class="jp-pause" tabindex="1">pause</a></li>

<li><a href="#" class="jp-stop" tabindex="1">stop</a></li>

<li><a href="#" class="jp-mute" tabindex="1">mute</a></li>

<li><a href="#" class="jp-unmute" tabindex="1">unmute</a></li>

<li><a href="#" class="jp-previous" tabindex="1">previous</a></li>

<li><a href="#" class="jp-next" tabindex="1">next</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-current-time"></div>

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

</div>

<div id="jp_playlist_1" class="jp-playlist">

<ul>

<!-- The method Playlist.displayPlaylist() uses this unordered list -->

<li></li>

</ul>

</div>

</div>

</div>

 

<div id="jplayer_inspector_1"></div>

 转：http://blog.hfut.edu.cn/index.php/uid-44328-action-viewspace-itemid-86949

最后加一点个人心得，Jplayer在Chrome,ie9+都能执行,到Ie6,7,8上不能执行，网上说是什么swfPath路径的问题

后来看到这篇文章才知道是因为我没有把它放到服务器上运行，所以把代码部署在IIS上就可以了。