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.

Answer 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!

Answer 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.