Как фиксировать события клавиатуры при просмотре видео HTML5 в полноэкранном режиме?

Мне нужно знать, когда пользователь нажимает клавишу выхода при просмотре видео HTML5 в полноэкранном режиме. К сожалению, любые настроенные прослушиватели в документе не применяются, поскольку, когда пользователь просматривает видео HTML5 в полноэкранном режиме, система фокусируется на собственном видеоплеере, а не на браузере.

Альтернативой является прослушивание, когда фокус возвращается с родного видеоплеера на браузер, но я не уверен, как мне это зафиксировать.

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

Вышеприведенное успешно регистрируется в консоли, когда я нажимаю клавиши, пока я в браузере. Как только видео HTML5 переходит в полноэкранный режим, браузер, очевидно, больше не может передавать коды клавиш на консоль.

Я пытаюсь перейти от одного пользовательского интерфейса к другому после выхода из полноэкранного режима.

ИЗМЕНИТЬ

Ответ Потенча был полезен в качестве отправной точки, поэтому я принял его как этот ответ, несмотря на следующие оговорки:

  • Он работает только в браузерах 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);

javascript dom-events html5-video fullscreen keycode
person natlee75    schedule 22.06.2012    source источник
comment
Вы пробовали прослушивать события клавиатуры в окне?   -  person potench    schedule 23.06.2012
comment
@potench - Ага. Это не ведет себя иначе.   -  person natlee75    schedule 23.06.2012

Ответы (1)


arrow_upward
1
arrow_downward

Хорошо, я думаю, у меня есть решение для вас... Я просто предполагаю, что вы используете 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
       }
    }
});

Надеюсь, это поможет или направит вас в правильном направлении

person potench    schedule 22.06.2012
comment
Спасибо за предложение. Я собираюсь попробовать это, как только я вернусь к своему столу! - person natlee75; 25.06.2012
comment
Я принял этот ответ, хотя он не работает из коробки. Я отредактировал ваш пост, чтобы включить окончательный рабочий код, который использует кадры анимации для запуска теста. Ваше предложение определенно указало мне правильное направление. Большое спасибо! - person natlee75; 25.06.2012
comment
Я переместил редактирование на ваш собственный вопрос, так как это наиболее подходящее место для него здесь, на SO. - person Gerben; 25.06.2012