jplayer中动态添加列表曲目(js提取request中的list数据作为js参数使用)
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参数使用)的更多相关文章
- jquery动态添加列表后样式失效解决方式
最近在做一个通讯录,使用jquery mobile方式来做,在动态添加列表后,listview原有的样式失效,折腾一会,找出解决办法.代码如下. <%@ page language=" ...
- VC中动态添加控件
VC中动态添加控件 动态控件是指在需要时由Create()创建的控件,这与预先在对话框中放置的控件是不同的. 一.创建动态控件: 为了对照,我们先来看一下静态控件的创建. 放置静态控件时必须先建立一个 ...
- html页面下拉列表中动态添加后台数据(格式化数据,显示出数据的层次感)
html页面下拉列表中动态添加后台数据(格式化数据,显示出数据的层次感) 效果图: 运行原理和技术: 当页面加载完毕,利用jquery向后台发送ajax请求,去后台拼接<select>&l ...
- 周记4——vue中动态添加图片无效、build上线后background-image路径问题
又是一个周五,又一周要过去了...很开心,这周遇到了vue中的一个比较常见的坑,网上随便一搜就有了很多解决方案...“幸运”的是,我选了一个带坑的方案...所以我觉得有必要记录一下这个“坑中坑”... ...
- Android 在布局容器中动态添加控件
这里,通过一个小demo,就可以掌握在布局容器中动态添加控件,以动态添加Button控件为例,添加其他控件同样道理. 1.addView 添加控件到布局容器 2.removeView 在布局容器中删掉 ...
- Android 在程序中动态添加 View 布局或控件
有时我们需要在程序中动态添加布局或控件等,下面用程序来展示一下相应的方法: 1.addView 添加View到布局容器 2.removeView 在布局容器中删掉已有的View 3.LayoutPar ...
- 谨记给UpdatePanel中动态添加的控件赋ID
原文:谨记给UpdatePanel中动态添加的控件赋ID 昨天下定决 心对上次做的布局编辑器控件加以改进,其中最主要变化的就是要完全使用ASP.NET AJAX!但是很遗憾,虽然耳闻已久,但目前对AS ...
- vue中动态添加div
知识点:vue中动态添加div节点,点击添加,动态生成div,点击删除,删除对应的div,其中数组的长度是动态改变的,如在from表单中应用,直接在提交方法中,获得list,获取所填的元素即可 效果: ...
- Celery 分布式任务队列快速入门 以及在Django中动态添加定时任务
Celery 分布式任务队列快速入门 以及在Django中动态添加定时任务 转自 金角大王 http://www.cnblogs.com/alex3714/articles/6351797.html ...
随机推荐
- HTTP.sys漏洞验证及防护
使用发包工具构造http请求包检测 以fiddler工具为例,构造如下图的请求包: 1 GET http://192.168.174.145/ HTTP/1.12 Host: 192.168.174. ...
- c#部分---一维数组、冒泡排序、foreach的用法
一维数组:2016-10-14 定义方式:{定义的时候,需要数据类型.长度!} 1.int []aa=new int [5]; 表示数组里面有5个字符: 2.int []aa=new int []{ ...
- 关于display的那些事儿!
关于display的那些事儿! display,display,display!嘿嘿嘿!display这一CSS属性,还是相当神奇的哦!给它设置不同的值,被修饰的标签相应的就随之变换了自身的属性特性, ...
- mysql中slow query log慢日志查询分析
在mysql中slow query log是一个非常重要的功能,我们可以开启mysql的slow query log功能,这样就可以分析每条sql执行的状态与性能从而进行优化了. 一.慢查询日志 配置 ...
- 第二章 C语言编程实践
上章回顾 宏定义特点和注意细节 条件编译特点和主要用处 文件包含的路径查询规则 C语言扩展宏定义的用法 第二章 第二章 C语言编程实践 C语言编程实践 预习检查 异或的运算符是什么 宏定义最主要的特点 ...
- Java——File(文件)
public static void main(String[] args) { // getFile(); /* * 需求: 对指定目录进行所有内容的列出,(包含子目录中的内容) * */ ...
- matlab绘图+计算心得
Matlab 常用于做一些计算实验和绘图,我主要用matlab来绘图件.Matlab 可以用GUI界面来完成绘图,但是既然能用鼠标完成的绘图,那么一定能用代码命令来完成绘图,个人比较喜欢用命令来完成m ...
- DDD, MVC & Entity Framework
https://digitalpolis.co.uk/software-thoughts/ddd-mvc-entity-framework/ Data Points - Coding for Doma ...
- rac 11g_第二个节点重启后无法启动实例:磁盘组dismount问题
原创作品,出自 "深蓝的blog" 博客,欢迎转载,转载时请务必注明以下出处,否则追究版权法律责任. 深蓝的blog:http://blog.csdn.net/huangyanlo ...
- python模块结构和布局
用模块来合理的组织你的python代码是简单又自然的方法.下面介绍一种非常合理的布局: #(1)起始行(Unix) #(2)模块文档 #(3)模块导入 #(4)变量定义 #(5)类定义 #(6)函数定 ...