1

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

任何有关如何实现此目的的见解将不胜感激。谢谢！

4

1 回答 1

1

这听起来就像您只想能够移动播放列表元素：

<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";

我还没有尝试过，但它应该可以工作！

于 2013-08-30T14:22:50.900 回答