Skip to main content

Highlights

What you learn​

You're instantiating DIVA Player in your web front-end 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 — get it by exploring Network in the Chrome developer tools — and less than the video duration.