Question

我正在寻找一种方法来将默认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>

非常感谢任何有关如何实现这一目标的见解。谢谢！

Answer 1

这听起来像你只想移动播放列表元素：

<div id="jp_playlist_1" class="jp-playlist">
     <ul>
     </ul>
 </div>

在而不破坏它的功能。要做到这一点，您只需在jplayer.playlist.js中编辑选择器定义即可。在第58行中，您可以看到播放列表选择器被定义为

this.cssSelector.playlist = this.cssSelector.cssSelectorAncestor + " .jp-playlist";

强制它成为主“cssSelector”的子元素。如果您的网站上只有一个播放器，则只需将其更改为

即可

this.cssSelector.playlist = " .jp-playlist";

我没试过，但它应该有效！

将JPlayer的播放列表与播放器分开以启用移动滚动

1 个答案: