Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Exiting Fullscreen With The HTML5 Video Tag

I'm trying to get the video to exit fullscreen at the end of the video but it won't. I searched and found ways to do this but for the life of me I can't get it to work. I'm testing in the latest version of Chrome (15) and iOS 5 on the iPad2. Here's 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 will be appreciated.

like image 653
ShockTower Avatar asked Nov 17 '11 20:11

ShockTower


People also ask

How do I exit full screen in HTML?

exitFullscreen() The Document method exitFullscreen() requests that the element on this document which is currently being presented in fullscreen mode be taken out of fullscreen mode, restoring the previous state of the screen.


1 Answers

webkitExitFullScreen is a method of the video element, so it has to be called this way:

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

Since it's inside an event handler, this will be the video that ended, so:

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

It gets a bit more complicated because webkitExitFullscreen only works in webkit-based browsers (Safari, Chrome, Opera), so you can learn more about its correct usage on MDN

like image 65
cbaigorri Avatar answered Oct 09 '22 10:10

cbaigorri