分离JPlayer's播放列表从播放器启用滚动移动

Separate JPlayer's Playlist From The Player To Enable Scrolling For Mobile

本文关键字：播放器 启用 滚动 移动 播放列表 JPlayer 分离      更新时间：2023-09-26

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

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

相关文章：