HTML5 exiting video fullscreen

Question

I have a HTML5 video with custom controls in normal screen. Don't have custom controls at full screen. I just show default controls at full screen. But when exiting full screen I need to disable default controls. How do we know whether the video has exited the full screen mode using JavaScript or jQuery?

Answer 1

You can only call document.mozCancelFullScreen() , if you're inside a document which is fullscreen . ie if you're in an which is a contained inside another document, which is fullscreen , mozCancelFullScreen() won't do anything in the inner iframe, as only the outer document is acutally fullscreen . ie calling mozCancelFullScreen in the outer document will cancel fullscreen , but calling it in the inner document won't.

Also be aware that mozCancelFullScreen() reverts fullscreen to have the previous fullscreen element as fullscreen . So if you've requested fullscreen multiple times, cancelling fullscreen won't necessarily exit fullscreen fully, it may rollback to the previous fullscreen state.

Examples:

1. You could go with:

$(document).on('webkitExitFullScreen', function()      {       
  alert("Full Screen Closed"); 
});

2. You could use a variable for further ussage:

var exitedFullScreen;
$(document).on("webkitExitFullScreen", function() {
   exitedFullScreen = !!$(document).fullScreen();
}

3. Applying it to your container:

$('video')[0].webkitExitFullScreen();

4. Using only JavaScript:

<script type="text/javascript">
  function ExitVideo() {
      document.getElementsByTagName('video')[0].webkitExitFullScreen();
  }
</script>

5. There are also several third-party plugins which provide you access to the event you need:

• http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/
• https://github.com/ruidlopes/jquery-fullscreen

EDIT 1

There are compatibility issue across browsers, here is the example of different statements:

document.webkitExitFullscreen();
document.mozCancelFullscreen();
document.exitFullscreen();

EDIT 2

The Fullscreen API is enabled by default in Chrome 15 , Firefox 14 , and Opera 12 . For more information on the rest of the API, see the spec.

Updated 2012-10-11: to be inline with spec changes. Lowercased the "S" in requestFullscreen() and changed document.webkitCancelFullScreen() to document.webkitExitFullscreen().

EDIT 3

Try the following, without using jQuery to debug in Firefox:

var videoElement = document.getElementById("myvideo");

  function toggleFullScreen() {
    if (!document.mozFullScreen && !document.webkitFullScreen) {
      if (videoElement.mozRequestFullScreen) {
        videoElement.mozRequestFullScreen();
      } else {
        videoElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
      }
    } else {
      if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else {
        document.webkitCancelFullScreen();
      }
    }
  }

  document.addEventListener("keydown", function(e) {
    if (e.keyCode == 13) {
      toggleFullScreen();
    }
  }, false);

EDIT 4

For using with jQuery in Firefox, try the different example:

if (document.mozCancelFullScreen) { 
    alert('Full Screen Closed') 
}

Answer 2

I took this from the post above but added onto It. I set the document values which then allowed me to exit fullscreen.

  var videoElement = document.getElementById("myvideo");

  function toggleFullScreen() {
    if (!document.mozFullScreen && !document.webkitFullScreen) {
      if (videoElement.mozRequestFullScreen) {
        videoElement.mozRequestFullScreen();
      } else {
        videoElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
      }
      document.mozFullScreen = true;
      document.webkitFullScreen = true;
    } else {
      if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else {
        document.webkitCancelFullScreen();
      }
    }
  }

  document.addEventListener("keydown", function(e) {
    if (e.keyCode == 13) {
      toggleFullScreen();
    }
  }, false);

I only added these two lines ..

document.mozFullScreen = true;

document.webkitFullScreen = true;

which worked perfect for me in addition to llia's code above.

Edit: This Seems like a better fix then what was written before.

  fullScreenButton.addEventListener("click", function() {
   if (!document.fullscreenElement &&    // alternative standard method
   !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) {  // current working methods
     if (video.requestFullscreen) {
      video.requestFullscreen();
     } else if (video.msRequestFullscreen) {
      video.msRequestFullscreen();
     } else if (video.mozRequestFullScreen) {
      video.mozRequestFullScreen();
     } else if (video.webkitRequestFullscreen) {
      video.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
     }
    } else {
     if (document.exitFullscreen) {
      document.exitFullscreen();
     } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
     } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
     } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
     }
    }
   });

Answer 3

Here is an updated code as for now (Jun 4th 2017), works on all browsers:

if (document.exitFullscreen)
    document.exitFullscreen();
else if (document.webkitExitFullscreen)
    document.webkitExitFullscreen();
else if (document.mozCancelFullScreen)
    document.mozCancelFullScreen();
else if (document.msExitFullscreen)
    document.msExitFullscreen();

Answer 4

$('video').bind('webkitfullscreenchange mozfullscreenchange fullscreenchange', function(e) {
    var state = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
    var event = state ? 'FullscreenOn' : 'FullscreenOff';

    // Now do something interesting
    alert('Event: ' + event);    
});