在全屏模式下觀看 HTML5 視頻時如何捕獲鍵盤事件？

Question

我需要知道用戶在全屏模式下觀看 HTML5 視頻時何時按下退出鍵。 不幸的是，文檔上配置的任何監聽器都不適用，因為當用戶在全屏模式下觀看 HTML5 視頻時，系統的焦點是本地視頻播放器而不是瀏覽器。

另一種方法是監聽焦點何時從本機視頻播放器返回到瀏覽器，但我不確定我將如何捕獲它。

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

只要我在瀏覽器中，當我按下按鍵時，上面的內容就會成功登錄到控制台。 一旦 HTML5 視頻進入全屏模式，瀏覽器顯然無法再將關鍵代碼記錄到控制台。

我要做的是在退出全屏模式后從一個 UI 過渡到另一個 UI。

編輯

Potench 的回答作為一個起點很有用，這就是為什么盡管有以下警告，我還是接受了它作為那個答案：

• 它只適用於 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
       }
    }
});

希望這有助於或指向正確的方向