Geek Answers Handbook

Go Fullscreen with HTML5 Video on iPad / iPhone

I'm trying to play fullscreen for HTML5 video element on iPad / iPhone using JavaScript, but when I try to use videoElement.webkitEnterFullScreen (), I see INVALID_STATE_ERR: Dom Exception 11.

My code

For example

Now, it looks like special support for this behavior has been added here:

which specifically prevents viewing full-screen mode without user gestures.

My question is:

Is there a workaround for this?

I can see that the Vimeo HTML5 video player mimics this behavior somehow as shown here (on iPad / iPhone)

So it seems like it's possible. Did I miss something?

+7
source share
2 answers

Testing on Ipad iOS Simulator

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>
+5
source

I used it and it worked for me

 - (void) makeHTML5VideoFullscreen { if(webView) { [webView stringByEvaluatingJavaScriptFromString: @"document.querySelector('video').webkitEnterFullscreen();"]; } }
0
source

More articles:


All Articles