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