Skip to main content

Timeline and commentary

What you learn​

You're instantiating DIVA Player in your web front-end and relying on third party video streaming source.

The goal of this article is to build the simplest front-end to stream a video from your video production with synchronized timeline and commentary.

Before starting​

  • Ensure the video production you rely on is up and running.

  • Set the videoId and the related setting configuration.

  • Ensure that in the setting the pushengine section is available like in the following example:

     "pushEngine": {
    	"configUrl": "https://example.com/fe/config/pushengine/pushengineConfig.json", //mandatory
    	"playByPlayCollectionName": "PlayByPlay", //optional - it can overwrite the default value
    	"playByPlayScopeName": "{v.EventID}.{d.Culture}", //optional - it can to overwrite the default value
    	"editorialCollectionName": "Editorial", //optional - it can to overwrite the default value
    	"editorialScopeName": "{v.id}.{d.Culture}" //optional - it can to overwrite the default value
    }

Dictionary​

Ensure the dictionary file contains the relevant keys.

Analytics events​

Find here the available analytics events for Commentary. Find here the available analytics events for the Timeline markers.

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.