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

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

If you have questions about the API or its features, create an issue ticket at "Diamond > Partner Support > Issue Board > Register Issue".