Skip to main content

Highlights

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 third party video production with highlights.

Before starting​

  • The DIVA Back Office instance you rely on as the video streaming source is up and running.
  • Ensure that in the setting the highlights section is available like in the following example with mandatory fields filled in:
{
...,
"highlights": {
	"shortFilter": [ 
		{friendlyName: 'FirstPeriodStart', event: 'period'},
		"Goal" //case-insensitive
	],
	"mediumFilter": [ 
		"GOAL",
		"REDCARD",
		"YELLOWCARD"
	],
	"longFilter": [
		"*"
	],
	"defaultEventDuration" : 10000, // 10 seconds in millis (it overrides 15 seconds default)
	"customEventDuration ": {
		"GOAL": 30000, // 30 seconds in millis
		"SUBSTITUTION": 15000 // 15 seconds in millis
	}
},
},

Is possible to have all the events in the collection using the asterisk (*), like the example above on longFilter.

If no one filter is set, the Highlights Mode will be disabled.

If customEventDuration > <event code> is not set, the default value is defaultEventDuration.
If defaultEventDuration is not set, the default value is 15 seconds (15000 ms).

  • Ensure that in the setting 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
}
  • Ensure that in the playByPlay file we have the relevant information to "crop" the highlights:
{
	"TimeCode": "2024-07-24T01:23:26Z",
	"SeekOffset": "-00:00:10",
}

Highlights duration​

When an event occurs, it arrives with a TimeCode and a setting that defines how many seconds to add before the event (SeekOffset).

The highlight duration can be customized for all the events by adding defaultEventDuration value (in ms) or, for specific events, customEventDuration > <event code> (case insensitive).
Otherwise, the highlights play for 15 seconds by default.

The highlight video will start at TimeCode- SeekOffset for a duration of SeekOffset + calculated duration (customEventDuration > <event code> or defaultEventDuration or 15 sec)

Dictionary​

Ensure the dictionary file contains the relevant keys.

Analytics events​

Find here the available analytics events for the Highlights.

Instantiation​

There's no code to add to the Basic instantiation code.