HTML5 full screen API not working in Firefox , IE

Question

I want to detect the HTML5 video fullscreen mode. The code below is working fine only for chrome. The code is not working for Firefox and IE. I dont have Safari but i want it to work in Safari as well.

 video.addEventListener('webkitfullscreenchange', fullscreenHandler, false);
 video.addEventListener('mozFullScreenElement', fullscreenHandler, false);
 video.addEventListener('fullscreenElement', fullscreenHandler, false);
 video.addEventListener('requestFullscreen', fullscreenHandler, false);

function fullscreenHandler()
{
//fullscreen code
}

I have tried different methods but only working in chrome. Can anyone help me to fix this issue. Its been one whole day i am searching on google but could not find any solution. Help would be appreciated.

Answer 1

The correct event is fullscreenchange, and it should be attached to the document.

With all the vendor prefixes, it gives :

document.addEventListener('webkitfullscreenchange', fullScreenHandler);
document.addEventListener('mozfullscreenchange', fullScreenHandler);
document.addEventListener('msfullscreenchange', fullScreenHandler);
document.addEventListener('fullscreenchange', fullScreenHandler);

but some versions of IE didn't supported it to be attached from addEventListener()method, so a better cross-browser way is actually :

if('onfullscreenchange' in document){
  document.addEventListener('fullscreenchange', fullScreenHandler);
}
if('onmozfullscreenchange' in document){
  document.addEventListener('mozfullscreenchange', fullScreenHandler);
}
if('onwebkitfullscreenchange' in document){
  document.addEventListener('webkitfullscreenchange', fullScreenHandler);
}
if('onmsfullscreenchange' in document){
  document.onmsfullscreenchange = fullScreenHandler;
}

If you need to get which element did trigger the fullscreen mode, you can check for document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement;