zoukankan      html  css  js  c++  java
  • jplayer中动态添加列表曲目(js提取request中的list数据作为js参数使用)

    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
        });
    });
  • 相关阅读:
    Django中的session的使用
    《Vue笔记01: 我与唐金州二三事》
    CSS之border绘制三角形
    如何增强前端代码的健壮性
    flex招式心法
    码出优美
    可保图片不变形的object-fit
    three.js基础前置知识
    【JS档案揭秘】第四集 关于this的讨论到此为止
    【JS档案揭秘】第三集 深入最底层探秘原型链
  • 原文地址:https://www.cnblogs.com/csonezp/p/4118903.html
Copyright © 2011-2022 走看看