Twitter: raymondcamden


Address: Lafayette, LA, USA

PhoneGap Tip: Temporarily changing orientation for video in a portrait only application

05-24-2014 7,990 views Mobile, jQuery, JavaScript 7 Comments

That's probably the longest title I ever used for a blog post. A PhoneGap user came to me recently with an interesting problem. His application was set to be portrait only. In case you weren't aware, you can lock orientation for an application using this config.xml value:

<preference name="orientation" value="portrait"/>

While this works well, he wanted to do videos in landscape mode instead. He had it working fine in iOS but nothing he tried would work for Android. I began by looking for a plugin to allow me to switch orientation dynamically. This one, http://plugins.cordova.io/#/package/net.yoik.cordova.plugins.screenorientation, worked great.

So at this point - I found the code in the application that fired off the video to go into full screen mode, and added the two simple lines of code to set orientation to landscape.

video.addEventListener('playing', function() {
     var so = cordova.plugins.screenorientation;
     so.setOrientation(so.Orientation.LANDSCAPE);
}, false);

This worked great. All in all this part took me 15 minutes. But then I had a problem - how to leave this mode. Turns out this was pretty difficult. When I looked at the set of events for media tags, none of them handled the case I needed - the user hitting the back button. I could listen for the video ending, but in theory the user may wish to watch the video twice. I couldn't find any way of noticing the user leaving the video. Then I looked back to the code I had originally modified - the one fired when the video began. The user had entered full screen mode like so:

if (video.webkitEnterFullScreen)
    video.webkitEnterFullScreen();
else if (video.webkitRequestFullScreen)
    video.webkitRequestFullScreen();
else if (video.requestFullscreen)
    video.requestFullscreen();

I did some digging and discovered you could listen for the user leaving full screen mode, which happened automatically when they hit their back button.

jQuery(document).on('webkitfullscreenchange', function(e) {       
    if(!e.currentTarget.webkitIsFullScreen) {
        var so = cordova.plugins.screenorientation;
        so.setOrientation(so.Orientation.PORTRAIT);
    }
}); 

In the example above we check to see if the device is currently in full screen, and if not, i.e. they were leaving it, we go back to portrait. In theory I could use this one event handler to handle switching it to landscape too.

Any way - I hope this helps others!

7 Comments

  • Commented on 05-24-2014 at 3:47 PM
    FYI - I ended up moving all the code into the webkitfullscreen event and it works fine - and is simpler. I assume I don't have to share the code (I just added an else with the right plugin code).
  • Commented on 05-28-2014 at 12:11 PM
    Thx for that very useful tip. I would like to take this opportunity to ask you if you'd have any resource regarding switch off and on zooming in a PhoneGap app. I'd like to allow users to pinch to zoom on images while the rest of the content is not zoomable. I am about to develop that from scratch. Before that, I am wondering if there is an easier solution (I was unable to find one browsing here and there for the last days).
  • Commented on 05-28-2014 at 1:12 PM
    Hmm, so it is easy enough to do globally via meta tags (http://stackoverflow.com/questions/11689353/disabl...), but I'm not sure how you would turn it off when an image is being displayed. In theory you could try modifying the meta tag via dom manipulation, but I'm not sure how that would work in practice.
  • Steve Gauthier #
    Commented on 05-29-2014 at 2:18 PM
    This plugin doesn't seem to work with the latest version of cordova. Once the plugin is added it seems to ignore the config.xml preference and allow full rotation under IOS.
  • Commented on 05-29-2014 at 2:29 PM
    Not sure what to say. According to the docs it should work on all platforms. The best I can suggest is filing a bug report with a repro case so the team can look at it. This is where you report issues:

    https://issues.apache.org/jira/browse/CB
  • Commented on 05-30-2014 at 12:54 AM
    Hi Raymond, thank you for your answer. This is what I've tried in my early stages of research. It actually works. You can switch on and off the zoom using this technique. However, you can't zoom out a zoomed page/image (or at least I didn't find a way to do it) after having pinched it.
  • Commented on 06-23-2014 at 10:19 PM
    on iOS this plugin allows the phone to orient at will. BUT, if you just set the orientation with this plugin onReady then it will stay that way.

Post Reply

Please refrain from posting large blocks of code as a comment. Use Pastebin or Gists instead. Text wrapped in asterisks (*) will be bold and text wrapped in underscores (_) will be italicized.

Leave this field empty