Phonegap - Prevent Rotation While Still Having Auto-Orientation Enabled?

Question

I'm reposting someone else's question I found on Google groups, I'm having a similar problem:

---

I have an application that requires everything to be in Portrait, except for when it plays a video. On iOS, when video playback is passed to the Quicktime player, I want the video to be able to be played in Landscape mode. Currently the video only plays in Portrait, since it seems to inherit the portrait - only from the phonegap application. My solution may be to change the Phonegap.plist to Auto rotate, but then I'd want to be able to use javascript to catch for rotation changes and prevent them in every page of the app except for Video playback. Does this sound feasible? Is there another way to force Landscape orientation just for a specific page of the application? Thanks!

---

I tried the following with Auto rotate enabled, without success:

$(document).ready(function(){
  document.addEventListener('orientationchange', function(e) { e.preventDefault(); }, false);
});

Answer 1

$(window).bind("orientationchange", function(){
    var orientation = window.orientation;
    var new_orientation = (orientation) ? 0 : 180 + orientation;
    $('body').css({
        "-webkit-transform": "rotate(" + new_orientation + "deg)"
    });
});

This is a risky way but thinks its the only way..

Alternative you can bind to the window resize event.

$(window).bind("resize", function(){
    var orientation = window.orientation;
    var new_orientation = (orientation) ? 0 : 180 + orientation;
    $('body').css({
        "-webkit-transform": "rotate(" + new_orientation + "deg)"
    });
});

---

I wrote this little script a while ago: It fix the multiply resize callback bug in iOS safari and the non-/late-/early-trigger(1) orientationchange bug in android.

(1) Sometimes it dosn't trigger sometimes before and some times after the browser has changes width + height? Wired!

if (!(/iphone|ipad/gi).test(navigator.appVersion)) {
    $(window).unbind("resize").bind("resize", function() {
        $(window).trigger("orientationchange");
    });
}

If not iphone or ipad you are triggering the orientationchange event on the window.

So when you will bind any function the the resize you do it throw orientationchange.

See: http://jsfiddle.net/aalouv/sABRQ/1/