Skip to main content

Synchronized data panels

What you learn​

You're instantiating DIVA Player in your Roku app and relying on DIVA Back Office as the video streaming source.

The goal of this article is to build the simplest DIVA Player in your Roku app to stream a video from the DIVA Back Office with synchronized data panels.

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 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,
    },

  • 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
    }

Dictionary​

Ensure the dictionary file contains the relevant keys.

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.