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.

I aware of the function, but I also thought there was an event too. For example, [this](https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API) shows elem.requestFullscreen without parens in a if statement. — Lv99Zubat, Feb 09 '16 at 21:19

score 2 · Accepted Answer · edited May 23 '17 at 12:15

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);

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

1 Answers1