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

  1. To check whether the media is in landscape orientation:

    window.matchMedia("(orientation: landscape)").matches

  2. 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);
  }
});