我正在寻找一种方法,将默认jQuery Jplayer音乐播放器中的播放列表(#jp_container_1)与顶部的实际播放器部分(#jQuery_Jplayer_1)分离。我的目标是使iScroll能够在播放列表中工作。
这是我正在进行的项目的演示,你可以在音频选项卡上看到播放器和两个播放列表。http://sharethewub.com/mobile/我想将默认的jplayer播放列表集成到我在jplayer下面列出的iScroll播放列表中。
我试图为这个项目设置一个jsfiddle,但在让选项卡在那里工作时遇到了问题。
<div id="audio" style="position:absolute;top:9999px;overflow:hidden">
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio">
<div class="jp-type-single">
<div id="jp_interface_1" class="jp-interface">
<ul class="jp-controls">
<li><a href="#" class="jp-play" tabindex="1">play</a></li>
<li><a href="#" class="jp-pause" tabindex="1">pause</a></li>
<li><a href="#" class="jp-stop" tabindex="1">stop</a></li>
<li><a href="#" class="jp-mute" tabindex="1">mute</a></li>
<li><a href="#" class="jp-unmute" tabindex="1">unmute</a></li>
</ul>
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
<div class="jp-volume-bar">
<div class="jp-volume-bar-value"></div>
</div>
<div class="jp-current-time"></div>
<div class="jp-duration"></div>
</div>
<div id="jp_playlist_1" class="jp-playlist">
<ul>
</ul>
</div>
</div>
</div>
</div>
如能深入了解如何做到这一点,我们将不胜感激。谢谢
这听起来像是你只想移动播放列表元素:
<div id="jp_playlist_1" class="jp-playlist">
<ul>
</ul>
</div>
在#jquery_jplayer_1容器之外,而不会破坏它的功能。要做到这一点,您只需在jplayer.playlist.js中编辑选择器定义。在第58行中,您可以看到播放列表选择器被定义为
this.cssSelector.playlist = this.cssSelector.cssSelectorAncestor + " .jp-playlist";
这迫使它成为您的主要"cssSelector"的子代。如果你的网站上只有一个玩家,你可以简单地将其更改为
this.cssSelector.playlist = " .jp-playlist";
我还没有试过,但它应该有效!