jplayer 的播放列表使用如下:

 $(document).ready(function(){

     new jPlayerPlaylist({
jPlayer: "#jquery_jplayer_1",
cssSelectorAncestor: "#jp_container_1"
}, [
{
title:"Cro Magnon Man",
mp3:"http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3",
oga:"http://www.jplayer.org/audio/ogg/TSP-01-Cro_magnon_man.ogg"
},
{
title:"Your Face",
mp3:"http://www.jplayer.org/audio/mp3/TSP-05-Your_face.mp3",
oga:"http://www.jplayer.org/audio/ogg/TSP-05-Your_face.ogg"
},
{
title:"Cyber Sonnet",
mp3:"http://www.jplayer.org/audio/mp3/TSP-07-Cybersonnet.mp3",
oga:"http://www.jplayer.org/audio/ogg/TSP-07-Cybersonnet.ogg"
},
{
title:"Tempered Song",
mp3:"http://www.jplayer.org/audio/mp3/Miaow-01-Tempered-song.mp3",
oga:"http://www.jplayer.org/audio/ogg/Miaow-01-Tempered-song.ogg"
},
{
title:"Hidden",
mp3:"http://www.jplayer.org/audio/mp3/Miaow-02-Hidden.mp3",
oga:"http://www.jplayer.org/audio/ogg/Miaow-02-Hidden.ogg"
},
{
title:"Lentement",
free:true,
mp3:"http://www.jplayer.org/audio/mp3/Miaow-03-Lentement.mp3",
oga:"http://www.jplayer.org/audio/ogg/Miaow-03-Lentement.ogg"
},
{
title:"Lismore",
mp3:"http://www.jplayer.org/audio/mp3/Miaow-04-Lismore.mp3",
oga:"http://www.jplayer.org/audio/ogg/Miaow-04-Lismore.ogg"
},
{
title:"The Separation",
mp3:"http://www.jplayer.org/audio/mp3/Miaow-05-The-separation.mp3",
oga:"http://www.jplayer.org/audio/ogg/Miaow-05-The-separation.ogg"
},
{
title:"Beside Me",
mp3:"http://www.jplayer.org/audio/mp3/Miaow-06-Beside-me.mp3",
oga:"http://www.jplayer.org/audio/ogg/Miaow-06-Beside-me.ogg"
},
{
title:"Bubble",
free:true,
mp3:"http://www.jplayer.org/audio/mp3/Miaow-07-Bubble.mp3",
oga:"http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg"
},
{
title:"Stirring of a Fool",
mp3:"http://www.jplayer.org/audio/mp3/Miaow-08-Stirring-of-a-fool.mp3",
oga:"http://www.jplayer.org/audio/ogg/Miaow-08-Stirring-of-a-fool.ogg"
},
{
title:"Partir",
free: true,
mp3:"http://www.jplayer.org/audio/mp3/Miaow-09-Partir.mp3",
oga:"http://www.jplayer.org/audio/ogg/Miaow-09-Partir.ogg"
},
{
title:"Thin Ice",
mp3:"http://www.jplayer.org/audio/mp3/Miaow-10-Thin-ice.mp3",
oga:"http://www.jplayer.org/audio/ogg/Miaow-10-Thin-ice.ogg"
}
], {
swfPath: "../../dist/jplayer",
supplied: "oga, mp3",
wmode: "window",
useStateClassSkin: true,
autoBlur: false,
smoothPlayBar: true,
keyEnabled: true
});
});

