Question

我正试图找到一种方法让键盘专注于我页面中的YouTube播放器。例如，这可以使空格键轻松播放/暂停视频。

以下是一个示例：Testing Embed Keyboard Focus (CodePen)

实际上，我必须点击播放器才能接受键盘快捷键。因为这不是理想的，我希望使用Javascript或jQuery的解决方法来关注视频。

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

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

Answer 1

为了实现这一目标，您必须在Youtube的focus()中嵌入iframe文档。出于安全原因，这受到Same-origin policy的限制。

这是完整性的一段代码

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

它会扔掉

Uncaught SecurityError：无法读取'contentDocument'属性来自'HTMLIFrameElement'：

Answer 2

你可以做这样的事情，无论如何都要实现你想为玩家启用的热键。

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

基本上你创建了一个输入（可以将它设置为混合，你可以显示：none，因为它不会让你分配焦点），然后将一个按键事件附加到该输入。然后你可以在＆＃34;播放器上调用功能＆＃34; 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 =＆＃34;按钮＆＃34;）添加到id =＆＃34; dummyFocus＆＃34;

的页面

根据需要进行修改，但无论如何都是 a 解决方法。

将键盘焦点设置为YouTube嵌入

2 个答案: