如何使用播放列表加载项从JSON或XML URL生成动态Jplayer播放列表

时间:2014-12-18 18:53:44

标签: xml json dynamic jplayer playlist

如何从JSON或XML或文件夹网址生成动态Jplayer播放列表,并将该播放列表与新的Jplayer Playlist Add-on一起使用?

Jplayer团队提到您可以执行此操作(http://jplayer.org/latest/demo-02-jPlayerPlaylist/),但尚未显示有关如何生成动态播放列表以及如何将该播放列表链接到新播放列表插件的示例。有人请展示一个生成动态播放列表的方法的工作示例,并将新的播放列表链接到新的Jplayer播放列表吗?

2 个答案:

答案 0 :(得分:1)

<script>
 $(document).ready(function(){
 var cssSelector = {
    jPlayer: ".jquery_jplayer_1", 
    cssSelectorAncestor: "#jp_container_1"
};
var playlist = []; // Empty playlist
var options = {
    swfPath: "../newjs/jplayer", 
    supplied: "mp3"
};
var myPlaylist = new jPlayerPlaylist(cssSelector, playlist, options);
$.getJSON("<?php print base_path() ?>/album-json",function(data){  // get the JSON array produced by my PHP
    $.each(data,function(index,value){

       myPlaylist.add({title:$(this).attr("title"),mp3:$(this).attr("mp3")}); // add each element in data in myPlaylist

    })

});
 });
</script>

答案 1 :(得分:0)

您可以使用以下代码作为起点:

$(document).ready(function(){
   var cssSelector = { jPlayer: "#jquery_jplayer_1", cssSelectorAncestor: "#jp_container_1" };
   var options = { swfPath: "../js", supplied: "ogg, mp3" };
   var myPlaylist = new jPlayerPlaylist(cssSelector, [], options);

   $.get("xml_audio.php", {}, function (xml){
      $('Track', xml).each(function (i){
         var title = $(this).attr('title');
         var track_name = $(this).attr('track_name');

         myPlaylist.add({ 
            'title': title, 
            'mp3': 'audio/' + track_name + '.mp3', 
            'ogg': 'audio/' + track_name + '.ogg' 
         });
      });
   });
});

或者,请查看jPlayer Jukebox add-on。它基于jPlayer Playlist add-on,但增加了额外的功能,例如扫描页面以查找媒体链接并使其可播放的功能。它现在支持XSPF格式的播放列表。

jPlayer Jukebox add-on