Sero Guide
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.
Supported TV Model : Tizen 6.0(2021) or later
Related Info
Defining the Value of Screen 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:
<tizen:metadata key="http://samsung.com/tv/metadata/screen/orientation" value="all"/>
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:
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); } });
-