Question

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

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

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

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

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

修改

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

它仅适用于Webkit浏览器。： - ）
最初定义它不起作用，因为只要video.webkitDisplayingFullscreen事件触发，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);

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

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

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

1 个答案: