Search code examples
jqueryipadfullscreenhtml5-videoexit

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.

Solution

  • 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