将键盘焦点设置为YouTube嵌入

Question

我正在尝试找到一种方法来使键盘专注于页面中的YouTube播放器。例如，这可以使使用空格键轻松播放/暂停视频变得容易。

这是一个示例：测试嵌入式键盘焦点（CodePen）

实际上，我必须单击播放器才能接受键盘快捷键。由于这并不理想，因此我希望找到一种使用Javascript或jQuery来解决视频问题的方法。

我知道（作为一种选择）我可以使用空格键来调用播放器对象playVideo或pauseVideo方法，但这仍然无法使我访问YouTube播放器键盘控件的完整列表。

如果这根本不可能，我会理解的。但是很高兴知道。谢谢！

Answer 1

为了实现这一点，您必须将focus()文档嵌入 Youtube 的iframe. 出于安全原因，这受到同源策略的限制。

为了完整性，这是一段代码

function onPlayerReady(event) {
    document.querySelector('#player').contentDocument.body.focus(); 
}

它会抛出

未捕获的安全错误：无法从“HTMLIFrameElement”读取“contentDocument”属性：