后台是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
});
});

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

  1. jquery动态添加列表后样式失效解决方式

    最近在做一个通讯录,使用jquery mobile方式来做,在动态添加列表后,listview原有的样式失效,折腾一会,找出解决办法.代码如下. <%@ page language=" ...

  2. VC中动态添加控件

    VC中动态添加控件 动态控件是指在需要时由Create()创建的控件,这与预先在对话框中放置的控件是不同的. 一.创建动态控件: 为了对照,我们先来看一下静态控件的创建. 放置静态控件时必须先建立一个 ...

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

    html页面下拉列表中动态添加后台数据(格式化数据,显示出数据的层次感) 效果图: 运行原理和技术: 当页面加载完毕,利用jquery向后台发送ajax请求,去后台拼接<select>&l ...

  4. 周记4——vue中动态添加图片无效、build上线后background-image路径问题

    又是一个周五,又一周要过去了...很开心,这周遇到了vue中的一个比较常见的坑,网上随便一搜就有了很多解决方案...“幸运”的是,我选了一个带坑的方案...所以我觉得有必要记录一下这个“坑中坑”... ...

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

    这里,通过一个小demo,就可以掌握在布局容器中动态添加控件,以动态添加Button控件为例,添加其他控件同样道理. 1.addView 添加控件到布局容器 2.removeView 在布局容器中删掉 ...

  6. Android 在程序中动态添加 View 布局或控件

    有时我们需要在程序中动态添加布局或控件等,下面用程序来展示一下相应的方法: 1.addView 添加View到布局容器 2.removeView 在布局容器中删掉已有的View 3.LayoutPar ...

  7. 谨记给UpdatePanel中动态添加的控件赋ID

    原文:谨记给UpdatePanel中动态添加的控件赋ID 昨天下定决 心对上次做的布局编辑器控件加以改进,其中最主要变化的就是要完全使用ASP.NET AJAX!但是很遗憾,虽然耳闻已久,但目前对AS ...

  8. vue中动态添加div

    知识点:vue中动态添加div节点,点击添加,动态生成div,点击删除,删除对应的div,其中数组的长度是动态改变的,如在from表单中应用,直接在提交方法中,获得list,获取所填的元素即可 效果: ...

  9. Celery 分布式任务队列快速入门 以及在Django中动态添加定时任务

    Celery 分布式任务队列快速入门 以及在Django中动态添加定时任务 转自 金角大王 http://www.cnblogs.com/alex3714/articles/6351797.html ...

随机推荐

  1. android 升级APK

    Intent intent = new Intent(); //执行动作 intent.setAction(Intent.ACTION_VIEW); //执行完打开应用 intent.setFlags ...

  2. 20145220&20145209&20145309信息安全系统设计基础实验报告(1)

    实验贡献:韩旭飞 刘一阳 李昊实验报告贡献:李昊 刘一阳 韩旭飞 PART1 一.实验原理 交叉编译,简单地说,就是在一个平台上生成另一个平台上的可执行代码.同一个体系结构可以运行不同的操作系统:同样 ...

  3. POJ2375 Cow Ski Area (强连通)(缩点)

                                        Cow Ski Area Time Limit: 1000MS   Memory Limit: 65536K Total Sub ...

  4. 《剑指Offer》之二维数组中的查找

    1.题目描述 在一个二维数组中,每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数. 2.代码实现 pu ...

  5. How to Configure the Gradient Boosting Algorithm

    How to Configure the Gradient Boosting Algorithm by Jason Brownlee on September 12, 2016 in XGBoost ...

  6. linux概念之cpu分析

    http://ilinuxkernel.com/?cat=4 Linux CPU占用率原理与精确度分析1  CPU占用率计算原理在Linux/Unix 下,CPU 利用率分为用户态.系统态和空闲态,分 ...

  7. 【转】TYVJ 1695 计算系数(NOIP2011 TG DAY2 1)

    计算系数 题目描述 给定一个多项式(ax + by)k,请求出多项式展开后xn ym项的系数. [数据范围] 对于 30%的数据,有0≤k≤10: 对于 50%的数据,有a = 1,b = 1: 对于 ...

  8. vs2010编译lua-5.3.2

    lua-5.3.2.tar.gz 解开在 D:\lua 1. 启动VS命令行 2. c:\program files\microsoft visual studio 10.0\vc\bin>cd ...

  9. MySQL和MongoDB语句的写法对照

    查询: MySQL: SELECT * FROM user Mongo: db.user.find() MySQL: SELECT * FROM user WHERE name = ’starlee’ ...

  10. string 字符串的分隔处理与list的相互转换

    在指定 String 数组的每个元素之间串联指定的分隔符 String,从而产生单个串联的字符串.(来源于MSDN) 有两个重载函数:[C#]public static string Join(   ...