Как захватить события клавиатуры во время просмотра видео HTML5 в полноэкранном режиме?
Мне нужно знать, когда пользователь нажимает клавишу выхода при просмотре видео HTML5 в полноэкранном режиме. К сожалению, любые настроенные прослушиватели в документе не применяются, поскольку, когда пользователь просматривает видео HTML5 в полноэкранном режиме, система фокусируется на собственном видеопроигрывателе, а не на браузере.
Альтернативой является прослушивание, когда фокус возвращается обратно из собственного видеопроигрывателя в браузер, но я не уверен, как бы я это запечатлел.
document.addEventListener('keydown', function (e) { console.log(e.keyCode); }, false);
Вышеуказанное успешно входит в консоль, когда я нажимаю клавиши, пока я в браузере. Как только видео HTML5 переходит в полноэкранный режим, браузер, очевидно, больше не может регистрировать коды клавиш на консоли.
Я пытаюсь перейти от одного интерфейса к другому после выхода из полноэкранного режима.
EDIT
Ответ Потенча был полезен в качестве отправной точки, поэтому я принял его как этот ответ, несмотря на следующие предостережения:
It only works in Webkit browsers. :-) As originally defined it does not work sincevideo.webkitDisplayingFullscreen
is true
whenever the resize
event fires.
Я заставил это работать - только в браузерах 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);