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

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,, 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;
}, 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)
else if (video.webkitRequestFullScreen)
else if (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;

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!

  • Michael Wager

    Somehow the “webkitfullscreenchange” event is not firing if I go into fullscreen using the native html5-video controls’ fullscreen button on android. Any ideas why? It only fires on closing the fullscreen via back button.

    • http://www.raymondcamdencom/ Raymond Camden

      Nothing comes to mind outside of possibly a bug? Maybe try searching the Chrome bug db?

  • chuang

    i cannot get this to work? where should i put the code? am i missing something.. i installed the plugin.. but cannot get the video to go landscape unless i turn the phone…

    • chuang

      sorry i forgot to say Please

    • http://www.raymondcamdencom/ Raymond Camden

      When you say it doesn’t work, *how* doesn’t it work? Do you get an error in the console? If you aren’t testing w/ Remote Debugging, please do so so you can see the console.

      • chuang

        I will try the remote debugging. sorry this is my first app for phone gap.. there is a lot to set up…

        • http://www.raymondcamdencom/ Raymond Camden

          Go to the About Me page and look at the list of articles. I have some on remote debugging.

          • chuang

            Thank you….

  • Has

    Hi Raymond,

    How could you use the aforementioned plugin in your article above found on PGB so that an app locks the camera api in portrait mode using the screen orientations plugins documentation


    I have utilised your camera picture to canvas with watermark tutorial, but would
    really like the camera to only shoot in portrait.


    • Has

      Sorry that should be


    • http://www.raymondcamdencom/ Raymond Camden

      What did you try?