我正在尝试让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"> </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"> </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>
答案 0 :(得分:0)
我弄明白了这个问题。 swf文件的路径错误。糟糕。