Timeline and commentary
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 synchronized timeline and commentary.
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 settings file, the
pushenginesection 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}
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.