Managing PiP Windows

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

---

Related Info

• TVAudioControl API

• TVWindow API

---

You can use picture-in-picture (PiP) to display TV source video, such as a TV channel or HDMI input, on your application.

All Samsung TVs since 2015 support PiP. 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',
  );
  

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