How can I trigger jQuery events when entering or exiting fullscreen?

Question

I have a Fullscreen button on my page. I want to use it to make a target element fullscreen. I would like specific jQuery events (fullscreenOn/fullscreenOff) when fullscreen is entered and exited. I would also like the fullscreen button to be removed if the browser doesn't support fullscreen.

The only code I have is from the MDN article:

var elem = document.getElementById("myvideo");
if (elem.requestFullscreen) {
  elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
  elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
  elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
  elem.webkitRequestFullscreen();
}

But this doesn't provide on/off-specific events. How can I do that?

Answer 1

I wrote a jQuery function:

$.fn.fullscreen = function(target){
    var elem = $(target)[0]; $d = $(document);
    if(elem.requestFullscreen || elem.msRequestFullscreen || elem.mozRequestFullScreen || elem.webkitRequestFullscreen){
        function FSon(){ $d.trigger('fullscreen').trigger('fullscreenOn').data('fullscreen',true); }
        function FSoff(){ $d.trigger('fullscreen').trigger('fullscreenOff').data('fullscreen',false); }
        $d.data('fullscreen',false)
          .on('fullscreenchange',function(){
            if(document.fullscreen) FSon();
            else FSoff();
        }).on('mozfullscreenchange',function(){
            if(document.mozFullScreen) FSon();
            else FSoff();
        }).on('webkitfullscreenchange',function(){
            if(document.webkitIsFullScreen) FSon();
            else FSoff();
        }).on('MSFullscreenChange',function(){
            if(document.msFullscreenElement) FSon();
            else FSoff();
        });
        this.click(function(){
            if(elem.requestFullscreen){
                elem.requestFullscreen();
            }else if(elem.mozRequestFullScreen){
                elem.mozRequestFullScreen();
            }else if(elem.webkitRequestFullscreen){
                elem.webkitRequestFullscreen();
            }else if(elem.msRequestFullscreen){
                elem.msRequestFullscreen();
            }
        });
    }else{
        this.remove();
    }
};

It provides the following features:

• Cross-browser (Unless the browser doesn't support requestFullscreen or its prefixed methods)
• Issues events on $(document): fullscreen for on/off and fullscreenOn/fullscreenOff.
• Adds jQuery .data to $(document): fullscreen is a boolean value.

You can call it like so:

$("#myButton").fullscreen("#elementToMakeFullscreen");

Here is the function compressed:

function n(){$d.trigger("fullscreen").trigger("fullscreenOn").data("fullscreen",true)}function r(){$d.trigger("fullscreen").trigger("fullscreenOff").data("fullscreen",false)}$d.data("fullscreen",false).on("fullscreenchange",function(){if(document.fullscreen)n();else r()}).on("mozfullscreenchange",function(){if(document.mozFullScreen)n();else r()}).on("webkitfullscreenchange",function(){if(document.webkitIsFullScreen)n();else r()}).on("MSFullscreenChange",function(){if(document.msFullscreenElement)n();else r()});this.click(function(){if(t.requestFullscreen){t.requestFullscreen()}else if(t.mozRequestFullScreen){t.mozRequestFullScreen()}else if(t.webkitRequestFullscreen){t.webkitRequestFullscreen()}else if(t.msRequestFullscreen){t.msRequestFullscreen()}})}else{this.remove()}}