Media Player

HTML

The index.html contains the following video tag:

<video id="videoWindow" src="toi://"
       class="widget-element right-top-window fullscreen"
       style="object-fit: fill">
</video>

KreaTV supports standard HTML5 video tags. To play different streams, the JavaScript in the page needs to change the src property above.

In addition to the standard behavior, KreaTV also allows much more powerful and flexible control over media playing than that offered just through the video tag. KreaTV provides the TOI API, containing a media player, which allows trickplay and timeshift features (depending on the stream capabilities), exposes multiple audio and subtitle language tracks, can automatically select these, and provides asynchronous events when the stream or player change state (such as network errors, pausing, rewinding, or reaching the end of the stream).

To take advantage of these features, the first thing to do is note the special use of the src attribute in the HTML above. Setting src to toi:// means that the KreaTV media player will be connected to this video element. Once done, the portal can now use the media player, for example, calling mediaplayer.quickPlay(streamUrl) to play a particular stream.

TOI media player initialization

mediaPlayer = toi.mediaService.createPlayerInstance();

Control and communication with the hardware media player is done through an instance of the media player in the portal. During initialization, the portal asks the Media Service for an instance of the media player with the ToiMediaService.createPlayerInstance() function call. The Media Service then returns the instance, which the portal uses for playing streams, querying the playing content and for setting up listeners on playback events. The portal keeps the instance throughout its lifetime, calling releaseInstance() when finally unloaded.

Registering listeners

The TOI API is asynchronous and event-driven. When some notible thing occurs, such as the currently playing stream reaching its end, an event is generated. The portal application can register a listener function for this specific event identifier. The KreaTV platform calls the listener function, passing some details about the specific event as an argument to that listener function. You can find more info on events on the Asynchronous operations page.

Here, the example portal registers a listener function for ON_STATE_CHANGED:

mediaPlayer.addEventListener(
  toi.consts.ToiMediaPlayerBase.ON_STATE_CHANGED,
  onMediaPlayerStateChanged);

It is possible for other parts of the portal to also register listener functions on the same event, in the same way. You will see this technique in use throughout the example portal. An error message component registers an event to watch for the media player changing into a failed state. Similarly, the power management service registers listeners to know when the media player cleanly shuts down, before putting the STB into standby.

You can find a lot more information about media players, and media player state changes on the Media Service page.