Simple Picture in Picture page

This example shows how to create a PiP media player. Upon loading the portal creates a regular media player and a PiP media player. These then opens separate multicast streams. A videoplane with index 0 is always connected to the regular media player. Index 0 is also the default index for videoplane tags. The PiP media player is connected to the videoplane with index 1.

The PiP media player behaves, although with some restrictions, like a regular media player.

<html>
<head>
<embed type="application/x-motorola-toi" hidden="true">

<script type="text/javascript">
var regularPlayer;
var regularChannelUri = "224.5.5.1:11111";
var pipPlayer;
var pipChannelUri = "224.5.5.2:11111";

function addRegularVideoplane()
{
  var regularVideoDiv = document.getElementById("regularVideoDiv");
  regularVideoDiv.innerHTML = "<videoplane id='regularVideoPlane' "
                            + "style='position: fixed; "
                            + "left: 0; "
                            + "top: 0; "
                            + "width: 100%; "
                            + "height: 100%; "
                            + "z-index:1;' />";
  document.body.appendChild(regularVideoDiv);
}

function createRegularPlayerInstanceAndPlay()
{
  try {
    regularPlayer = toi.mediaService.createPlayerInstance();
    regularPlayer.open(regularChannelUri);
    regularPlayer.play(1000);
  }
  catch(e) {
    alert("Exception caught when creating regular player: " + e);
  }
}

function createRegularPlayer()
{
  addRegularVideoplane();
  createRegularPlayerInstanceAndPlay();
}

function addPipVideoplane()
{
  var pipVideoDiv = document.getElementById("pipVideoDiv");
  pipVideoDiv.innerHTML = "<videoplane id='pipvideoplane' index=1 "
                        + "style='position: fixed; left: 960px; "
                        + "top: 526px; "
                        + "height: 165px; "
                        + "width: 220px; "
                        + "z-index:2;' />";
  document.body.appendChild(pipVideoDiv);
}

function createPipPlayerInstanceAndPlay()
{
  try {
    pipPlayer = toi.mediaService.createPipPlayerInstance();
    pipPlayer.open(pipChannelUri);
    pipPlayer.play(1000);
  }
  catch(e) {
    alert("Exception caught when creating PiP player: " + e);
  }
}

function createPipPlayer() {
  addPipVideoplane();
  createPipPlayerInstanceAndPlay();
}

function releaseRegularPlayer()
{
  try {
    if (regularPlayer) {
      regularPlayer.releaseInstance();
      regularPlayer = null;
    }
  }
  catch(ex) {
    alert("Exception when releasing player: " + ex);
  }
}

function releasePipPlayer()
{
  try {
    if (pipPlayer) {
      pipPlayer.releaseInstance();
      pipPlayer = null;
    }
  }
  catch(ex) {
    alert("Exception when releasing pip player: " + ex);
  }
}

function onLoad()
{
  // Add the npruntime TOI/JS plugin
  var html = document.createElement("embed");
  html.id = "embed1";
  html.type = "application/x-motorola-toi";
  html.setAttribute("hidden", "true");
  document.body.appendChild(html);

  createRegularPlayer();
  createPipPlayer();
}

function onUnLoad()
{
  try {
    releaseRegularPlayer();
    releasePipPlayer();
  }
  catch(e) {
    alert("Exception caught when doing onUnLoad: " + e);
  }
}
</script>
</head>

<body onLoad="onLoad();" onUnLoad="onUnLoad();">

<div id="regularVideoDiv"></div>
<div id="pipVideoDiv"></div>

</body>
</html>