Custom HTML5 Video Controls - Escape Button will not fire fullscreen toggle function

Question

I have a video player with custom controls

<div>
<video poster="image.jpg" autoplay>
     <source src="video.mp4" id="vidM" type="video/mp4"></source>
</video>

<div id="media-controls">
<button type="button" id="play-pause" class="paused" >PLAY</button>
<button type="button" id="rewind10" >REWIND 10 SECONDS</button>
<button type="button" id="loop" >LOOP</button>
<input id="seekslider" type="range" min="0" max="100" value="0">
<span id="curtimetext">00:00</span> / <span id="durtimetext">00:00</span>
<button id="fullscreenbtn" >FS</button>
<button id="popoutbtn" >POPOUT</button>
<div id="fullVolume">
<button id="mutebtn" >MUTE</button>
<div id="volumeContainer"><input id="volumeslider" type="range" min="0" max="100" value="100" step="1" class="vertical" orient="vertical"></div>
</div>
</div>
</div>

and here are the custom controls for JUST the fullscreen Button:

var fullscreenbtn;
fullscreenbtn = document.getElementById("fullscreenbtn");
fullscreenbtn.addEventListener("click",toggleFullScreen,false);

function toggleFullScreen(){
    if ( document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement) {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        }
        fullscreenbtn.setAttribute("class", "");
    } else{
        if ( document.fullscreenEnabled || document.webkitFullscreenEnabled || document.mozFullScreenEnabled || document.msFullscreenEnabled){
            if (player.requestFullscreen) {
                player.requestFullscreen();
            } else if (player.webkitRequestFullscreen) {
                player.webkitRequestFullscreen();
            } else if (player.mozRequestFullScreen) {
                player.mozRequestFullScreen();
            } else if (player.msRequestFullscreen) {
                player.msRequestFullscreen();
            }
            fullscreenbtn.setAttribute("class", "fullscreen");  
        } 
    }
}

Now here's my problem: When the user CLICKS the fullscreen button to toggle it on or off, the display of the button works just fine (I have some styles attached to the class "fullscreen"). But when a user clicks the ESCAPE button on their keyboard, the function toggles to disable fullscreen mode, but does NOT remove the 'fullscreen' class.

What do I need to add to my function to allow the toggle to still execute

Answer 1

It's because you should be listening for the fullscreenchange event, not for a click, as escape is not a click event. Try the following:

document.addEventListener("fullscreenchange", function(event){
    if(!document.fullscreenElement){
        // remove your class here, clean up after full screen
    } 
}, false);

This event is prefixed for the moment, so you might need to check for prefixes, I usually use the following code to simplify it:

// We will have fullscreen as a variable holding all the prefix values we need
// Ifd its false, there is no support!
var fullscreen = false;
if(document.fullscreenEnabled) 
    fullscreen = {
        request: "requestFullscreen",
        element: "fullscreenElement",
        exit: "exitFullscreen",
        event: "fullscreenchange"
    };
else if(document.msfullscreenEnabled) 
    fullscreen = {
        request: "msRequestFullscreen",
        element: "msFullscreenElement",
        exit: "msExitFullscreen",
        event: "msfullscreenchange"
    };
else if(document.mozfullscreenEnabled) 
    fullscreen = {
        request: "mozRequestFullScreen",
        element: "mozFullScreenElement",
        exit: "mozCancelFullScreen",
        event: "mozfullscreenchange"
    };
else if(document.webkitFullscreenEnabled) 
    fullscreen = {
        request: "webkitRequestFullscreen",
        element: "webkitFullscreenElement",
        exit: "webkitExitFullscreen",
        event: "webkitfullscreenchange"
    };

Now you have an object that contains three things: the request function name, the document fullscreen element prefixed name and the exit name for the function. Now you can do the following:

if(fullscreen){
    document.addEventListener(fullscreen["event"], function(event){
        if(document[fullscreen["element"]]){
            document.body.style.backgroundColor = "green";
        } else {
            document.body.style.backgroundColor = "red";
        }
    }, false);
}

