Synchronized data panels

What you learn

You're instantiating DIVA Player in your web front-end 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 synchronized data panels.

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 the <video id> and the related <settings URL>.

• 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 — get it by exploring Network in the Chrome developer tools — and less than the video duration.