Media Player

Initialization

mediaPlayer: null,

createMediaPlayer: function() {
  this.mediaPlayer = toi.mediaService.createPlayerInstance();
  ...
  this.mediaPlayer.addEventListener(
      toi.consts.ToiMediaPlayerBase.ON_STATE_CHANGED,
      this.onMediaPlayerStateChanged);
},

The portal calls ToiMediaService::createPlayerInstance(). The Media Service then returns an instance of a media player, which the portal uses for playing streams, querying the playing content and for setting up listeners on playback events.

The portal can register a listener function for those services and objects which implement addEventListener(). In this example, the portal passes a listener function, and an event identifier, ON_STATE_CHANGED . This event identifier indicates that the listener should be called when the ToiInformationObjectsChangedEvent occurs. In the listener function, this portal triggers its own events to let the other parts of the portal know that the media player changed state, although you could have several listeners for event instead.

The ON_OBJECTS_CHANGED event only occurs when the media player makes a state change that is not commanded by the portal. For example, if the media player unexpectedly changes from STATE_PLAYING to STATE_FAILED due to a network error then the ON_OBJECTS_CHANGED event is fired. But if the portal application commands the media player to make a state change, for instance, changing channels, then the state changes between STATE_CONNECTING and STATE_PLAYING will not trigger events. There is different event identifier for monitoring ALL media player state changes.

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

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>

The only thing to note here is the use of the src attribute. Setting it to toi:// means that the media player, created above, will be connected to this video element, and that when the portal calls mediaplayer.open(streamUrl) then that stream will be played in this video element.