Showing PiP Overlays

This topic describes how your application can show overlays on a picture-in-picture (PiP) window.

Related Info

Samples

Picture-in-picture overlays allow you to show HTML elements on top of a PiP window in an application. For more information on the PiP implementation, see Managing the PiP Window.

The following figure shows HTML elements as overlays on a PiP window.

Figure 1. PiP overlays

All Samsung TVs since 2016 support PiP overlays. PiP overlays are also supported on the TV emulator since Tizen TV Extension 2.1.2.

Prerequisites

To use the TVWindow API, the application has to request permission by adding the following privilege to the "config.xml" file:

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

Showing Overlay Elements

To show HTML overlay elements on top of the PiP window, you must move the PiP window behind the overlays. When showing the PiP window, pass the BEHIND parameter to the show() method of the TVWindow API:

tizen.tvwindow.show(
  function(success){
    console.log('success');
  },
function(fail){
    console.log('fail');
  },
  ['0px', '0px', '1920px', '1080px'],
  'MAIN',
  'BEHIND'
);