5

The video tag in HTML 5 is really fascinating. I need to know whether it is possible to let users toggle full screen play. I dont wanna use any other video plugin. I just need to use the video tag. So is this possible. Please help me out....

Srivathsan
  • 600
  • 3
  • 9
  • 19

3 Answers3

18

You can use the following code to create a button that will take the video into full screen mode.

Javascript code:

<script type="text/javascript">
function goFullscreen(id) {
  var element = document.getElementById(id);       
  if (element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if (element.webkitRequestFullScreen) {
    element.webkitRequestFullScreen();
  }  
}
</script>

Html code:

<video class="video_player" id="player" width="100%" controls="controls" autoplay="autoplay">
  <source src="INPUT VIDEO URL HERE"/>
  Your browser does not support the HTML5 video tag.  Use a better browser!
</video>
<button onclick="goFullscreen('player'); return false">
  View Fullscreen!
</button>
Alon Dahari
  • 1,138
  • 1
  • 9
  • 27
godofyouall
  • 206
  • 1
  • 2
  • This is actually an incorrect spelling - it should be `requestFullscreen` with a small "s". MDN: https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullScreen – icl7126 Dec 19 '21 at 22:07
4

Yes. It is possible. However, there are some limitations in most browsers. It is currently only supported (as of June 2012) in Webkit-based browsers like Safari and Chrome.

Please check the following:

  1. http://videojs.com/
  2. http://blog.jilion.com/2011/07/27/world-s-first-true-html5-fullscreen-video (works only in Safari)
  3. http://easyhtml5video.com/
  4. http://johncblandii.com/2011/07/html5-video-fullscreen.html
Geocrafter
  • 145
  • 10
0

According to this website, only half of all the "big browsers" support full screen playback. My Google Chrome actually crashes when trying to do fullscreen. In time, however, there will be a global toggle.

RandomDuck.NET
  • 490
  • 5
  • 17