选中的Jplayer播放列表添加复选框

时间:2016-10-26 11:57:48

标签: javascript jquery knockout-2.0 jplayer

我想使用复选框向jplayer添加播放列表,当我点击复选框时,url必须添加到jplayer播放列表,当我点击复选框时我有网址我正在获取特定网址但我无法添加到myplaylist请任何人帮助我,当我添加它时显示未定义

 //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>

1 个答案:

答案 0 :(得分:0)

请阅读http://jplayer.org/latest/demo-02-jPlayerPlaylist/

为什么要在每次添加时创建新的播放列表?这是非常昂贵的,只会覆盖你的另一个。

在页面加载时创建播放列表并添加到选中复选框上的播放列表。

您似乎将网址推送到播放列表,然后将每个网址添加到不正确的播放列表中。

add()的{​​{1}}方法接受一个对象,而不是字符串作为参数:

E.g。

jPlayerPlaylist

您的函数中也未使用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

问我是否需要更多帮助。