将键盘焦点设置为 YouTube 嵌入

我正在尝试找到一种方法让键盘聚焦在页面中的 YouTube 播放器上。例如，这可以方便地使用空格键来播放/暂停视频。

这是一个例子：测试嵌入键盘焦点 (CodePen) http://codepen.io/jifarris/pen/qOGoVG

事实上，我必须单击播放器才能接受键盘快捷键。因为这并不理想，我希望找到一种使用 Javascript 或 jQuery 的解决方法来将焦点设置在视频上。

我知道 - 作为替代方案 - 我可以使用空格键来调用玩家对象的playVideo or pauseVideo方法，但这仍然无法让我访问 YouTube 播放器键盘控件的完整列表。

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

您可以执行类似的操作来实现您想要为播放器启用的任何热键。

http://codepen.io/anon/pen/jbgeYo http://codepen.io/anon/pen/jbgeYo

基本上，您创建一个输入（可以对其进行样式设置以使其融入其中，您不能执行 display:none 因为这不会让您分配焦点），然后将按键事件附加到该输入。然后，您可以调用“播放器”API 对象上的函数，该对象允许您播放/暂停等。

var dummy=document.getElementById("dummyFocus");
dummy.focus();
dummy.addEventListener("keypress",function(event){
  if(event.keyCode== 32){
    if(player.getPlayerState() == 1){
      player.pauseVideo();
    }
    else{
      player.playVideo();
    }
  }
});

在创建玩家对象后插入它，并将输入（我使用 type="button"）添加到 id="dummyFocus" 的页面

根据需要进行编辑，但那就是a无论如何解决办法。