Menu
I'm trying to play and go fullscreen for an HTML5 video element on an iPad/iPhone via JavaScript, but when I try videoElement.webkitEnterFullScreen(), I see an INVALID_STATE_ERR: Dom Exception 11.
My Code
For Example
Now, it looks like specific support for this behavior was added here:
which specifically prevents going fullscreen without a user gesture.
My question:
Is there a workaround for this?
I see that Vimeo's HTML5 video player is mimicking this behavior somehow as seen here (on iPad/iPhone)
So, it seems it is possible. Am I missing something?
428
Testing on iOS simulator Ipad
Hope I can help someone:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
var vid;
function init() {
vid = document.getElementById("myVideo");
vid.addEventListener("loadedmetadata", goFullscreen, false);
}
function goFullscreen() {
vid.webkitEnterFullscreen();
}
$(document).ready(function(){
init();
$("#myVideo").bind('ended', function(){
$('#myVideo')[0].webkitExitFullScreen();
});
});
</script>
</head>
<body>
<h1>Fullscreen Video</h1>
<video src="movie.mp4" id="myVideo" autoplay controls >
</video>
</body>
</html>
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
