Javascript DOM HTML Element requestFullscreen() Method show video

Introduction

Show a <video> element in full screen mode:

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

View in separate window 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>/* ww  w  . j a  va 2  s  .  c  o m*/
<body>
<button onclick="openFullscreen();">Open Video in Full screen Mode</button>
<p><strong>Tip:</strong> Press the "Esc" key to exit full screen.</p>

<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>
/* Get the element you want displayed in fullscreen */
var elem = document.getElementById("myvideo");

/* Function to open fullscreen mode */
function openFullscreen() {
  if (elem.requestFullscreen) {
  elem.requestFullscreen();
  } 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 requestFullscreen() method opens an element in full screen mode.

This method requires specific prefixes to work in different browsers.

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

element.requestFullscreen()

The requestFullscreen() method return No value.




PreviousNext

Related