CODEWITHSUNDEEP
htmlvideofullscreen
Philippe Le Point
Philippe Le Point

Reputation: 255

HTML5 Video - double click to go full screen

I wish to have my video go full screen when the user double clicks the video area, not just when they click the small icon in the controls. Is there a way to add an event or something to govern what happens when the user clicks the video?

<video controls autoplay>
  <source src="/v/foo.mp4">
</video>

Thanks!

Upvotes: 2

Views: 7582

Answers (5)

saad
saad

Reputation: 1364

<video controls autoplay ondblclick="fullScreen()">
  <source src="/v/foo.mp4">
</video>

<script  type='text/javascript'>
  function fullScreen() { 
    if (!window.isFs) $(".mejs__fullscreen-button > button").trigger('click');
    else  $(".mejs__unfullscreen > button").trigger('click'); 
  }
</script>

Upvotes: 1

Ahmad Mysra
Ahmad Mysra

Reputation: 13

Here is a working example:

https://fiddle.jshell.net/AhmadMysra/57kcyhbp/4/

function makeFullScreen(divObj) {
  if (!document.fullscreenElement && // alternative standard method
    !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) {
    if (divObj.requestFullscreen) {
      divObj.requestFullscreen();
    } else if (divObj.msRequestFullscreen) {
      divObj.msRequestFullscreen();
    } else if (divObj.mozRequestFullScreen) {
      divObj.mozRequestFullScreen();
    } else if (divObj.webkitRequestFullscreen) {
      divObj.webkitRequestFullscreen();
    } else {
      console.log("Fullscreen API is not supported");
    }

  } else {

    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitCancelFullScreen) {
      document.webkitCancelFullScreen();
    }

  }
}
<video controls style="border: 1px solid blue;" height="360" width="480" ondblclick="makeFullScreen(this)">

<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">

	<source src="http://clips.vorwaerts-gmbh.de/VfE.webm" type="video/webm">
  
	<source src="http://clips.vorwaerts-gmbh.de/VfE.ogv" type="video/ogg"><!-- Firefox3.6+ / Opera 10.5+ -->
    
    </video>
<p>
  Hosting of the video provided by<br>
  <a href="http://webop.de/users/69">André M. Åslund</a> of <a href="http://vorwaerts-gmbh.de">Vorwärts GmbH</a>.
</p>

Upvotes: 1

Derek
Derek

Reputation: 967

As Musa suggested, attach a double click event--something like $('video').on('dblclick', callback)

element.requestFullScreen is probably the "proper" way to do it, but browser support isn't great yet, especially on mobile.

If you don't need true full screen, and filling the browser would suffice, you could apply some CSS inside the dblclick callback.

Upvotes: 3

Musa
Musa

Reputation: 97682

Attach a double click(dblclick) event listener to the video, then in the listener call requestFullScreen on the video.

Upvotes: 2

N. Hamelink
N. Hamelink

Reputation: 603

Maybe can this link can help you, there are also much HTML5 / JavaScript players to use (Excemple: BuckPlayer). Good luck.

Upvotes: 0

Related Questions