Plyr.js绑定的播放暂停事件在多个video元素上无法触发问题求助

问题根因 #

• 你通过map生成的players是普通JS数组，没有Plyr实例的on事件监听方法，多实例下事件绑定直接失效，单实例场景属于偶现符合预期的特殊情况。
• 事件回调中全局选择.video-container、直接调用players.fullscreen，只会匹配操作页面第一个视频容器/实例，无法对应到当前触发事件的播放器。
• 页面存在重复id="player"的DOM，不符合HTML规范。

修复后的代码 #

JS 代码 #

const players = Array.from(document.querySelectorAll('.js-player')).map(p => {
  // 逐个初始化Plyr实例
  const player = new Plyr(p, {
    clickToPlay: true,
  })
  // 给每个实例单独绑定事件
  player.on('play', function() {
    console.log('Play')
    // 调用当前实例的全屏方法
    player.fullscreen.enter();
    // 找到当前播放器对应的父容器修改类名
    p.closest('.video-container').classList.remove('mini-canvas')
  })
  player.on('pause', function() {
    console.log('Pause')
    player.fullscreen.exit();
    p.closest('.video-container').classList.add('mini-canvas')
  })
  return player
})

HTML 优化建议 #

删除重复的id="player"属性，或改为player1、player2这类唯一值即可。

内容的提问来源于stack exchange，提问作者Owaiz Yusufi