Question

我在一个页面上有3个jPlayer实例。默认情况下，只有播放和停止按钮可见。单击播放时，播放器的其余部分将使用jQuery UI滑出。

我首先要说的是我在jsfiddle上取得了进展：http://jsfiddle.net/adbakke/ooLj5h6j/

我想要发生的是当你点击播放时，它会打开播放器控件（播放/停止除外），当你暂停，停止或跟踪结束时它会折叠播放器控件（除了播放/停止））。

其他玩家在玩一个玩家时暂停，当发生这种情况时，我希望与其他玩家相关联的UI元素崩溃，就像按下暂停/停止按钮一样。

我在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>

编辑：这是我的完整初始化（之前只是来自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

而且，你可以为{{1}}案例做同样的事情。

以下是Demo Fiddle

我可以在暂停事件中隐藏jPlayer元素而不是在这个多实例播放器中的click事件上隐藏吗？如果是这样，怎么样？

1 个答案: