react-player嵌入YouTube播放器吞按键事件如何解决

我使用react-player播放YouTube视频，通过react-hotkeys-hook定义了大量自定义快捷键，一开始配了下面的参数想禁用YouTube自带的按键处理逻辑：

const PLAYER_CONFIG: Config = {
  youtube: {
    playerVars: { controls: 0, disablekb: 1, rel: 0 },
  },
}

实际测试不管disablekb设1还是0，只要YouTube播放器拿到焦点，所有keypress事件都会被吞，自定义快捷键完全不触发。react-player仓库2022年就有人提过一模一样的问题，最后issue关了也没给解决方案。想知道有没有办法让嵌入的YouTube播放器把按键事件抛出来？

补充：已经试过的方案 #

我试过通过react-player的onReady回调拿内部的iframe元素：

<ReactPlayer
    onReady={(player) => {
        console.log(player.getInternalPlayer()['getIframe']())
    }}
    // ...其余配置

想直接给iframe的contentWindow绑键盘事件，直接报跨域安全错误：

Uncaught DOMException: Blocked a frame with origin "http://localhost:3000" from accessing a cross-origin frame.

相关猜想 #

我怀疑YouTube iFrame API本身就不支持事件转发，之前查到过同类问题：播放YouTube视频时如何给iFrame绑定keydown事件？

浏览器跨域安全规则是硬限制，YouTube没给父页面开放监听iframe内部键盘事件的权限，disablekb:1只能关YouTube自己的快捷键响应，不会让iframe把焦点下的按键事件吐出来，也没有官方配置能开事件转发，实际能用的解决办法有三个：

• 从根源不让iframe拿到焦点：给YouTube的iframe元素加tabindex="-1"属性，iframe上面盖一层全透明的遮罩层，所有点击、交互操作先落在遮罩上，不会触发iframe聚焦。需要响应播放/暂停、拖进度、调音量这类操作的话，直接在遮罩层绑定事件，拿到操作后调用YouTube Iframe API提供的方法手动控制播放器就行。这种方案下焦点永远留在父页面，自定义快捷键100%能触发。
  遮罩样式参考：

  .player-intercept-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: 99;
  }
  

  比如点击遮罩的时候，判断当前播放器状态，调用playVideo()或者pauseVideo()就能还原原生点击播放/暂停的体验，其他控件逻辑同理。
• 焦点被抢了立刻切回来：如果不想自己写控件逻辑，就全局监听focusin事件，一旦检测到焦点跑到YouTube的iframe上，立刻把焦点切回你绑定快捷键的页面根节点。这个方案写起来几行代码，成本极低，缺点是点击播放器内置控件的瞬间可能会吞一次按键，对快捷键响应速度要求没那么苛刻的场景够用。
  代码参考：

  document.addEventListener('focusin', (e) => {
    const el = e.target
    if (el.tagName === 'IFRAME' && el.src.includes('youtube.com/embed')) {
      // 替换成你自己挂载快捷键的容器元素
      document.querySelector('#app-container')?.focus()
    }
  })
  

• 不用官方iframe播放器：如果快捷键是核心需求，不想做兼容，可以换用基于yt-dlp等工具封装的前端播放方案，直接解析YouTube的音视频流地址，用原生<video>标签播放，所有事件都在当前域下，想怎么绑快捷键就怎么绑。缺点是需要自己处理流地址解析、签名反爬的逻辑，维护成本高。

别再试直接给iframe.contentWindow绑事件的方案了，跨域限制是浏览器层面的，YouTube不放开对应权限的话永远不可能成功。

内容的提问来源于stack exchange，提问作者will-hart