DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones AWS Cloud
by AWS Developer Relations
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones
AWS Cloud
by AWS Developer Relations

Trending

  • Security Challenges for Microservice Applications in Multi-Cloud Environments
  • How AI Will Change Agile Project Management
  • What Is JHipster?
  • 10 Traits That Separate the Best Devs From the Crowd

Trending

  • Security Challenges for Microservice Applications in Multi-Cloud Environments
  • How AI Will Change Agile Project Management
  • What Is JHipster?
  • 10 Traits That Separate the Best Devs From the Crowd

PhoneGap Tip: Temporarily Changing Orientation for Video in a Portrait Only Application

Raymond Camden user avatar by
Raymond Camden
·
May. 28, 14 · Interview
Like (0)
Save
Tweet
Share
3.95K Views

Join the DZone community and get the full member experience.

Join For Free

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!

application

Published at DZone with permission of Raymond Camden, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Trending

  • Security Challenges for Microservice Applications in Multi-Cloud Environments
  • How AI Will Change Agile Project Management
  • What Is JHipster?
  • 10 Traits That Separate the Best Devs From the Crowd

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com

Let's be friends: