Skip to main content

Snap stats

What you learn​

You're instantiating DIVA Player in your web front-end and relying on third party video streaming source.

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

Before starting​

  • Ensure the video production you rely on is up and running.
  • Set the videoId and the related setting configuration.
  • 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 setting 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 setting 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 — get it by exploring Network in the Chrome developer tools — and less than the video duration.