如何在观看Youtube视频时检测Esc键是否被按下？

Question

一个奇怪的问题，但是我会尽力解答。我有一个页面，在该页面上以大尺寸显示照片，就像灯箱一样。当按下ESC键时，关闭页面并将用户返回到他来自的页面，在该页面上以正常格式显示照片：

$(document).keyup(function(e) {
 if (e.keyCode == 27) {
    var closeURL = $('.close').attr('href');
        window.location = closeURL;
 }
});

然而，在同一灯箱页面上，还有可能包含嵌入的Youtube视频的侧面板。用户可以使用Youtube播放器的标准视频控件将该视频放大到全屏。如果用户在这种情况下按ESC键，则会关闭全屏视频并返回到灯箱页面（标准嵌入式播放器行为，这也是我想要的），但是，ESC键事件同时触发了我的keyup代码，关闭了灯箱，在这种特定情况下是不可取的。

我发现在Chrome中存在这种问题，但在Firefox中不存在。本质上我希望当用户按ESC键关闭Youtube播放器时，我的ESC代码不会被触发，但当用户观看照片（而不是视频）时，只有在用户按ESC键时才会触发。

我一直在研究event.target以区分这些情况，但尚未找到解决办法。有什么想法吗？

更新：目前我将接受这个仅限于Chrome的bug。不过还是愿意听取解决方案的建议。

- Fer

---

你能发布一下包含YouTube播放器的面板的HTML吗？ - John Hartsock

这是一个奇怪的问题，因为Chrome似乎在按键时表现得非常奇怪。 - John Hartsock

@JohnHartsock 我也是这么想的 :) 我根本没想到ESC键会触发我的事件，因为我以为它发生在iframe中。现在我很困惑正确的行为应该是什么，我只知道我不希望事件从Youtube冒泡到我的页面。 - Fer

Answer 1

也许这样做可以起作用：

$(document).not("iframe").keyup(...

- GregM

---

谢谢您的参与。我已经尝试了，但是使用那段代码似乎不再触发任何东西。 - Fer

Answer 2

我不相信这是可能的。Flash播放器在聚焦时捕获输入 - 例如，如果您单击YouTube视频中的播放按钮，然后按Ctrl-W关闭选项卡，除非您单击视频外的页面以将焦点返回到浏览器，否则它不会关闭。

当Flash播放器聚焦时，输入控制实际上被传递给另一个进程，因此您无法捕获或处理输入，直到用户明确将控制权返回给浏览器。

- Chris Heald

---

谢谢，我认为这解释得很清楚了，尽管不同的浏览器处理方式不同，有点遗憾。 - Fer

Answer 3

刚刚偶然发现这个问题..我知道这有点老了，但是有一个可能的解决方案（需要更多的工作）...

您可以将YouTube播放器包装在自己的Flash播放器中（使用API或仅使用容器），并在Flash中检测按键。 然后，您可以直接从Flash应用程序调用相同的JavaScript函数，因此无论您的页面还是Flash应用程序具有焦点，您要运行的脚本始终都会运行。

- rmorse

Answer 4

您可以通过检测视频的播放状态，然后将焦点设置回窗口来实现此操作。

Youtube API的Flash播放器现已过时 - 因此您应该使用IFrame API。

您可以使用onStateChange事件来检测1（正在播放）状态，然后只需调用：

`$(window).focus()`    (jQuery syntax)

这样就可以使用 keyup 事件了。确保在focus()调用中使用window而不是document。

这是文档中的事件部分。

https://developers.google.com/youtube/iframe_api_reference#Events

- Simon_Weaver