1

我是 javascript 的绝对新手，但我只是想调整 JPlayer 以将 XML 文件用于播放列表，而不是硬编码的播放列表。因此，这是创建播放列表的代码：

//<![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"
    });
});

以“var mediaPlaylist”开头的部分是我唯一需要更改的部分。与其将键/值作为名称：歌曲名、mp3：mp3 等，我希望它从 XML 文件中提取这些值，或者更好的是，只需将它们从如下所示的 XML 推送到数组中：

<song>songname</song>
<mp3>file.mp3</mp3>

这里最让我困惑的事情是该函数/数组是如何设置的……花括号和方括号太多，无法将我的头包裹起来。我如何在不破坏它的情况下进入它？

4

1 回答 1

1

如果您有以下形式的服务器端 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>

然后您可以通过AJAX从客户端加载它并从 XML 创建一个 JSON 数组。以下示例使用jQuery JavaScript 框架和jquery-json 插件（仅用于将数组格式化为 JSON）。您应该能够在 Chrome 或 Firefox 上运行它，因为两者都有一个console（通过F12在浏览器中按下访问），我在其中输出 JSON 数组。

注意：如果您不使用这些浏览器中的任何一个，您可以更改console.log(...)为。alert(...)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://jquery-json.googlecode.com/files/jquery.json-2.2.min.js"></script>
    <script type="text/javascript">
        $(function() {
            var Playlist = function(instance, playlist, options) {
                var self = this;
                this.instance = instance;
                this.playlist = playlist;
                this.options = options;
            };

            function getPlaylist(callback) {
                var songs = new Array();
                $.ajax({
                    dataType:'xml',
                    url:'songs.xml',
                    success : function (xml) {
                        $(xml).find('entry').each(function() {
                            songs.push({name: $(this).find('song').text(), mp3: $(this).find('mp3').text()});
                        });
                        callback(songs);
                    }
                });
            }

            getPlaylist(function(songs) {
                var playlistFromXML = jQuery.toJSON(songs);

                var mediaPlaylist = new Playlist('1', playlistFromXML, null);
                console.log(mediaPlaylist);
                // etc...
            });
        });
    </script>
</head><body></body></html>

归功于如何正确地从 jQuery ajax 成功函数返回数组？回答，因为我使用该方法从 jQuery 方法返回一个值$.ajax success。

您将不得不将var mediaPlaylist = new Playlist()构造函数重构为回调函数，因为您无法从回调中返回播放列表值（请参阅如何从我正在使用的 result() 回调函数中捕获返回值？）

希望这可以帮助 ：-）

于 2011-06-29T15:56:04.843 回答