Jak przechwytywać zdarzenia klawiatury podczas oglądania wideo HTML5 w trybie pełnoekranowym?
Muszę wiedzieć, kiedy użytkownik naciśnie klawisz ucieczki podczas oglądania wideo HTML5 w trybie pełnoekranowym. Niestety wszystkie skonfigurowane słuchacze w dokumencie nie mają zastosowania, ponieważ gdy użytkownik ogląda wideo HTML5 w trybie pełnoekranowym, system skupia się raczej na rodzimym odtwarzaczu wideo niż na przeglądarce.
Alternatywą jest nasłuchiwanie, kiedy fokus powraca z rodzimego odtwarzacza wideo do przeglądarki, ale nie jestem pewien, jak to uchwycić.
document.addEventListener('keydown', function (e) { console.log(e.keyCode); }, false);
Powyższe pomyślnie loguje się do konsoli, gdy naciskam klawisze tak długo, jak długo jestem w przeglądarce. Gdy tylko film HTML5 wejdzie w tryb pełnoekranowy, przeglądarka oczywiście nie może już logować kodów kluczy do konsoli.
To, co próbuję zrobić, to przejście z jednego interfejsu do drugiego po wyjściu z trybu pełnoekranowego.
EDYTOWAĆ
Odpowiedź Potencha była przydatna jako punkt wyjścia, dlatego zaakceptowałem ją jako odpowiedź pomimo następujących zastrzeżeń:
Działa tylko w przeglądarkach Webkit. :-)Jak pierwotnie zdefiniowano, nie działa od tego czasuvideo.webkitDisplayingFullscreen
jesttrue
ilekroćresize
pożary zdarzeń.Mam to do pracy - tylko w przeglądarkach Webkit - dotykając klatek animacji, aby stale obserwować zmiany wartości:
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);