HTML5 video detect keypress in full screen mode

Question

While playing a video in full screen mode with the <video> tag in Chrome and Opera, keypress events are not being triggered.

$(document).on('keypress', function(e) {
    if (e.which == 32) {
        e.preventDefault()
        console.log('space pressed')
    }
})

With the above code, pressing space while the video is playing normally, spits out 'space pressed' in the console, but nothing happens when I switch to full screen. The code works in FF, and I haven't yet tested in Safari.

Is there any way to detect the keypress event while in full screen mode?

Is this post useful? http://stackoverflow.com/questions/11163203/how-do-i-capture-keyboard-events-while-watching-an-html5-video-in-fullscreen-mod — Fizz, Mar 25 '14 at 21:31
Have a look here when implementing for Safari. http://stackoverflow.com/questions/16150601/substitute-for-allow-keyboard-input-javascript-full-screen/16676279#16676279 — brianchirls, Mar 26 '14 at 01:53

score 3 · Accepted Answer · edited May 23 '17 at 12:30

It seems that most browsers don't allow keyboard inputs while in fullscreen mode due to security reasons. Although in Chrome, i believe you can set the following for keyboard input to work:

document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);

I haven't tested this myself.

Also for more information check out the following:

How do I capture keyboard events while watching an HTML5 video in fullscreen mode?

Using the fullscreen API in web browsers

HTML5 video detect keypress in full screen mode

1 Answers1