Snap stats

What you learn

You're instantiating DIVA Player in your app and relying on DIVA Back Office as the video streaming source.

The goal of this article is to build the simplest front-end to stream a video from the DIVA Back Office with snapstats.

Before starting

• Set up the development environment.

• Ensure the DIVA Back Office instance you rely on is up and running.

• Ask your video engineers team <videoId>, <settingsURL>, <languageCountryCode>, <userToken> and <sharedKey>.

• In the menu XML definition, ensure that the snapstats element has the mode="contextual" attribute like in the following example:

  <HARList id="menu">
  	<HAR id="snapstats" trackingid="snapstats" title=" {diva_snap_stats} " navigation_link="nav('snapstats');" mode="contextual"/>
  	<HAR id="lineups" trackingid="lineups" title="Lineups" navigation_link="nav('lineups');"/>
  	<HAR id="teamsstats" trackingid="teamsstats" title="Team stats" navigation_link="nav('teamsstats');"/>
  	<HAR id="playersstats" trackingid="playersstats" title="Top players" navigation_link="nav('playersstats');"/>
  </HARList>

  Warning: Only one menu element can have the mode="contextual" attribute. In case many items have it, only the first one displays as snapstats (i.e., over the video viewport).

• Ensure that, in the settings file, the syncDataPanels section is available like in the following example with mandatory fields filled in:

  	"syncDataPanels": {
  	"dataFolderUrl": https://example.com/fe/config/pushengine/OverlayLiteData/{V.EventId}.{d.Culture}/{OverlayID}.xml", //mandatory, 
  	"renderingFolderUrl": "https://example.com/fe/config/pushengine/RenderingLiteData{n:ResourceURI}", //mandatory,  
  	"trustedOrigins": "https://example.com" //...
  },

• Ensure that, in the settings file, the pushengine section is available like in the following example with mandatory fields filled in:

   "pushEngine": {
  	"configUrl": "https://example.com/fe/config/pushengine/pushengineConfig.json", //mandatory
  	"dataPanelsCollectionName": "OverlayLiteData", //optional - it can overwrite the default value
  	"dataPanelsScopeName": "{v.EventID}.{d.Culture}", //optional - it can to overwrite the default value
  }

Instantiation

There's no code to add to the Basic instantiation code.

Troubleshooting tips

In case the timeline and commentary don't show data as expected, double-check that pushengine data timecodes are equal or greater than programDateTime in the videoMetadata and less than the video duration.