Javascript 将数组(嵌套?)替换为XML文档中的值(仅限客户端脚本)
我是一个绝对的javascript新手,但我只是尝试调整JPlayer,使其在播放列表中使用XML文件,而不是硬编码的播放列表。下面是创建播放列表的代码:Javascript 将数组(嵌套?)替换为XML文档中的值(仅限客户端脚本),javascript,jquery,xml,jplayer,Javascript,Jquery,Xml,Jplayer,我是一个绝对的javascript新手,但我只是尝试调整JPlayer,使其在播放列表中使用XML文件,而不是硬编码的播放列表。下面是创建播放列表的代码: //<![CDATA[ $(document).ready(function(){ var Playlist = function(instance, playlist, options) { var self = this; this.instance = instance; // Stri
//<![CDATA[
$(document).ready(function(){
var Playlist = function(instance, playlist, options) {
var self = this;
this.instance = instance; // String: To associate specific HTML with this playlist
this.playlist = playlist; // Array of Objects: The playlist
this.options = options; // Object: The jPlayer constructor options for this playlist
this.current = 0;
this.cssId = {
jPlayer: "jquery_jplayer_",
interface: "jp_interface_",
playlist: "jp_playlist_"
};
this.cssSelector = {};
$.each(this.cssId, function(entity, id) {
self.cssSelector[entity] = "#" + id + self.instance;
});
if(!this.options.cssSelectorAncestor) {
this.options.cssSelectorAncestor = this.cssSelector.interface;
}
$(this.cssSelector.jPlayer).jPlayer(this.options);
$(this.cssSelector.interface + " .jp-previous").click(function() {
self.playlistPrev();
$(this).blur();
return false;
});
$(this.cssSelector.interface + " .jp-next").click(function() {
self.playlistNext();
$(this).blur();
return false;
});
};
Playlist.prototype = {
displayPlaylist: function() {
var self = this;
$(this.cssSelector.playlist + " ul").empty();
for (i=0; i < this.playlist.length; i++) {
var listItem = (i === this.playlist.length-1) ? "<li class='jp-playlist-last'>" : "<li>";
listItem += "<a href='#' id='" + this.cssId.playlist + this.instance + "_item_" + i +"' tabindex='1'>"+ this.playlist[i].name +"</a>";
// Create links to free media
if(this.playlist[i].free) {
var first = true;
listItem += "<div class='jp-free-media'>(";
$.each(this.playlist[i], function(property,value) {
if($.jPlayer.prototype.format[property]) { // Check property is a media format.
if(first) {
first = false;
} else {
listItem += " | ";
}
listItem += "<a id='" + self.cssId.playlist + self.instance + "_item_" + i + "_" + property + "' href='" + value + "' tabindex='1'>" + property + "</a>";
}
});
listItem += ")</span>";
}
listItem += "</li>";
// Associate playlist items with their media
$(this.cssSelector.playlist + " ul").append(listItem);
$(this.cssSelector.playlist + "_item_" + i).data("index", i).click(function() {
var index = $(this).data("index");
if(self.current !== index) {
self.playlistChange(index);
} else {
$(self.cssSelector.jPlayer).jPlayer("play");
}
$(this).blur();
return false;
});
// Disable free media links to force access via right click
if(this.playlist[i].free) {
$.each(this.playlist[i], function(property,value) {
if($.jPlayer.prototype.format[property]) { // Check property is a media format.
$(self.cssSelector.playlist + "_item_" + i + "_" + property).data("index", i).click(function() {
var index = $(this).data("index");
$(self.cssSelector.playlist + "_item_" + index).click();
$(this).blur();
return false;
});
}
});
}
}
},
playlistInit: function(autoplay) {
if(autoplay) {
this.playlistChange(this.current);
} else {
this.playlistConfig(this.current);
}
},
playlistConfig: function(index) {
$(this.cssSelector.playlist + "_item_" + this.current).removeClass("jp-playlist-current").parent().removeClass("jp-playlist-current");
$(this.cssSelector.playlist + "_item_" + index).addClass("jp-playlist-current").parent().addClass("jp-playlist-current");
this.current = index;
$(this.cssSelector.jPlayer).jPlayer("setMedia", this.playlist[this.current]);
},
playlistChange: function(index) {
this.playlistConfig(index);
$(this.cssSelector.jPlayer).jPlayer("play");
},
playlistNext: function() {
var index = (this.current + 1 < this.playlist.length) ? this.current + 1 : 0;
this.playlistChange(index);
},
playlistPrev: function() {
var index = (this.current - 1 >= 0) ? this.current - 1 : this.playlist.length - 1;
this.playlistChange(index);
}
};
var mediaPlaylist = new Playlist("1", [
{
name:"song1",
mp3: "song1.mp3",
poster: "http://www.jplayer.org/video/poster/Incredibles_Teaser_640x272.png"
},
{
name:"song2",
mp3: "song2.mp3",
poster: "http://www.jplayer.org/video/poster/Incredibles_Teaser_640x272.png"
},
{
name:"song3",
mp3: "song3.mp3",
poster: "http://www.jplayer.org/video/poster/Incredibles_Teaser_640x272.png"**
}
], {
ready: function() {
mediaPlaylist.displayPlaylist();
mediaPlaylist.playlistInit(false); // Parameter is a boolean for autoplay.
},
ended: function() {
mediaPlaylist.playlistNext();
},
swfPath: "js",
supplied: "ogv, m4v, oga, mp3"
});
});
/=0)?this.current-1:this.playlist.length-1;
此项更改(索引);
}
};
var mediaPlaylist=新播放列表(“1”[
{
名称:"宋一",,
mp3:“song1.mp3”,
海报:“http://www.jplayer.org/video/poster/Incredibles_Teaser_640x272.png"
},
{
名称:"宋2",,
mp3:“song2.mp3”,
海报:“http://www.jplayer.org/video/poster/Incredibles_Teaser_640x272.png"
},
{
名称:"宋三",,
mp3:“song3.mp3”,
海报:“http://www.jplayer.org/video/poster/Incredibles_Teaser_640x272.png"**
}
], {
就绪:函数(){
mediaPlaylist.displayPlaylist();
mediaPlaylist.playlinit(false);//参数是自动播放的布尔值。
},
完:函数(){
mediaPlaylist.playlinext();
},
swfPath:“js”,
提供:“ogv、m4v、oga、mp3”
});
});
以“var mediaPlaylist”开头的部分是我唯一需要更改的部分。与其将键/值设置为name:songname、mp3:mp3等,我希望它从XML文件中提取这些值,或者更好的方法是,将它们从XML文件中推送到数组中,如下所示:
<song>songname</song>
<mp3>file.mp3</mp3>
songname
file.mp3
这里最让我困惑的是函数/数组是如何设置的…太多的花括号和括号让我难以理解。我如何在不破坏它的情况下进入这个过程?如果您有一个服务器端XML播放列表文件,格式如下:
<?xml version="1.0" encoding="UTF-8"?>
<playlist>
<entry>
<song>songname</song>
<mp3>file.mp3</mp3>
</entry>
<entry>
<song>songname2</song>
<mp3>file2.mp3</mp3>
</entry>
</playlist>
我使用这种方法从jQuery$.ajax success
方法返回一个值,这一回答值得称赞
您必须将var mediaPlaylist=new Playlist()
构造函数重构为回调函数,因为您无法从回调返回播放列表值(请参阅)
希望这有帮助:-)如果您有以下格式的服务器端XML播放列表文件:
<?xml version="1.0" encoding="UTF-8"?>
<playlist>
<entry>
<song>songname</song>
<mp3>file.mp3</mp3>
</entry>
<entry>
<song>songname2</song>
<mp3>file2.mp3</mp3>
</entry>
</playlist>
我使用这种方法从jQuery$.ajax success
方法返回一个值,这一回答值得称赞
您必须将var mediaPlaylist=new Playlist()
构造函数重构为回调函数,因为您无法从回调返回播放列表值(请参阅)
希望这有帮助:-)XML播放列表文件是否与问题中包含JavaScript的页面位于同一服务器上?这并不能真正回答您的问题,但我想解释一下mediaPlaylist的符号。首先,它们实例化Playlist类的一个新对象,该对象似乎包含三个参数。第二个参数是对象数组,每个对象都有三个属性(“名称”、“mp3”和“海报”)。这些花括号中的每一个都是一个对象文字-相当于匿名函数的对象。它们周围的方括号中带有逗号,使其成为一个对象文字数组。第三个参数似乎是一个选项对象,其前两个属性是回调函数。XML播放列表文件是否与问题中包含JavaScript的页面位于同一服务器上?这并不能真正回答您的问题,但我想解释mediaPlaylist的符号。首先,它们实例化Playlist类的一个新对象,该对象似乎包含三个参数。第二个参数是对象数组,每个对象都有三个属性(“名称”、“mp3”和“海报”)。这些花括号中的每一个都是一个对象文字-相当于匿名函数的对象。它们周围的方括号中带有逗号,使其成为一个对象文字数组。第三个参数似乎是一个options对象,它的前两个属性是回调函数。非常感谢!我要试一试,谢谢!我让它工作了。出于某种原因,JSON是捏造出来的,所以我只是把歌曲插入PlayFromXML所在的位置。非常感谢!我要试一试,谢谢!我让它工作了。出于某种原因,JSON是捏造出来的,所以我只是将歌曲插入PlayFromXML所在的位置。