CODEWITHSUNDEEP
javascriptiphoneipadfullscreen
eculver
eculver

Reputation: 517

Go Fullscreen with HTML5 Video on iPad/iPhone

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?

Upvotes: 12

Views: 20906

Answers (3)

Henrik Albrechtsson
Henrik Albrechtsson

Reputation: 1742

document.querySelector('video').webkitEnterFullscreen();

Upvotes: 0

Ignacio Castro
Ignacio Castro

Reputation: 99

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>

Upvotes: 9

Vineet Ashtekar
Vineet Ashtekar

Reputation: 1952

I used this and it worked for me

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

Upvotes: 1

Related Questions