This way you could also reduce the code in your fullscreen function:

function toggleFullScreen(player){
    // start by checking if fullscreen was set. If not, don't continue.
    if(!fullscreen){
        return;
    }
    // Then check if an element is set and if the exit function exists 
    else if (document[fullscreen["element"]] && document[fullscreen["exit"]]) {
        document.document[fullscreen["exit"]]();
        fullscreenbtn.setAttribute("class", "");
    } 
    // otherwise check if request exists and trigger that.
    else {
        if (player[fullscreen["request"]]) {
            player[fullscreen["request"]]();
            fullscreenbtn.setAttribute("class", "fullscreen"); 
        }  
    }
}

You can find more here: https://developer.mozilla.org/en-US/docs/Web/Events/fullscreenchange And a previously (related) question here: How to detect when a page exits fullscreen?

The following snippet does not work in Stack Overflow, I'm unsure why. I have tested it and it works in my Safari 8, however.

var fullscreen = false;
if(document.fullscreenEnabled) 
    fullscreen = {
        request: "requestFullscreen",
        element: "fullscreenElement",
        exit: "exitFullscreen",
        event: "fullscreenchange"
    };
else if(document.msfullscreenEnabled) 
    fullscreen = {
        request: "msRequestFullscreen",
        element: "msFullscreenElement",
        exit: "msExitFullscreen",
        event: "msfullscreenchange"
    };
else if(document.mozfullscreenEnabled) 
    fullscreen = {
        request: "mozRequestFullScreen",
        element: "mozFullScreenElement",
        exit: "mozCancelFullScreen",
        event: "mozfullscreenchange"
    };
else if(document.webkitFullscreenEnabled) 
    fullscreen = {
        request: "webkitRequestFullscreen",
        element: "webkitFullscreenElement",
        exit: "webkitExitFullscreen",
        event: "webkitfullscreenchange"
    };


if(fullscreen){
    document.addEventListener(fullscreen["event"], function(event){
        if(document[fullscreen["element"]]){
            document.body.style.backgroundColor = "green";
        } else {
            document.body.style.backgroundColor = "red";
        }
    }, false);
}

function toggleFullScreen(player){
    // start by checking if fullscreen was set. If not, don't continue.
    if(!fullscreen){
        return;
    }
    // Then check if an element is set and if the exit function exists 
    else if (document[fullscreen["element"]] && document[fullscreen["exit"]]) {
        document.document[fullscreen["exit"]]();
        fullscreenbtn.setAttribute("class", "");
    } 
    // otherwise check if request exists and trigger that.
    else {
        if (player[fullscreen["request"]]) {
            player[fullscreen["request"]]();
            fullscreenbtn.setAttribute("class", "fullscreen"); 
        }  
    }
}

<video poster="image.jpg" autoplay>
     <source src="video.mp4" id="vidM" type="video/mp4"></source>
</video>

<button id="fullscreenbtn" onclick="toggleFullScreen(this)">FS</button>

The last bit (you asked in the comments) is that we would need to clean up your trigger a bit. I would try to unify the fullscreening of your player in one function, like the following:

function fullscreenEnableDisable(isFullScreen){
    // Check here to see if you need to enable or disable fullscreen classes
    // pass isFullScreen to force the change instead of check.
    isFullScreen = isFullScreen || typeof document[fullscreen["element"]] != "undefined";
    if(isFullScreen){
        // Do whatever you want related to being fullscreen
    } else {
        // Do whatever you want related to _not_ being fullscreen
    }
}

Now you can trigger fullscreenEnableDisable() when the fullscreenchange event is fired, and you can trigger fullscreenEnableDisable(true) to force it to apply your fullscreen stuff, and fullscreenEnableDisable(false) to force it to do you non-fullscreen stuff (these latter two are handy to use inside your button click).