jplayer中动态添加列表曲目（js提取request中的list数据作为js参数使用）

浏览数：123 / 时间：2015年06月09日

jplayer 的播放列表使用如下：

 1 $(document).ready(function(){
 2 
 3     new jPlayerPlaylist({
 4         jPlayer: "#jquery_jplayer_1",
 5         cssSelectorAncestor: "#jp_container_1"
 6     }, [
 7         {
 8             title:"Cro Magnon Man",
 9             mp3:"http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3",
10             oga:"http://www.jplayer.org/audio/ogg/TSP-01-Cro_magnon_man.ogg"
11         },
12         {
13             title:"Your Face",
14             mp3:"http://www.jplayer.org/audio/mp3/TSP-05-Your_face.mp3",
15             oga:"http://www.jplayer.org/audio/ogg/TSP-05-Your_face.ogg"
16         },
17         {
18             title:"Cyber Sonnet",
19             mp3:"http://www.jplayer.org/audio/mp3/TSP-07-Cybersonnet.mp3",
20             oga:"http://www.jplayer.org/audio/ogg/TSP-07-Cybersonnet.ogg"
21         },
22         {
23             title:"Tempered Song",
24             mp3:"http://www.jplayer.org/audio/mp3/Miaow-01-Tempered-song.mp3",
25             oga:"http://www.jplayer.org/audio/ogg/Miaow-01-Tempered-song.ogg"
26         },
27         {
28             title:"Hidden",
29             mp3:"http://www.jplayer.org/audio/mp3/Miaow-02-Hidden.mp3",
30             oga:"http://www.jplayer.org/audio/ogg/Miaow-02-Hidden.ogg"
31         },
32         {
33             title:"Lentement",
34             free:true,
35             mp3:"http://www.jplayer.org/audio/mp3/Miaow-03-Lentement.mp3",
36             oga:"http://www.jplayer.org/audio/ogg/Miaow-03-Lentement.ogg"
37         },
38         {
39             title:"Lismore",
40             mp3:"http://www.jplayer.org/audio/mp3/Miaow-04-Lismore.mp3",
41             oga:"http://www.jplayer.org/audio/ogg/Miaow-04-Lismore.ogg"
42         },
43         {
44             title:"The Separation",
45             mp3:"http://www.jplayer.org/audio/mp3/Miaow-05-The-separation.mp3",
46             oga:"http://www.jplayer.org/audio/ogg/Miaow-05-The-separation.ogg"
47         },
48         {
49             title:"Beside Me",
50             mp3:"http://www.jplayer.org/audio/mp3/Miaow-06-Beside-me.mp3",
51             oga:"http://www.jplayer.org/audio/ogg/Miaow-06-Beside-me.ogg"
52         },
53         {
54             title:"Bubble",
55             free:true,
56             mp3:"http://www.jplayer.org/audio/mp3/Miaow-07-Bubble.mp3",
57             oga:"http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg"
58         },
59         {
60             title:"Stirring of a Fool",
61             mp3:"http://www.jplayer.org/audio/mp3/Miaow-08-Stirring-of-a-fool.mp3",
62             oga:"http://www.jplayer.org/audio/ogg/Miaow-08-Stirring-of-a-fool.ogg"
63         },
64         {
65             title:"Partir",
66             free: true,
67             mp3:"http://www.jplayer.org/audio/mp3/Miaow-09-Partir.mp3",
68             oga:"http://www.jplayer.org/audio/ogg/Miaow-09-Partir.ogg"
69         },
70         {
71             title:"Thin Ice",
72             mp3:"http://www.jplayer.org/audio/mp3/Miaow-10-Thin-ice.mp3",
73             oga:"http://www.jplayer.org/audio/ogg/Miaow-10-Thin-ice.ogg"
74         }
75     ], {
76         swfPath: "../../dist/jplayer",
77         supplied: "oga, mp3",
78         wmode: "window",
79         useStateClassSkin: true,
80         autoBlur: false,
81         smoothPlayBar: true,
82         keyEnabled: true
83     });
84 });

View Code

后台是struts2，返回的数据是一个包含标题和地址的list。

由于一些原因，没有采用返回json数据的方式，而是从request中取list作为数据来源。

尝试了半天，最后成功的把request中的list数据动态添加到了jplayer的播放列表中。

var stringlist="[";
          <%
          //这里的函数是为了把list中数据添加到stringlist中，stinglist是用来动态构建jplay list的参数
         for(int k=0;k<chapters.size();k++){
              Chapter chapter=(Chapter)chapters.get(k);
              String title1=chapter.getTitle();
              String audio1=chapter.getAudio();
          %>
          stringlist+=‘{title:‘;
          stringlist+=‘"<%= title1%>"‘;
          stringlist+=‘,mp3:‘;
          stringlist+=‘"<%= audio1%>"‘;
          stringlist+=‘},‘;
          <%
          }
          %>
          stringlist+="]";

View Code

很笨的办法，自己拼接出一个json字符串。。。然后当参数使用

$(document).ready(function(){

    new jPlayerPlaylist({
        jPlayer: "#jquery_jplayer_1",
        cssSelectorAncestor: "#jp_container_1"
    }, 
        eval(stringlist)
        
    , {
        swfPath: "/js",
        supplied: "oga, mp3",
        wmode: "window",
        useStateClassSkin: true,
        autoBlur: false,
        smoothPlayBar: true,
        autoPlay:true,
        keyEnabled: true
    });
});