GUIDE

GUIDE
top

Managing PiP Windows

This topic describes how to show SSSP source video in your application, using picture-in-picture.

You can use picture-in-picture (PiP) to display SSSP source video, like HDMI input, on your application.

All Samsung signage since 2016 support PiPs. PiP is also supported on the TV emulator since Tizen TV Extension 2.1.2.

Prerequisites

To use the TVWindow, and TVAudioControl APIs, the application has to request permission by adding the following privileges to the "config.xml" file:

<tizen:privilege name="http://tizen.org/privilege/tv.window"/> 
<tizen:privilege name="http://tizen.org/privilege/tv.audio"/> 

Creating and Hiding a PiP Window

  • To create a PiP window, call the show() method of the TVWindow API:

    tizen.tvwindow.show(
      function(success){
        console.log('success');
      },
      function(fail){
        console.log('fail');
      },
      ['0px', '0px', '50%', '540px'],
      'MAIN',
    );
    
    Note

    The PiP window is created on top of and covers HTML elements.

  • To hide the PiP window, call the hide() method:

    tizen.tvwindow.hide(
      function(success){
        console.log('success');
      },
      function(fail){
        console.log('fail');	
      }
    );
    

Controlling Audio Volume

The audio volume of the PiP window can be controlled using the volume keys on the remote control, or using the TVAudioControl API:

tizen.tvaudiocontrol.setVolumeUp();

Changing the Video Source

To change the video source of the PiP window, use the setSource() method of the TVWindow API:

tizen.systeminfo.getPropertyValue(
  'VIDEOSOURCE', 
  function(videoSource) {
    console.log('success');

    var connectedVideoSources = videoSource.connected;
    for (var i = 0; i < connectedVideoSources.length; i++) {
      if (connectedVideoSources[i].type === 'HDMI') {
        tizen.tvwindow.setSource(
          connectedVideoSources[i],
          function(success){
            console.log('success');
          },
          function(fail){
            console.log('fail');
          });
        break;
      }
    }
  },
  function(fail){
    console.log('fail');
  }
);
위로가기