Go Fullscreen with HTML5 Video on iPad/iPhone

11
votes

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?

2
javascriptiphoneipadfullscreen
On the iphone, video is always full screen, the browser just runs quicktime externally when you click on the link to a video – Juan Mendes
I think what Evan is asking for is to play the video in the "fullscreen" mode, which doesn't require the user to browse to the file (like what happens when you click the fullscreen control on the iPad). That's how Vimeo works on the iPhone. – Drew Baker
now you can use webkitEnterFullscreen to trigger fullsreen on iphone – Mathix420

2 Answers

9
votes

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>
0
votes

I used this and it worked for me

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