Могу ли я скрыть элементы jPlayer на событии паузы, а не на событии click в этом проигрывателе с несколькими экземплярами? Если да, то как?

Question

У меня есть 3 экземпляра jPlayer на одной странице. По умолчанию видны только кнопки воспроизведения и остановки. Когда вы нажимаете кнопку воспроизведения, остальная часть проигрывателя проигрывается с использованием jQuery UI.

Я просто начать с того, у меня есть прогресс на jsfiddle доступен здесь: http://jsfiddle.net/adbakke/ooLj5h6j/

То, что я хочу, чтобы произошло это, когда вы нажимаете на игру, он открывает для управления плеером (кроме воспроизведения/остановки), и когда вы останавливаетесь, останавливаетесь или заканчиваете трек, он сворачивает элементы управления проигрывателя (кроме воспроизведения/остановки).

Остальные игроки останавливаются при воспроизведении, и когда это происходит, я хочу, чтобы элементы пользовательского интерфейса, связанные с этими другими игроками, рушались, как если бы нажали кнопки паузы/остановки.

Одна вещь, которую я попробовал в своем примере в JSFiddle, заключается в том, чтобы функция init для первого игрока также спрятала элементы другого и конкретного игрока, но это создает проблемы, когда кто-то нажимает несколько раз на кнопку воспроизведения или нажимает на них быстро и т. д.

Как я могу изменить это, чтобы скрыть элементы от каждого игрока, когда этот игрок останавливается или останавливается, независимо от того, была ли она приостановлена ​​из-за нажатия на паузу или была вызвана функция «pauseOthers» другого игрока?

Вот некоторый код ссылка, а также проверить выше связанный JSFiddle:

В jPlayer HTML У меня есть выглядят следующим образом:

<!-- jPlayer Start --> 
    <div id="jquery_jplayer_1" class="jp-jplayer"></div> 
    <div id="jp_container_1" class="jp-audio" role="application" aria-label="media player"> 
    <div class="jp-type-single"> 
     <div class="jp-gui jp-interface"> 
     <div class="jp-controls"> 
      <button class="jp-play" role="button" tabindex="0">play</button> 
      <button class="jp-stop" role="button" tabindex="0">stop</button> 
     </div> 
     <div class="jp-progress hideme"> 
      <div class="jp-seek-bar"> 
      <div class="jp-play-bar"></div> 
      </div> 
     </div> 
     <div class="jp-volume-controls hideme"> 
      <button class="jp-mute" role="button" tabindex="0">mute</button> 
      <button class="jp-volume-max" role="button" tabindex="0">max volume</button> 
      <div class="jp-volume-bar"> 
      <div class="jp-volume-bar-value"></div> 
      </div> 
     </div> 
     <div class="jp-time-holder hideme"> 
      <div class="jp-current-time" role="timer" aria-label="time">&nbsp;</div> 
      <div class="jp-duration" role="timer" aria-label="duration">&nbsp;</div> 
     </div> 
     </div> 
    </div> 
    </div> 
    <!-- End Player 1 --> 

Этот скрипт работает в нижней части страницы, и скрывает наш игрок элементы что не играть или остановить кнопки, а затем использует функцию щелчка, чтобы показать игроку и другие элементы при нажатии кнопки воспроизведения, и скрыть их при нажатии кнопки стоп:

<script> 
    $(document).ready(function() { 
     $('.hideme').hide(); 
     $('.jp-play').click(
     function() { 
     $(this).parent().parent('.jp-interface').toggleClass('showme' , 1000, 'easeInOutExpo'); 
     $(this).parent().siblings('.hideme').toggle('slide', 'easeInOutExpo', 1000); 
     }); 
     $('.jp-stop').click(function() { 
     $(this).closest('.jp-interface').removeClass('showme', 1000, 'easeInOutExpo'); 
     $(this).parent().siblings('.hideme').hide('slide', 'easeInOutExpo', 1000); 
     }); 
    }); 
    </script> 

Edit: Вот мой полный INIT (до этого был только отрывок из INIT):

