Sero Guide
Samsung Orientation API for Sero TV
This topic describes how you can define the screen orientation for a TV application, and resize the media player element to match the media orientation.
Quick Start
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:
Define the value of screen orientation.
<tizen:metadata key="http://samsung.com/tv/metadata/screen/orientation" value="all"/>
Metadata value Configuration
Here's what each value means:
Key | Value | Default | Contents |
---|---|---|---|
screen.orientation | landscape | O | App only support landscape mode |
portrait | App only support portrait mode | ||
all | App support both portrait/landscape mode |
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.
Orientation Mode 1:
orientation: landscape
Orientation Mode 2:
orientation: portrait
Orientation Mode 3:
orientation: all
Get auto rotation support
This method check whether display rotator is supported or not.
-
Include the WebAPI library in the “index.html” file:
<script type="text/javascript" src="$WEBAPIS/webapis/webapis.js"></script>
-
Using JavaScript:
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:
window.matchMedia("(orientation: landscape)").matches
-
To change the video player size based on the screen orientation, change the CSS style attributes:
-
For media playback using the HTML5
<video>
element:-
Using CSS:
@media screen and (orientation: landscape) { video { position: absolute; top: 0px; left: 0px; width: 1920px; height: 1080px; background: black; } } @media screen and (orientation: portrait) { video { position: absolute; top: 0px; left: 0px; width: 1080px; height: 1920px; background: black; } }
-
Using JavaScript:
screen.orientation.addEventListener('change', function() { var videoElem = document.getElementById('yourVideoElem'); if (screen.width == 1920) { videoElem.style.width = 1920 + 'px' videoElem.style.height = 1080 + 'px' } else { videoElem.style.width = 1080 + 'px' videoElem.style.height = 1920 + 'px' } });
-
-
For media playback using the AVPlay API:
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); } });
-
If you have questions about the API or its features, create an issue ticket at "Diamond > Partner Support > Issue Board > Register Issue".
Related Info
- Configuring Web Applications
- Using Video Elements
- Using AVPlay
- Tizen Sero SDK (for Samsung partners)