Detecting Event Change In Fullscreen Mode Internet Explorer

I am trying to write an event handler that detects whether a video player I have is in fullscreen or 'regular' mode. I have tried using document.addEventListener('fullscreenchange

Solution 1:

You have jQuery, so use it:

var screen_change_events = "webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange";
$(document).on(screen_change_events, function () {

});

(addEventListener isn't supported in versions earlier than IE 9 anyways)

At the same time, it doesn't look like full screen is supported in any version of IE:

• http://caniuse.com/fullscreen

MDN Reference:

• https://developer.mozilla.org/en-US/docs/DOM/Using_fullscreen_mode

Here's a possible hack around it:

• onfullscreenchange DOM event

Solution 2:

There is a jQuery plugin named jquery-fullscreen that will do exactly what you want. Until the Fullscreen-API standard has crystallized this is probably the best option.

You can also use the Modernizr fullscreen-api check and shim it if the browser doesn't support it by firing the event yourself (see this question for a detection method)

Solution 3:

download this script: https://raw.githubusercontent.com/sindresorhus/screenfull.js/gh-pages/dist/screenfull.js

use this code:

if (screenfull.enabled) {
    screenfull.onchange(() => {
        icono_full(screenfull.isFullscreen);
    });
}


functionicono_full(x) {
    if (x == true) {
        //do when full screen is on
    } else {
        //not full screen
    }
}

see: https://github.com/sindresorhus/screenfull.js