$(document).ready(function(){ 
    $("#jquery_jplayer_1").jPlayer({ 
    ready: function() { 
     $(this).jPlayer("setMedia", { 
     title: "Stirring of a fool", 
     mp3: "http://mindevo.com/geewhiz/audio/comps-mixes/Gee-Whiz_-_Funky-Little-Party.mp3", 
     m4a: "http://www.jplayer.org/audio/m4a/Miaow-08-Stirring-of-a-fool.m4a", 
     oga: "http://www.jplayer.org/audio/ogg/Miaow-08-Stirring-of-a-fool.ogg" 
     }); 
    }, 
    play: function() { 
     $(".jp-jplayer").not(this).jPlayer("stop"); 
     $('#jp_container_2 .jp-interface').removeClass('showme', 1000, 'easeInOutExpo'); 
    }, 
     swfPath: "../../js", 
    supplied: "mp3,m4a, oga", 
    wmode: "window", 
    globalVolume: true, 
    useStateClassSkin: true, 
    autoBlur: false, 
    smoothPlayBar: true, 
    keyEnabled: true, 
    ended: function(event) { 
     $('.jp-interface').removeClass('showme', 1000, 'easeInOutExpo'); 
     $('.hideme').hide('slide', 'easeInOutExpo', 1000); 
    } 
    }); 

    $("#jquery_jplayer_2").jPlayer({ 
    ready: function() { 
     $(this).jPlayer("setMedia", { 
     title: "Hidden", 
     mp3: "http://mindevo.com/geewhiz/audio/comps-mixes/DJ-Biscuit-&-Doc-Brown---New-Magic-In-A-Dusty-World.mp3", 
     m4a: "http://www.jplayer.org/audio/m4a/Miaow-02-Hidden.m4a", 
     oga: "http://www.jplayer.org/audio/ogg/Miaow-02-Hidden.ogg" 
     }); 
    }, 
    play: function() { // To avoid multiple jPlayers playing together. 
     $(this).jPlayer("pauseOthers"); 
    }, 
    swfPath: "../../js", 
    supplied: "mp3,m4a, oga", 
    cssSelectorAncestor: "#jp_container_2", 
    wmode: "window", 
    globalVolume: true, 
    useStateClassSkin: true, 
    autoBlur: false, 
    smoothPlayBar: true, 
    keyEnabled: true, 
    ended: function(event) { 
     $('.jp-interface').removeClass('showme', 1000, 'easeInOutExpo'); 
     $('.hideme').hide('slide', 'easeInOutExpo', 1000); 
    } 
    }); 

    $("#jquery_jplayer_3").jPlayer({ 
    ready: function() { 
     $(this).jPlayer("setMedia", { 
     title: "Bubble", 
     mp3: "http://mindevo.com/geewhiz/audio/comps-mixes/Gee-Whiz---Jazz.mp3", 
     m4a: "http://www.jplayer.org/audio/m4a/Miaow-07-Bubble.m4a", 
     oga: "http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg" 
     }); 
    }, 
    play: function() { // To avoid multiple jPlayers playing together. 
     $(this).jPlayer("pauseOthers"); 
    }, 
    swfPath: "../../js", 
    supplied: "mp3,m4a, oga", 
    cssSelectorAncestor: "#jp_container_3", 
    wmode: "window", 
    globalVolume: true, 
    useStateClassSkin: true, 
    autoBlur: false, 
    smoothPlayBar: true, 
    keyEnabled: true, 
    ended: function(event) { 
     $('.jp-interface').removeClass('showme', 1000, 'easeInOutExpo'); 
     $('.hideme').hide('slide', 'easeInOutExpo', 1000); 
    } 
    }); 
}); 

Answer 1

Вы можете обрабатывать этот случай на click случае кнопки jp-play.

Итак, я сделал это, используя следующие шаги,

• траверс все jp-audio кроме текущего один
• Проверьте, если отдельный игрок находится в игре состояние или не проверяя jp-state-playing класс
• Если да, то переведите его в другое состояние

Таким образом, код выглядит следующим образом:

$('.jp-play').click(
    function() { 
     $(".jp-audio").not($(this).closest(".jp-audio")).each(function() { 
      if($(this).hasClass("jp-state-playing")){ 
      $(this).find('.jp-interface').toggleClass('showme', 1000, 'easeInOutExpo'); 
      $(this).find('.hideme').toggle('slide', 'easeInOutExpo', 1000); 
      } 
     }); 
     $(this).parent().parent('.jp-interface').toggleClass('showme', 1000, 'easeInOutExpo'); 
     $(this).parent().siblings('.hideme').toggle('slide', 'easeInOutExpo', 1000); 
    }); 

И, вы можете сделать то же самое для stop кейс.

Вот Demo Fiddle

не