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

Question

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

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

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

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

我要做的是在退出全屏模式后从一个 UI 转换到另一个 UI。

编辑

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

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

我让这个工作 - 只在 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);

Answer 1

好的，我想我有一个适合你的解决方案......我只是假设你使用 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
       }
    }
});

希望这对您有所帮助或指出正确的方向