Question

I have an application that requires a page refresh whenever the orientation changes (ipad/iphone). Within this application, HTML5 videos also gets presented at certain times in UX. Whenever a user is viewing a video in full screen mode, their first inclination is to rotate the device to landscape orientation if it was not already in that mode. When they do this, however, it triggers the nasty page reload, effectively ending their viewing session. By tapping into webkit full screen API I was able to write logic to control this behavior, which works perfectly on Safari desktop as well as with the iPad/iPhone user agent selected in developer tools, but it DOES NOT work on the native iphone/ipad.

document.webkitIsFullScreen returns false/true correctly in console in Safari, but comes up as undefined on iphone/ipad. Can anyone tell me how to accomplish this on ipad/iphone, since these are the only devices that require this functionality anyway? Or is there a much simpler solution that I am overlooking? Any help is greatly appreciated!

$(document).ready( function () {

    var video = document.getElementById('video');

    var canrefresh = true;      

    video.addEventListener("webkitfullscreenchange",function(){
        // Detects if video is in full screen mode and toggles canrefresh variable
        // canrefresh = false when webkitfullscreenchange event is heard
        // canrefresh = true after exiting full screen
        if (canrefresh == true) {
            canrefresh = false;
        } else {
            canrefresh = true;
        }

        console.log(document.webkitIsFullScreen+' | '+canrefresh);
    }, false);

    $(window).resize(function() {
        // Look to make sure not in full screen, and canrefresh variable is true before refreshing page
        if((document.webkitIsFullScreen == false) && (canrefresh == true)){
            window.location = window.location.href+'?v='+Math.floor(Math.random()*1000);
        }
    });

    console.log(document.webkitIsFullScreen+' | '+canrefresh);
    $('body .test').text(document.webkitIsFullScreen+' | '+canrefresh); // document.webkitIsFullScreen is returning 'false' in Safari (correct), but 'undefined' on native iphone/ipad device

});

Answer 1

The equivalent property which is compatible with Mobile Safari is the webkitDisplayingFullscreen property on the HTMLVideoElement DOM object.