1

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

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

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

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

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

编辑

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

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

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

1 回答 1

1

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

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

于 2012-06-22T22:19:49.403 回答