Javascript DOM HTML Document fullscreenEnabled() Method

Introduction

Show a <video> element in full screen mode:

Click on the button to open the video in full screen mode.

Press the "Esc" key to exit full screen.

View in separate window 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>/* ww w.j  a v  a  2s  .  c o m*/
<body>
<button onclick="openFullscreen();">Open Video in Fullscreen Mode</button>
<video width="100%" controls id="myvideo">
  <source src="video.mp4" type="video/mp4">
  <source src="video.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

<script>
var elem = document.getElementById("myvideo");
function openFullscreen() {
  /* If fullscreen mode is available, show the element in fullscreen */
  if (
    document.fullscreenEnabled || /* Standard syntax */
    document.webkitFullscreenEnabled || /* Chrome, Safari & Opera */
    document.mozFullScreenEnabled || /* Firefox */
    document.msFullscreenEnabled /* IE/Edge */
  ) {
    /* Show the element in fullscreen */
    elem.webkitRequestFullscreen();
    if (elem.requestFullscreen) {
      elem.requestFullscreen(); /* Standard syntax */
    } else if (elem.mozRequestFullScreen) { /* Firefox */
      elem.mozRequestFullScreen();
    } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
      elem.webkitRequestFullscreen();
    } else if (elem.msRequestFullscreen) { /* IE/Edge */
      elem.msRequestFullscreen();
    }
  }
}
</script>
</body>
</html>

The fullscreenEnabled() method returns a Boolean value indicating whether the document can be viewed in full screen mode.

The fullscreenEnabled() method returns true if full screen mode is available, otherwise false.

Use the element.requestFullscreen() method to view an element in full screen mode.

Use the element.exitFullscreen() method to cancel full screen mode.




PreviousNext

Related