Geek Answers Handbook

Exit fullscreen using HTML5 tags

I am trying to get a video to exit full screen at the end of the video, but it is not. I searched and found ways to do this, but for life I can't get it to work. I am testing the latest version of Chrome (15) and iOS 5 on iPad2. Here is the code I'm using:

<html> <head> <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script> <script> $(document).ready(function(){ $("#myVideoTag").on('ended', function(){ webkitExitFullScreen(); }); }); </script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>854x480</title> </head> <body> <video width="854" height="480" src="video/854x480-Template_1.mp4" poster="images/poster.jpg" id="myVideoTag" type="video/mp4" preload="auto" autobuffer controls> <p>Requires HTML5 capable browser.</p> </video> </body> </html>

Any help would be appreciated.

+7
source share
3 answers

webkitExitFullScreen is a method of the video element, so it should be called as follows:

 videoElement.webkitExitFullscreen(); //or $("#myVideoTag")[0].webkitExitFullscreen(); //or, without needing jQuery document.getElementsById('myVideoTag').webkitExitFullscreen();

Since inside the event handler this will be video , which ended , therefore:

 $("#myVideoTag").on('ended', function(){ this.webkitExitFullscreen(); });

This webkitExitFullScreen little complicated because webkitExitFullScreen only works in webkit-based browsers (Safari, Chrome, Opera), so you can learn more about its proper use on MDN

+14
source

I know that this has already been answered, but here is a small piece of code that I have finished so that all browsers close the full-screen video after it is completed.

Works on Chrome, IE11, Firefox:

 $("#myVideoTag").on('ended', function(){ if (document.exitFullscreen) { document.exitFullscreen(); // Standard } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); // Blink } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); // Gecko } else if (document.msExitFullscreen) { document.msExitFullscreen(); // Old IE } });

You can also find the current full-screen item (if any):

  var fullscreenElement = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement;

Source: https://www.sitepoint.com/use-html5-full-screen-api/

I just thought that I would add an answer, since this was the first question that I came across in search of a solution to this question.

+3
source

Thanks, cboigorri, it worked great to use .webkitExitFullscreen ();

I used the following to exit full screen when playing a video:

 <script type="text/javascript"> function CloseVideo() { document.getElementsByTagName('video')[0].webkitExitFullscreen(); } </script> <video controls onended=CloseVideo() > <source src="video.mp4" type="video/mp4"> </video>
+2
source

More articles:


All Articles