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

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

另一種方法是偵聽焦點是否從原生視頻播放器恢復到瀏覽器，但我不確定如何捕獲該視頻。

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

以上成功記錄到控制檯時，只要我在瀏覽器中按鍵。只要HTML5視頻進入全屏模式，瀏覽器顯然不能再將鍵碼記錄到控制檯。

我想要做的是在退出全屏模式後從一個用戶界面切換到另一個用戶界面。

編輯

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

來源

2012-06-22 natlee75

你試過聽鍵盤事件的窗口？ – potench

@potench - 是的。這沒有任何不同。 – natlee75

好吧，我想我已經爲你解決...我只是假設你使用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 
     } 
    } 
});

希望這有助於或點你在正確的方向

來源

2012-06-22 22:19:49 potench

感謝您的建議。當我回到我的桌子時，我會嘗試一下！ – natlee75

我接受了這個答案，雖然它不能立即使用。我編輯了你的文章以包含使用動畫幀來調用測試的最終工作代碼。你的建議明確指出了我的正確方向。非常感謝！ – natlee75

我把編輯移動到了你自己的問題上，因爲這是在SO上最合適的地方。 – Gerben

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

回答

相關問題