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 ...
随机推荐
- ListView滚动到顶部
videoAdapter.notifyDataSetChanged();videoListView.setSelection(0); 注意顺序先notify后setSelection
- leetcode 132. Palindrome Partitioning II ----- java
Given a string s, partition s such that every substring of the partition is a palindrome. Return the ...
- scala言语基础学习十一
隐式转换 使用隐式转换加强现有的类型的功能-类似于设计模式的装饰模式
- N皇后回溯解法 leetcode N-Queens
class Solution { public: vector<vector<string> > solveNQueens(int n) { vector<vector& ...
- 越狱Season 1-Episode 17: J-Cat
Season 1, Episode 17: J-Cat -Pope: Hey, that's looking good. 嗨,看起来真棒 You're making some real progres ...
- radhat 6.4/centos 6.4 下编译安装 最新ruby 2.1.5
#安装编译环境 yum groupinstall "Development tools" 或者 yum install gcc gcc-c++ gcc-g77 flex bison ...
- ASP.NET中JSON的序列化和反序列化
JSON是专门为浏览器中的网页上运行的JavaScript代码而设计的一种数据格式.在网站应用中使用JSON的场景越来越多,本文介绍 ASP.NET中JSON的序列化和反序列化,主要对JSON的简单介 ...
- 伪类选择器:root的妙用
css3的元素旋转功能非常强大,也非常吸引人,但是很多时候因为浏览器使用率的问题,我们必需要想办法兼容一些低版本的浏览器,特别是ie这朵奇葩. 想要实现元素旋转本来很简单的一个属性就能实现,那就是tr ...
- 002. 在HTML页面嵌入循环代码
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs ...
- 关于malloc申请的动态内存的问题
http://bbs.bccn.net/thread-331344-1-1.html #include<stdio.h>#include<stdlib.h>int main(v ...