jPlayer是个用JavaScript写的完全免费和开源的媒体库(media library)。作为jQuery插件的一员,使用jPlayer可以在你的网页上轻松加入跨平台的音乐和视频。通过jPlayer的API,你可以构想出具有创意的影音解决方案,当然,你也可以为jPlayer贡献出自己的一份力。
jPlayer有一个播放列表 但是不太灵活 自己试着写了一个jPlaylist类
var jPlayerList = function(object,medias,options){
var _this = this;
var player = null;
var container = null;
_this.current = 0;
_this.playing = false;
var defaults = {
ready:function(event) {
}
}
var op = $.extend(defaults,options);
var info = {
title:"",
author:""
};
var init = function(object,medias,options){
_this.jPlayer = object.jPlayer;
_this.cssSelectorAncestor = object.cssSelectorAncestor;
_this.medias = medias;
player = $(object.jPlayer);
container = $(object.cssSelectorAncestor);
var pl = player.jPlayer(op);
for(var i=0; i<medias.length; i++ ) {
var obj = medias[i];
var title = obj.title;
var author = obj.artist;
if (typeof title === "undefined") { title=""; }
if (typeof author === "undefined") { author=""; }
$("#playlist").append('<li><b class="playlist-title">'+title+'</b><b class="playlist-author">'+author+'</b><i class="icon-remove jp-removeMedia"></i></li>');
}
player.bind($.jPlayer.event.ended,function(){
_this.next();
})
container.find(".jp-play").click(function(e){
_this.select(_this.current);
_this.play();
_this.playing = true;
})
container.find(".jp-previous").click(function(e){
_this.previous();
})
container.find(".jp-next").click(function(e){
_this.next();
})
container.find(".jp-pause").click(function(e){
_this.pause();
})
container.find(".jp-stop").click(function(e){
_this.stop();
})
$("#playlist").find(".jp-removeMedia").click(function(e){
var index = $(this).parent().index();
cosole.log(index);
_this.after(index);
_this.removeMedia(index);
})
}
init(object,medias,options);
_this.select = function(index) {
if (typeof index === "undefined") { index = 0; }
var nosupport = false;
for(arg in _this.medias[index] ) {
if(arg == "m4v") {
alert("不支持此格式");
nosupport = true;
}
}
if(!nosupport) {
player.jPlayer("setMedia",_this.medias[index]);
_this.current = index;
}
}
_this.previous = function() {
_this.current--;
if(_this.current < 0) {
_this.current = _this.medias.length-1;
}
_this.select(_this.current);
if(_this.playing) {
_this.play();
}
}
_this.next = function() {
_this.current++;
if(_this.current > (_this.medias.length-1)) {
_this.current = 0;
}
_this.select(_this.current);
if(_this.playing) {
_this.play();
}
}
_this.after = function(i) {
var index = ++i;
if(index > (_this.medias.length-1)) {
index = 0;
}
if(_this.medias.length > 1) {
_this.select(index);
}else {
_this.stop();
}
if(_this.playing) {
_this.play();
}
}
_this.play = function() {
player.jPlayer("play");
_this.playing = true;
}
_this.pause = function() {
player.jPlayer("pause");
_this.playing = false;
}
_this.stop = function() {
player.jPlayer("stop");
_this.playing = false;
}
_this.addMedia = function(media) {
_this.medias.push(media);
_this.select(_this.medias.length-1);
var s = $.extend(info,media);
$("#playlist").append('<li><b class="playlist-title">'+s.title+'</b><b class="playlist-author">'+s.author+'</b><i class="icon-remove jp-removeMedia"></i></li>');
$("#playlist").find(".jp-removeMedia").click(function(e){
var index = $(this).parent().index();
console.log(index);
_this.after(index);
_this.removeMedia(index);
})
_this.play();
}
_this.removeMedia = function(index) {
_this.medias.splice(index,1);
$("#playlist>li").eq(index).remove();
}
}
希望大家能喜欢
文件下载地址 360云盘下载