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.
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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With