Skip to main content

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

  • 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](/docs/divadoc/5.8/web/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.