Web App - iPad webkitEnterFullscreen - Programatically going full-screen video

Question

http://sandbox.solutionsbydesign.com/i-screenplay/h5/

Above is an example I downloaded from Apple where you can use controls for play and fullscreen mode. In Safara/iPad it works great. However what I want to do is have people click on a link and it loads a video and then goes into fullscreen mode. So for example on the link above if after the loading dots finish it went into fullscreen that would be perfect.

http://developer.apple.com/library/safari/#documentation/AudioVideo/Reference/HTMLVideoElementClassReference/HTMLVideoElement/HTMLVideoElement.html Has more information on this.

Solution 1

The best I have been able to come up with it this.

Setup your video tag and use CSS to position it off the screen someplace (it can't be set to display:none). I used absolute positioning to move it off the top left of the screen.

Then use this JS:

$('.popup.ipad a').click(function() {

        var currentID = $(this).closest('.player').find('video').attr('id');
        var videoContainer = document.getElementById(currentID);
        var newSrc = $(this).attr('href');

        videoContainer.src = newSrc;
        videoContainer.webkitEnterFullscreen();
        videoContainer.play();
});

It will play in Fullscreen great, but when the user clicks "done" to exit the video will continue to play off the screen (so you will hear the audio).

So, I need to figure out how to listen for an event that is fired when "Done" is touched (I'm not even sure there is an event for this). Or, use the method described here and run it every second to see if Fullscreen mode is being used. But I haven't had much success, no matter what what I do I get errors.

Hopefully this helps you find some answers. If so, let me know!

Solution 2

The secret is that you cannot go into fullscreen mode until the video meta data has been loaded. The Apple docs state:

This property [webkitSupportsFullscreen] is also false if the meta data is loaded or the loadedmetadata event has not fired, and if the files are audio-only."

So to trigger the fullscreen at the right time, simply create an event listener for the loadedmetadata event:

videoContainer.addEventListener('loadedmetadata', function() {
    if (videoContainer.webkitEnterFullscreen) {
        videoContainer.webkitEnterFullscreen();
    }
});

Armed with that, you should be able to programmatically add and play fullscreen videos on iOS whether you're using the "off-screen" video container that Drew mentioned or via adding the video tags dynamically.

Solution 3

I think your issue is in trying to force a non-user invoked fullscreen, which won't work. The user has to invoke the fullscreen request through a button click, etc. Waiting for the video to load then going fullscreen isn't the same thing.

@Drew Baker Here is a post I did last night on doing fullscreen: http://johncblandii.com/2011/07/html5-video-fullscreen.html.

Solution 4

I've been working on this problem too. Trying to get the video to play in full screen mode from a button click.

I may be doing it wrong, but here is how I got it to work for me (on ipad air, iphone 5, galaxy 3, nexus 7... everything but the ipad 2, where the video wont go full screen yet, but it will play)

In order to play a video, you have to have the user directly click on something. Everytime I use JQUERY, it simply doesn't work on the iOS devices. I think iOS is very sensitive about getting away from direct clicks So, you put the onclick handler directly on the item you want them to click, like so:

<div onclick='openAndPlay(event);' id='video_layover' ></div>

function openAndPlay(event) { 

    myvideo.play();
    myvideo.webkitEnterFullscreen();

    return false;
}

I have found the order to be important. First the play, then the full screen request. Try that out and see if it works for you. The return false might not be necessary.

View more solutions