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. i.e. 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. i.e. 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();