Skip to main content

Custom data panels

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 custom data panels (panels that can be refreshed but not synchronized with the timeline).

Before starting​

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

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

  • Ensure that, in the VideoMetadata the following section is available:

    "customDataPanels": [
    	{
    		"feedUrl": "https://example.com/customOverlay/standing.html",
    		"menu": "Serie A STANDING"
    	},
    	...
    ],

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.