Full screen video toggle HTML

Question

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....

Answer 1

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>

Answer 2

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