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