【问题标题】:How do I stop all other Plyr instances except this one我如何停止除此之外的所有其他 Plyr 实例
【发布时间】:2022-12-17 20:52:27
【问题描述】:

我设置了这个小 javascript 来初始化我网页上的几个播放器,并添加一个事件来让只有一个播放器处于活动状态,而其他所有播放器都暂停。这应该模拟“autpoause”功能,出于某种原因,该功能仅适用于 Vimeo 视频,但不适用于 Youtube 视频:

    const players = Plyr.setup(".myplayer", { fullscreen: { enabled: false }, autopause: true });


    $('players').each(function(index, players) {

        players[index].on('play', function(index, players, event) {

          players.not(this).each(function(index, players) {

            players[index].pause();

          });

        });

    });

不知何故,什么都没有发生。 .not(this) 应该选择除我在其上声明事件侦听器的实例之外的所有其他实例。但是当我尝试时,没有任何暂停。所有其他玩家继续玩。

我究竟做错了什么?任何提示表示赞赏。

【问题讨论】:

  • console.log($('players').length) 给你什么?看起来应该是$(".players")
  • 你能说出你为 Plyr.setup 使用了什么库吗,因为它似乎与 plyr 标签无关。
  • 我认为是最新修订版。 openbase.com/js/plyr
  • console.log 不输出任何内容。不知道为什么。但总的来说,球员们工作,我可以开始/停止他们。只是为了让我刚刚单击的一个玩家处于活动状态而停止其他一切是不可能的。
  • 你在哪里添加 console.log?页面加载后,只需将其放入控制台即可。理想情况下,添加它你的 $('players').each 行,不在每个/回调中。

标签: javascript jquery each plyr


【解决方案1】:
/*
<video controls crossorigin playsinline preload="false" class="player">
   <source src="VIDEO_PATH" type="video/mp4" />
</video>
*/

// Init plyr
const players = Array.from(document.querySelectorAll('.player')).map(p => new Plyr(p));

//Handle play/pause event
for (let index = 0; index < players.length; index++) {
    players[index].on('play', function() {
       console.log('Play')
       for (let index2 = 0; index2 < players.length; index2++) {
          if (index != index2) {
             players[index2].pause(); // Pause other plyr instances
          } 
       }
    })
}

【讨论】:

    猜你喜欢
    • 2020-07-06
    • 1970-01-01
    • 2014-03-20
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2022-08-11
    相关资源
    最近更新 更多