How do I check for a fullscreen request on a html5 video in javascript/jquery?

Question

I want to do something when the user clicks on the fullscreen button (bottom right hand corner) in a html5 video.

So something like this:

$('#video').on('webkitRequestFullscreen', function()      {       
    console.log("hello");
});

but this isn't working.

This will be run in an Android WebView so you don't have to worry about multiple browsers.

Answer 1

EDIT There are events to handle this, see the following: Fullscreen API: Which events are fired?

Original answer
In this case you have to use an interval of some sort. Here's how I accomplished this:

// Returns true if we can enter fullscreen 
//(i.e. fullscreen function is available and not already fullscreened)

var canFullscreen = function(){
  return (
    !document.fullscreenElement &&
    !document.mozFullScreenElement &&
    !document.webkitFullscreenElement &&
    !document.msFullscreenElement );
}

setInterval(function(){
  if( canFullscreen() ) {
    // Handle exiting fullscreen
  } else {
    // Handle entering fullscreen
  }
}, 50);