javascript - 将键盘焦点设置为 YouTube 嵌入

Question

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

这是一个例子:Testing Embed Keyboard Focus (CodePen)

事实上，我必须点击播放器才能接受键盘快捷键。因为这并不理想，所以我希望使用 Javascript 或 jQuery 将焦点设置在视频上。

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

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

Answer 1

您可以执行类似这样的操作来以任何速率为播放器启用任何热键。

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"的页面

根据需要进行编辑，但这无论如何都是解决方法。