Como faço para capturar eventos de teclado enquanto assisto a um vídeo em HTML5 no modo de tela cheia?
Preciso saber quando o usuário pressiona a tecla de escape quando assiste a um vídeo em HTML5 no modo de tela cheia. Infelizmente, quaisquer ouvintes configurados no documento não se aplicam desde quando o usuário está assistindo a um vídeo em HTML5 no modo de tela cheia, o foco do sistema é no player de vídeo nativo em vez do navegador.
Uma alternativa é ouvir quando o foco é revertido do player de vídeo nativo para o navegador, mas não sei ao certo como capturar isso.
document.addEventListener('keydown', function (e) { console.log(e.keyCode); }, false);
O acima com sucesso registra no console quando eu pressiono as teclas enquanto estiver no navegador. Assim que um vídeo HTML5 entra no modo de tela cheia, o navegador obviamente não pode mais registrar os códigos de chave no console.
O que estou tentando fazer é a transição de uma interface do usuário para outra depois de sair do modo de tela cheia.
EDITAR
A resposta de Potench foi útil como ponto de partida, razão pela qual aceitei essa resposta apesar das seguintes advertências:
Só funciona em navegadores Webkit. :-)Como originalmente definido, não funcionavideo.webkitDisplayingFullscreen
étrue
sempre que oresize
incêndios de eventos.Eu tenho isso para trabalhar - apenas em navegadores Webkit - tocando em quadros de animação para observar constantemente a mudança no valor:
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);