HTML5 video player with custom controls: use [ESC] to exit full screen

Question

I am making an HTML5 video player with custom controls. You can see it in THIS jsFiddle.

The HTML is "classic":

<div class="video-container">
    <video poster="http://code-love.me/video/posters/flamenco.jpg">
        <source src="http://code-love.me/video/videos/flamenco.mp4" type="video/mp4" />
        <source src="http://code-love.me/video/videos/flamenco.ogg" type="video/ogg" />
    </video>
    <div class="controls-wrapper">
        <div class="progress-bar">
            <div class="progress"></div>
        </div>
        <ul class="video-controls">
            <li><input type="button" name="play-pause" value="Play" class="play"></li>
            <li class="fullscreen-container"><input type="button" name="toggle-fullscreen" value="Fullscreen" class="fullscreen"></li>
        </ul>
    </div>
</div>

I have a full screen function that I call upon 2 events: clicking the full screen button and pressing Esc key.

Clicking the full screen button toggles full-screen mode ok, but I can't see why using the key does not. After all , it's the same function....

Any hints? Ty!

Well, it does not work in my local environment. I have to press ESC twice to exit full-screen. Can you save it on your computer and tell me how it works? And.. I also use Chrome. — Razvan Zamfir
Just a question, why do you want to open the full screen on ESC press, doesn't make any sense to me from UX perspective. — Rikusor
Sorry, I was not explicit (and smart) enough: I just want it to exit full screen by pressing the "ESC" key. — Razvan Zamfir

Rikusor Rikusor · Accepted Answer · 2017-05-18T09:43:52

Now that I understood your goal, you cannot listen to keypress events in full screen mode due security risks, there are ways to enable this in Chrome, but I strongly advise against that.

What you can do is that, you can listen to webkitfullscreenchange mozfullscreenchange fullscreenchange events (multiple events for browser compatibility reasons).

Then act when these events occur.

$(document).bind('webkitfullscreenchange mozfullscreenchange fullscreenchange', function(e) {
    var state = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
    var event = state ? 'FullscreenOn' : 'FullscreenOff';

    // Now do something interesting
   if(event === 'FullscreenOff') {
    // Do something when user exists fullscreen
   } else {
    // Do something when user enters fullscreen
   }
});

HTML5 video player with custom controls: use [ESC] to exit full screen

1 Answers