Highlights

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 highlights.

Before starting

• Perform Set up the development environment

• The DIVA Back Office instance you rely on as the video streaming source is up and running.

• Ensure that, in the settings file, the highlights section is available like in the following example with mandatory fields filled in:

  {
  	...,
  	"highlights": {
  		"shortFilter": [ 
  			"Goal" //case-insensitive
  		],
  		"mediumFilter": [ 
  			"GOAL",
  			"REDCARD",
  			"YELLOWCARD"
  		],
  		"longFilter": [
  			"*"
  		]
  	},
  },

• 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
  	"playByPlayCollectionName": "PlayByPlay", //optional - it can overwrite the default value
  	"playByPlayScopeName": "{v.EventID}.{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.