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/

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!