选择Jplayer播放列表添加复选框
Jplayer Playlist add on check box selected
我想添加播放列表到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,
});
}
});
如果你需要更多的帮助就问我。
相关文章:
- 如果选中了多个复选框,如何添加事件
- 如何在metrojs中将复选框添加到数据表中
- jqGrid如何将多个复选框添加到一列中
- 使用jquery选中/取消选中复选框添加/删除值
- 使用复选框添加到 JavaScript 中的字符串
- 使用带有javascript的复选框添加/删除多行
- 如何将复选框添加到剑道网格's工具栏
- Jquery Validator为复选框添加方法验证
- Javascript复选框添加值Textarea
- 向每个复选框添加一个eventListener
- 将复选框添加到总数的Javascript函数
- 在angularjs中动态地向复选框添加/移除checked属性
- 如何将动态创建的复选框添加到引导行
- Codeigniter -通过jquery复选框添加多个项目到购物车
- 将复选框添加到jquery mobile中的可折叠列表标题中
- 如何将复选框添加到JQuery Select2插件中
- 将“全选”复选框添加到更新对象数组的复选框列表中
- 将复选框添加到圣杯中的列表
- 如何将复选框添加到 #{{链接到}} 帮助程序中
- 使用 JQuery 将复选框添加到无序列表