jquery - Jplayer 不会玩多个实例

Question

我试图让 jplayer 播放多个实例 - 现在只有一首歌。我还编写了一个简单的显示/隐藏脚本，它将显示歌曲的标题和歌曲的持续时间，然后当单击“播放”时，隐藏该 div 并显示播放器。

我的 show / hide fn 工作正常并显示播放器，但它没有播放列出的歌曲......有什么想法吗？

提前致谢！

我的 JS：

$(function() {

    var voc = $("#video-overlay-container").detach();
    $(voc).appendTo('body');

    $(".image-holder").click(function(e) {
        e.preventDefault();

        var id = $(this).attr("data");
        var ajaxURL = resourceURL.replace("_cmd_", "play");
        ajaxURL = ajaxURL.replace("_id_", id);
        $.get(ajaxURL);

        var url = $(this).find('a').attr("href");

        $('.song-holder-'+id).hide(); // Hide song title and total time.
        $('#jp-player-' + id).show(); // Show jPlayer.
        $('#jp-container-' + id).show();  // Show jPlayer controls.

        $("#song-"+id).jPlayer({
            ready: function (event) {
              $(this).jPlayer("setMedia", {
                m4a:"http://www.jplayer.org/audio/m4a/TSP-01-Cro_magnon_man.m4a",
                oga:"http://www.jplayer.org/audio/ogg/TSP-01-Cro_magnon_man.ogg"
              });
            },
            play: function() { // To avoid multiple jPlayers playing together.
                $(this).jPlayer("pauseOthers");
            },
            swfPath: "js",
            supplied: "m4a, oga",
            wmode: "window",
            smoothPlayBar: true,
            keyEnabled: true,
            size: {
              width:"510px"
            }
          });

    });

我的 HTML：

<div class="music-wrapper">
  <div class="music-header">
        <div class="spacer">&nbsp;</div>
        <div class="music-th-title">NAME</div>
        <div class="music-th-time">TIME</div>
        <div class="music-th-download">DOWNLOAD</div>
  </div>
<% for (Map.Entry<String, Map<String, String>> af : audioFiles.entrySet()) { 
     Map<String, String> info = af.getValue();
%>

  <div class="grey-border">&nbsp;</div>

  <div class="song-wrapper">

     <!-- player controls  -->
     <div class="song-holder-<%=info.get("id")%>">
       <div class="image-holder" data="<%=info.get("id")%>"><a href="<%=info.get("url")%>"></a></div>
       <div class="song-title"><%=info.get("title") %></div>
       <div class="song-time"><%=info.get("length") %></div>
     </div>

     <div id="song-<%=info.get("id")%>" class="jp-jplayer"></div>
      <div id="jp-player-<%=info.get("id") %>" class="jp-audio">
       <div id="jp-container-<%=info.get("id") %>" class="jp-audio">
        <div class="jp-type-single">
          <div class="jp-gui jp-interface"> 
               <!-- controls -->
                 <div class="jp-controls" id="control-<%=info.get("id")%>">
                    <ul class="jp-controls">
                      <li><a href="javascript:;" class="jp-play play" tabindex="1">play</a></li>
                      <li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
                    </ul>
                 </div>   
                 <!-- progress bar -->
                 <div class="jp-progress" id="progress-<%=info.get("id")%>">
                   <div class="jp-seek-bar">
                    <div class="jp-play-bar"></div>
                   </div> 
                 </div>
                 <!-- timer -->
                 <div class="jp-time-holder" id="time-<%=info.get("id")%>">
                    <div class="jp-current-time"></div>
                 </div>
             </div>
           </div>  
        </div>     
     </div>

Answer 1

I figured out the problem. The path to the swf file was wrong. oops.