Question

我正在使用jplayer逐个播放项目列表。我试图动态地将进度条放在标题附近。动态添加时，进度条无效。

请帮忙。

playlist={
images : ['id-image1','id-image2'],
files  : ['01.mp3','02.mp3'],
currentitem : 0,
createSeekbar : function(divid){
 $('.jp-progress').remove();
   var progressbar,seekbar,playbar;
            progressbar= $('<div/>',{
            "class" : "jp-progress"
                       }).insertAfter("#"+divid);
                seekbar= $('<div/>',{
                                "class" : "jp-seek-bar"
                       }).appendTo(progressbar);                           
                       playbar= $('<div/>',{
                                "class" : "jp-play-bar"
                       }).appendTo(seekbar);              
            }
$("#jquery_jplayer").jPlayer({
    ready: function () {           
       playlist.createSeekbar(playlist.images[playlist.currentitem]);            
      $(this).jPlayer("setMedia", {
        title: "title",
        mp3: "files/"+playlist.files[playlist.currentitem],

      });           
    },
    ended : function(e){                     
                    playlist.movetoNextItem(); 
                    playlist.createSeekbar(divid);              
                    $(this).jPlayer("setMedia", {
                    title: "some titles",
                    mp3: "files/"+playlist.files[playlist.currentitem],                        
                    }).jPlayer("play");  

         },
        swfPath: "/jplayer",
        supplied: "mp3" 
  });

Answer 1

之后在createSeekbar函数上调用cssSelector方法附加进度条将解决您的问题。

  createSeekbar : function(divid){
                  $('.jp-progress').remove();
                  var progressbar,seekbar,playbar;
                  progressbar= $('<div/>',{
                  "class" : "jp-progress"
                   }).insertAfter("#"+divid);
                  seekbar= $('<div/>',{
                            "class" : "jp-seek-bar"
                   }).appendTo(progressbar);                           
                   playbar= $('<div/>',{
                            "class" : "jp-play-bar"
                   }).appendTo(seekbar);  

             //Additional code appended here
            //..............................................
           $("#jquery_jplayer").jPlayer({
                                        cssSelector: 
                                        {
                                        seekBar: '.jp-seek-bar',
                                        playBar: '.jp-play-bar'
                                        }

        }

动态添加进度条在jplayer中的不同位置

1 个答案: