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. 使用ASP.NET web API创建REST服务(三)

    本文档来源于:http://www.cnblogs.com/madyina/p/3390773.html Creating a REST service using ASP.NET Web API A ...

  2. codeforces 192e

    link: http://codeforces.com/contest/330/problem/E /* ID: zypz4571 LANG: C++ TASK: 192e.cpp */ #inclu ...

  3. timus 1136 Parliament(e)

    Parliament Time limit: 1.0 secondMemory limit: 64 MB A new parliament is elected in the state of MMM ...

  4. 局域网络ping不通

    描述:今天和老崔.老周去公司的新办公地点//相比临时的,十分高大上.当我们把两台台式电脑A.B装好了,网络设置也陪好了,确认能够上网,再装打印机的时候,发现搜索不到打印机的ip(打印机也是有自己的IP ...

  5. 对 Android 开发者有益的 40 条优化建议

    本文转载于:http://www.oschina.net/translate/40-developer-tips-for-android-optimization?cmp 下面是开始Android编程 ...

  6. java的nio之:java的nio系列教程之FileChannel

    一:Java NIO的FileChannel===>Java NIO中的FileChannel是一个连接到文件的通道.可以通过文件通道读写文件. ===>FileChannel无法设置为非 ...

  7. js 触摸类库

    A javascript library for multi-touch gestures :// You can touch this  http://hammerjs.github.io     ...

  8. hydra

    转:http://www.cnblogs.com/patf/p/3142564.html 1.yum -y install openssl-devel pcre-devel ncpfs-devel p ...

  9. Amazon关键词抓取

    亚马逊的网址构造很简单,几乎算是静态的网页,花费3小时完美收工,不要在意细节! 在python3下利用xpath就可以完美解决 xpath的使用方法请见: python之lxml(xpath) 入口图 ...

  10. CSharp使用log4net记录日志

    一.先下载log4net.dll.Newtonsoft.Json.dll和配置log4net.config 相关DLL下载地址:log4net相关dll 下载地址:http://logging.apa ...