Отдельный плейлист плеера от игрока для включения прокрутки для мобильного телефона

Question

Я ищу способ разделить плейлист (# jp_container_1) в музыкальном проигрывателе jQuery Jplayer по умолчанию из фактической части проигрывателя (# jquery_jplayer_1) вверху. Моя цель - включить iScroll для работы в плейлисте.

Вот демонстрация проекта, над которым я работаю, где вы можете увидеть плеер и два плейлиста на вкладке аудио. http://sharethewub.com/mobile/ Я хотел бы интегрировать плейлист jplayer по умолчанию в список воспроизведения iScroll, который я перечислил под jplayer.

Я попытался создать 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> 

за пределами # jquery_jplayer_1 контейнера, не нарушая его функциональности. Для этого вы можете просто изменить определение селектора в jplayer.playlist.js. В линии 58 вы можете увидеть, селектор воспроизведения определяется как

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

, которая заставляет его быть ребенком основного «CSSSelector». Если у вас есть только один игрок на вашем сайте, вы можете просто изменить его на

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

Я не пробовал, но он должен работать!