我想添加播放列表到jplayer使用复选框,当我点击复选框url必须添加到jplayer播放列表,我有url当我点击复选框我得到特定的url,但我无法添加到我的播放列表请任何人帮助我,当我添加它显示我未定义
//This array object
var playList = new Array();
//this check box selected event, when i click on checkbox i am having item which bring the url "http://www.jplayer.org/audio/ogg/TSP-01-Cro_magnon_man.ogg"
self.Selected= function (item) {
var url = Voiceurl();
playList.push(url);
console.log(playList);
//this function i am calling to add to playlist
JplayerWithPlaylist(playList)
}
function JplayerWithPlaylist(playList) {
console.log(playList);
var cssSelector = {
jPlayer: "#jquery_jplayer_1",
cssSelectorAncestor: "#jp_container_1"
};
var options = {
swfPath: "./js",
supplied: "oga"
};
var myPlaylist = new jPlayerPlaylist(cssSelector, playList, options);
for (i = 0; i < playList.length; i++) {
myPlaylist.add(playList[i])
};
};
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio">
<div class="jp-type-playlist">
<div class="jp-gui jp-interface">
<div class="my-row btn-group jp-controls">
<button href="javascript:;" class="btn btn-default glyphicon glyphicon-step-backward jp-previous" tabindex="1"></button>
<button href="javascript:;" class="btn btn-default glyphicon glyphicon-play jp-play" tabindex="1"></button>
<button href="javascript:;" class="btn btn-default glyphicon glyphicon-pause jp-pause" tabindex="1"></button>
<button href="javascript:;" class="btn btn-default glyphicon glyphicon-step-forward jp-next" tabindex="1"></button>
<button href="javascript:;" class="btn btn-default glyphicon glyphicon-stop jp-stop" tabindex="1"></button>
<button href="javascript:;" class="btn btn-default glyphicon glyphicon-volume-off jp-mute" tabindex="1" title="mute"></button>
<button href="javascript:;" class="btn btn-default glyphicon glyphicon-volume-down jp-unmute" tabindex="1" title="unmute"></button>
<button href="javascript:;" class="btn btn-default glyphicon glyphicon-volume-up jp-volume-max" tabindex="1" title="max volume"></button>
</div>
</div>
<div class="jp-playlist">
<ul class="list-unstyled">
<li></li>
</ul>
</div>
</div>
请阅读http://jplayer.org/latest/demo-02-jPlayerPlaylist/.
为什么每次添加都要创建一个新的播放列表?这是非常昂贵的,只会覆盖你的另一个。
在页面加载时创建播放列表,并在选中的复选框上添加播放列表
似乎你推一个url到播放列表,然后添加每个url到播放列表,这是不正确的。
jPlayerPlaylist
的add()
方法接受一个对象而不是字符串作为参数:
。
myPlaylist.add({
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"
});
item
在你的函数中也未使用。
试试这个:
$(function() {
var jPlayerPlaylistConfig = {
cssSelector: {
jPlayer: "#jquery_jplayer_1",
cssSelectorAncestor: "#jp_container_1"
},
options: {
swfPath: "./js",
supplied: "oga"
},
playlist: []
};
var myPlaylist = new jPlayerPlaylist(jPlayerPlaylistConfig.cssSelector, jPlayerPlaylistConfig.playList, jPlayerPlaylistConfig.options);
//this check box selected event, when i click on checkbox i am having item which bring the url "http://www.jplayer.org/audio/ogg/TSP-01-Cro_magnon_man.ogg"
self.Selected = function () {
var url = Voiceurl();
console.log(url); //Make sure URL actually exists
myPlaylist.add({
mp3: url,
});
}
});
如果你需要更多的帮助就问我。