在全屏模式下观看 HTML5 视频时如何捕获键盘事件？

我需要知道用户在全屏模式下观看 HTML5 视频时何时按下退出键。不幸的是，文档上配置的任何侦听器都不适用，因为当用户以全屏模式观看 HTML5 视频时，系统焦点位于本机视频播放器而不是浏览器上。

另一种方法是监听焦点何时从本机视频播放器恢复到浏览器，但我不确定如何捕获它。

document.addEventListener('keydown', function (e) { console.log(e.keyCode); }, false);

只要我在浏览器中，当我按键时，上面的内容就会成功登录到控制台。一旦 HTML5 视频进入全屏模式，浏览器显然就无法再将关键代码记录到控制台。

我想做的是退出全屏模式后从一个用户界面转换到另一个用户界面。

EDIT

Potench 的答案作为一个有用的起点，这就是为什么我接受它作为答案，尽管有以下警告：

• 它仅适用于 Webkit 浏览器。 :-)
• 正如最初定义的那样，它不起作用，因为video.webkitDisplayingFullscreen is true每当resize事件发生。

我通过利用动画帧来不断观察值的变化，使其发挥作用（仅在 Webkit 浏览器上）：

var onFrame, isVideoFullscreen;

onFrame = window.requestAnimationFrame ||
          window.mozRequestAnimationFrame ||
          window.webkitRequestAnimationFrame ||
          window.oRequestAnimationFrame ||
          window.msRequestAnimationFrame ||
          function (fn) {
              setTimeout(fn, 1000 / 60);
          };

isVideoFullscreen = false;

function frame() {
    if (!isVideoFullscreen && video.webkitDisplayingFullscreen) {
        // entered fullscreen mode
        isVideoFullscreen = true;
    } else if (isVideoFullscreen && !video.webkitDisplayingFullscreen) {
        // exited fullscreen mode
        isVideoFullscreen = false;
    }
    onFrame(frame);
}
onFrame(frame);

好吧，我想我有一个适合您的解决方案...我只是假设您使用 jQuery 来轻松编写此代码。

我不相信您能够在全屏模式下捕获键盘事件...但您可以这样做以便在进入或退出全屏模式时收到通知。

var isVideoFullscreen = video.webkitDisplayingFullscreen;

$(window).bind("resize", function (e) {
    // check to see if your browser has exited fullscreen
    if (isVideoFullscreen != video.webkitDisplayingFullscreen) { // video fullscreen mode has changed
       isVideoFullscreen =  video.webkitDisplayingFullscreen;

       if (isVideoFullscreen) {
            // you have just ENTERED full screen video
       } else {
            // you have just EXITED full screen video
       }
    }
});

希望这可以帮助您或为您指明正确的方向