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

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标签 }); }); //]]>

html代码：

• play
• pause
• stop
• mute
• unmute

• hello word

注：页面必须在挂在服务器上才能正常，不然播放器会出现很多火星问题，像火狐、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) ? “

• ” : “
• ”;
  listItem += “”+ this.playlist[i].name +"";

• // Create links to free media
  if(this.playlist[i].free) {
  var first = true;
  listItem += “

  (”;
  KaTeX parse error: Expected '}', got 'EOF' at end of input: …ty,value) { if(.jPlayer.prototype.format[property]) { // Check property is a media format.
  if(first) {
  first = false;
  } else {
  listItem += " | ";
  }
  listItem += “ ” + property + “”;
  }
  });
  listItem += “)”;
  }

  listItem += “”;

  // 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) {
  KaTeX parse error: Expected '}', got 'EOF' at end of input: …ty,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,
  });

  });
  //]]>
  

  页面:

  • play
  • pause
  • stop
  • mute
  • unmute
  • previous
  • next
  转：http://blog.hfut.edu.cn/index.php/uid-44328-action-viewspace-itemid-86949