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 });

后台是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+="]";

很笨的办法,自己拼接出一个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
    });
});
时间: 2024-12-25 20:00:05

jplayer中动态添加列表曲目(js提取request中的list数据作为js参数使用)的相关文章

html页面下拉列表中动态添加后台数据(格式化数据,显示出数据的层次感)

html页面下拉列表中动态添加后台数据(格式化数据,显示出数据的层次感) 效果图: 运行原理和技术: 当页面加载完毕,利用jquery向后台发送ajax请求,去后台拼接<select></select>中的option字符串.让后将字符串响应回来,动态添加到<select>中.其中的字符串中包含了后台的数据. 页面js代码: 1 <script type="text/javascript"> 2 //加载部门 3 function loa

android 在布局中动态添加控件

第一步 Java代码 final LayoutInflater inflater = LayoutInflater.from(this); 第二步:获取需要被添加控件的布局 Java代码 final LinearLayout lin = (LinearLayout) findViewById(R.id.LinearLayout01); 第三步:获取需要添加的布局(控件) Java代码 LinearLayout layout = (LinearLayout) inflater.inflate( R

Android 在布局容器中动态添加控件

这里,通过一个小demo,就可以掌握在布局容器中动态添加控件,以动态添加Button控件为例,添加其他控件同样道理. 1.addView 添加控件到布局容器 2.removeView 在布局容器中删掉已有的控件 3.使用,来个小demo就明白了 public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(save

在CFormView或对话框中动态添加CScrollView、CFormView

在CFormView或对话框中动态添加CScrollView.CFormView 本代码可以在CFormView中,根据事先画好的控件位置创建CScrollView 也可以在CDialog中创建CScrollView.CFormView等 注: 若以下代码放在CMainRightView::OnCreate(LPCREATESTRUCT lpCreateStruct)内,则GetDlgItem()函数将调用失败,因为此时控件都还未被创建! void CMainRightView::OnIniti

Android在布局中动态添加view的两种方法

一.说明 添加视图文件的时候有两种方式:1.通过在xml文件定义layout:2.java代码编写 二.前言说明 1.构造xml文件 2.LayoutInflater 提到addview,首先要了解一下LayoutInflater类.这个类最主要的功能就是实现将xml表述的layout转化为View的功能.为了便于理解,我们可以将它与findViewById()作一比较,二者都是实例化某一对象,不同的是findViewById()是找xml布局文件下的具体widget控件实例化,而LayoutI

vue中动态添加div

知识点:vue中动态添加div节点,点击添加,动态生成div,点击删除,删除对应的div,其中数组的长度是动态改变的,如在from表单中应用,直接在提交方法中,获得list,获取所填的元素即可 效果: 核心代码说明(样式代码可自行修改,详细代码请参照源码): <div v-for="(v,i) in list"> <div class="form-group m-form__group row" style="padding-top: 1

ASP.NET中Literal控件的使用方法(用于向网页中动态添加内容)

原文:https://www.jb51.net/article/82855.htm 可以将 Literal 控件用作网页上其他内容的容器.Literal 控件最常用于向网页中动态添加内容.简单的讲,就是可以把 HTML 代码写到 Literal 控件上,直接呈现出来. 一.常见Literal属性 属性 描述 Text 指定 Literal 控件中显示的文本.在用户的浏览器中,这会显示为 HTML. Mode 指定控件如何处理添入其中的标记. 二.基础用法 前台 LiteralTest.aspx

如何获取jQuery中动态添加的元素

一.问题描述 用jQuery的append()方法动态添加了一段html代码之后,发现在为新添加的元素绑定click事件时无法获取该新元素. 二.解决方法 度娘推荐的方法基本是用live()方法 live()的官方定义和用法: live() 方法为被选元素附加一个或多个事件处理程序,并规定当这些事件发生时运行的函数.通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素(比如由脚本创建的新元素). live()的详细使用方法可以查看jQuery live() live()和

Unity NGUI中动态添加和删除sprite

转自:http://www.cnblogs.com/vitah/p/3897664.html (以后,参考链接和作者将在文章首部给出,转载请保留此部分内容) 参考链接:http://www.narkii.com/club/thread-299977-1.html,作者:纳金网 比巴卜: 参考链接:http://game.ceeger.com/forum/read.php?tid=2852,作者:Unity圣典论坛 kuku小夭 动态添加和删除Sprite可以在很多地方用到,这里以实现显示技能CD