如何在全屏模式下观看HTML5视频时捕获键盘事件？ [英] How do I capture keyboard events while watching an HTML5 video in fullscreen mode?

问题描述

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

I need to know when the user presses the escape key when watching an HTML5 video in fullscreen mode. Unfortunately any configured listeners on the document don't apply since when the user is watching an HTML5 video in fullscreen mode the system focus is on the native video player rather than the browser.

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

An alternative is listening for when focus reverts back from the native video player to the browser, but I'm unsure as to how I would capture this.

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

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

The above successfully logs to the console when I press keys so long as I'm in the browser. As soon as an HTML5 video enters fullscreen mode, the browser obviously can no longer log key codes to the console.

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

What I'm trying to do is transition from one UI to another after exiting fullscreen mode.

编辑

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

Potench's answer was useful as a starting point which is why I accepted it as that answer despite the following caveats:

• 它只适用于Webkit浏览器。 ： - ）


• 最初定义它不起作用，因为 video.webkitDisplayingFullscreen 是 true 每当调整大小事件触发时。

• It only works in Webkit browsers. :-)
• As originally defined it does not work since video.webkitDisplayingFullscreen is true whenever the resize event fires.

我让这个工作 - 仅在Webkit浏览器上 - 通过点击动画帧来不断观察值的变化：

I got this to work - only on Webkit browsers - by tapping into animation frames to constantly watch for the change in value:

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来编写这段代码。

Ok I think I have a solution for you... I'm just going to assume you use jQuery for ease of writing this code.

我不相信你能在Fullscreen中捕获键盘事件模式...但你可以这样做以在你进入或退出全屏模式时得到通知。

I don't believe you'll be able to capture keyboard events while in Fullscreen mode... but you could do this to get notified when you enter or exit fullscreen mode.

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
       }
    }
});

希望这有助于或指向正确的方向

Hope this helps or points you in the right direction

这篇关于如何在全屏模式下观看HTML5视频时捕获键盘事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！