将键盘焦点设置为YouTube嵌入 [英] Setting Keyboard Focus to YouTube Embed

问题描述

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

I’m trying to find a way to get the keyboard to focus on the YouTube player in my page. This could, for example, make it easy to use the space bar to play/pause the video.

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

实际上，我不得不点击播放器，它就可以接受键盘快捷键。因为这不是理想的，我希望使用Javascript或jQuery来解决视频问题。

As it is, I’m having to click on the player for it to be able to accept keyboard shortcuts. Because this is not ideal, I’m hoping for a workaround using Javascript or jQuery to set the focus on the video.

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

I’m aware that – as an alternative – I could use the spacebar key to call the player object's playVideo or pauseVideo methods, but that still wouldn’t get me access to the full list of the YouTube player’s keyboard controls.

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

And if this is simply impossible, I’ll understand. But it will be nice to know. Thanks!

推荐答案

为了达到这个目的，你必须 focus（）嵌入在Youtube的 iframe 中的文档。出于安全原因，这受到同源政策的限制。

In order to achieve this you would have to focus() document embedded in the Youtube's iframe. This is restricted by Same-origin policy for security reasons.

这是完整性的一段代码

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

它会抛出

Uncaught SecurityError：无法从'HTMLIFrameElement'中读取'contentDocument'属性
：

Uncaught SecurityError: Failed to read the 'contentDocument' property from 'HTMLIFrameElement':

这篇关于将键盘焦点设置为YouTube嵌入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！