Example: TV Portal

It is now time to combine some of the previous examples, and create a simple TV viewing portal. This is not so difficult! Firstly, a new svg tag is introduced. This creates a video window in the page:

<video id='videoplane'
    x="220px"
    y="140"px
    width="608px"
    height="342px"
    preserveAspectRatio="xMidyMid">

Now look at the javascript. The onLoad() function sets up an event listener for "keydown". This is to capture "Up" and "Down button presses for channel zapping. onLoad() then calls createPlayer(). This uses toi.mediaService to create an instance of a media player. With this instance, the portal can call media related functions, such as opening a stream, playing it, fastforwarding and rewinding and so on. See the mediaService documentation for more details.

The mediaPlayer first has its open() function called. A URI (string) is passed to the mediaPlayer.open() function. In this example it is taken from the channel table array defined in the beginning of the file, but you are encouraged to modify this example and combine it with the channeltable example. This will allow you to send a channel table from an Infocast server to your IP-STBs. Typical URI's look like:

  • igmp://224.1.2.3:11111
  • igmp://224.1.2.4:11111&buftime=200
  • rtsp://224.5.6.7:12345
  • http://123.123.123.123/my/streams/?channel=cartoons&stream=hd

You may need special support in your boot image to be able to open and play some of these URI types

The mediaPlayer.play() function is then called, with a pace parameter to indicate what speed the media player should play this URI at. Useful pace parameters are defined as properties of the media player, for example, mediaPlayer.PACE_PLAY, mediaPlayer.PACE_FASTFORWARD and mediaPlayer.PACE_PAUSE.

Call mediaPlayer.releaseInstance() when unloading the portal page.