我正在尝试修改jPlayer QuickStart项目,依次播放一系列mp3文件,每个文件都有自己的海报图片。这基本上只是使用html,JavaScript,jQuery和CSS。
(快速入门在此处,供参考:http://jplayer.org/latest/quick-start-guide/)
下面是我当前的代码,它无效(甚至没有播放第一个mp3或音频文件)。
$(document).ready(function() {
var m = [{
mp: "data/audio1.mp3",
p: "data/Slide1.PNG"
}, {
mp: "data/audio2.mp3",
p: "data/Slide2.PNG"
}, {
mp: "data/audio3.mp3",
p: "data/Slide3.PNG"
}];
$("#jquery_jplayer_1").jPlayer({
ready: function() {
$.each(m, function(index, value) {
alert(value.mp);
$(this).jPlayer("setMedia", {
mp3: value.mp,
poster: value.p
}).jPlayer("play");
});
},
swfPath: "/js",
supplied: "mp3",
size: {
width: "960px",
height: "720px"
}
});
});
警告(value.mp); 告诉我我的文件名正确无误。
我在使用和不使用 jPlayer(“播放”)时尝试过,无论如何都没有运气。
如果我删除每个行,只使用 m [0] .mp 和 m [0] .p 之类的内容,我可以播放任何给定的mp3并显示任何给定的PNG。但是“每种”方法都无法按顺序播放每个mp3文件及其相关图像。
我知道jPlayer有一个listplayer附加组件,但它有很多我不需要的功能,所以如果我能用几行代码做这件事,我宁愿不使用它。
答案 0 :(得分:0)
这是我用来播放mp3并按顺序显示相关海报的方法。它基于jPlayer 已结束事件。
$(document).ready(function() {
var m = [{
mp: "data/a24x2x1.mp3",
p: "data/Slide1.PNG"
}, {
mp: "data/a24x3x1.mp3",
p: "data/Slide2.PNG"
}, {
mp: "data/a24x4x1.mp3",
p: "data/Slide3.PNG"
}];
var n = 0;
$("#jquery_jplayer_1").jPlayer({
ready: function() {
$("#jquery_jplayer_1").bind($.jPlayer.event.ended, function(event) {
if (n < m.length - 1) {
n++;
} else {
alert("do something after the last slide");
return;
}
$(this).jPlayer("setMedia", {
mp3: m[n].mp,
poster: m[n].p
}).jPlayer("play");
});
$(this).jPlayer("setMedia", {
mp3: m[n].mp,
poster: m[n].p
}).jPlayer("play");
},
swfPath: "/js",
supplied: "mp3",
size: {
width: "960px",
height: "720px"
}
});
});