This topic describes how you can define the screen orientation for a Web application, and resize the media player element to match the media orientation.
All Tizen Web application projects must have a "config.xml" file in the project root directory. The configuration file is composed of XML elements, including the <widget> element as its root. The configuration information is used when you install or run the Tizen Web application.
To enable your application use orientation functionality, you must modify the config.xml file:
You can define whether the application supports landscape orientation, portrait orientation, or both. When the physical screen is an orientation that the application does not support, the application is displayed in the defined orientation, padded by blank space.
Key
Value (default in bold)
Description
screen.orientation
"landscape"
App only support landscape mode
"portrait"
App only support portrait mode
"all"
App support both portrait/landscape mode
Table 1. Metadata value configuration
Getting Auto Rotation Support
You can check whether a display rotator is supported or not in your device.
try {
var value = webapis.productinfo.isDisplayRotatorSupported();
console.log("display rotator is supported = " + value);
} catch (error) {
if (e.message.indexOf('undefined') == -1) {
//other error
} else {
//The api is undefined.
}
}
Implementing Screen Rotation
To check whether the media is in landscape orientation:
var objElem = document.createElement('object');
objElem.type = 'application/avplayer';
//Append the object element to your document
document.body.appendChild(objElem);
...
screen.orientation.addEventListener('change', function() {
if (screen.width == 1920) {
objElem.style.width = 1920 + 'px';
objElem.style.height = 1080 + 'px';
webapis.avplay.setDisplayRect(0, 0, 1920, 1080);
} else {
objElem.style.width = 1080 + 'px';
objElem.style.height = 1920 + 'px';
webapis.avplay.setDisplayRect(0, 0, 1080, 1920);
}
});
Manage Your Cookies
We use cookies to improve your experience on our website and to show you relevant
advertising. Manage you settings for our cookies below.
Essential Cookies
These cookies are essential as they enable you to move around the website. This
category cannot be disabled.
Company
Domain
Samsung Electronics
.samsungdeveloperconference.com
Analytical/Performance Cookies
These cookies collect information about how you use our website. for example which
pages you visit most often. All information these cookies collect is used to improve
how the website works.
Company
Domain
LinkedIn
.linkedin.com
Meta (formerly Facebook)
.samsungdeveloperconference.com
Google Inc.
.samsungdeveloperconference.com
Functionality Cookies
These cookies allow our website to remember choices you make (such as your user name, language or the region your are in) and
tailor the website to provide enhanced features and content for you.
Company
Domain
LinkedIn
.ads.linkedin.com, .linkedin.com
Advertising Cookies
These cookies gather information about your browser habits. They remember that
you've visited our website and share this information with other organizations such
as advertisers.
Company
Domain
LinkedIn
.linkedin.com
Meta (formerly Facebook)
.samsungdeveloperconference.com
Google Inc.
.samsungdeveloperconference.com
Preferences Submitted
You have successfully updated your cookie preferences.