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>