Diva configuration
Configure the DIVA Player​
The DIVA Player requires specific data to operate correctly. The application developer is responsible for ensuring that the following objects are provided during initialisation:
- VideoId: The unique identifier for the video item being played.
- Settings: Configuration data that defines how the DIVA player operates.
- Dictionary: The dictionary will contain translations and text customisations for the user interface.
- VideoData: Playback metadata for the video item being played.
Ask your video engineers team the <video id>
, <settings URL>
and <dictionary URLs>
.
Settings configuration​
Settings are used to provide configuration with which to run a particular video.
All the settings are in a JSON file that can be loaded from a URL as prop of the DivaWebBoAdpater.
The Settings file is composed of different sections, each one with its own properties.
const props = {
settingsUrl: "<settings URL>",
...
}
export const App = () => {
return <DivaWebBoAdapter { ...props } />;
};
For example, the following settings will configure the player to use the English language and disable the commentary filter by chapter:
{
"settings": {
"general": {
"culture": "en-GB",
"isCommentaryFilteredByChapter": false
},
...
}
}
If you're using the Diva Bo Adapter, the settings can be enhanced to configure the different features.
Dictionary configuration​
Ensure that the Dictionary is supplied based on your supported language(s).
All the dictionaries are JSON files, one for each supported language.
The final path of a dictionary file is composed by the language code, that can be loaded from a URL as prop of the DivaWebBoAdpater:
const props = {
languageCode: "en-US",
languageDictionary: "en-US",
...
}
export const App = () => {
return <DivaWebBoAdapter { ...props } />;
};
and the dictionary path, included in the setting file:
{
"settings": {
"translations": {
"vocabularySource": "https://example.com/diva5/dictionaries/{fe.cultureCode}.json"
},
...
}
}
Videodata configuration​
In order to support decoupled OVP provision, The Diva Player requires the video metadata (VideoData) to be retrieved by the integrating application. This data must be passed to DIVA as part of the initialisation process.
It's possible to change the videodata and/or implement front-end business logic by using the VideoMetaDataMap.
If necessary, DIVA can perform interval polling to refresh this data, depending on the requirements of the application, by adding the videoDataPollingInterval property in the setting file.
"settings": {
"videoData": {
"videoDataPollingInterval": 20000,
}
}
Instantiate the DIVA Player​
Once the settings, dictionary, and video metadata are in place, all the elements required to instantiate the DIVA player are ready. Pass these objects during the DIVA player initialisation to create a playback session.
Check the Basic instantiation code to initialise the DIVA session with the DIVA Back Office Adapter.
Mandatory properties​
Property | Description | Type | Default value |
---|---|---|---|
languageCode | Language code for Pushengine | string | - |
libs | Object containing the external libraries' url lazy loaded by DIVA only when needed. Libs reference | object | - |
settingsUrl | The URL of the settings file | string | - |
videoId | The video Id or List of video Ids DIVA will open at startup (max 2 strings) | string | string[] |
Other Optional properties​
Property | Type | Default | Description |
---|---|---|---|
autoplay | boolean | true | It specifies whether to autoplay DIVA. |
bitratePreferences |
|
| max, min, starting bitrate (-1 means disabled). |
customIcons | Record<string, string> | {} | Custom icons reference |
daiImaAdTagParameters | { [key: string]: string } | {} | Additional tag params for google DAI. For example tfua: 1 (Tag For Users under the Age of Consent in Europe) and npa: 1 |
dataParsingInterval | number | 3000 | Pushengine Data parsing interval |
debug | boolean | false | It enables debug panel in chromecast |
deepLinkType | string: 'relative' | 'absolute' | 'relative' | Type of deeplink to apply at startup: relative to the video start (or trimIn) or absolute. |
deepLinkValue | (string | number)[] | [] | Value of deeplink to apply at startup: |
detectAdBlock | boolean | false | If true it raises an error if there's an AD and it's blocked by an ad blocker. |
fairplayOverrides |
| {} | Overrides for fairplay DRM: headers, query params, license request parsing |
fetchHlsManifest | boolean | true | If true Diva does a fetch to get the Hls manifest and parse it (for example to get the video thumbnails track). Set false to avoid double manifest request. |
forceAutoplayMuted | boolean | true | If false and autoplay is not supported DIVA will wait for manual play. |
fullscreenContainerSelector | string | NA | Used to override the container that will go in fullscreen. Used in case of menu panels plugins like LiveLike Chat. This is beacause plugins are not injected inside main DIVA DOM element, but they are placed on top of it, so in this case the container that will go to fullscreen will have to wrap both DIVA and the plugin panel. |
hlsJsConfigOverrides | { any } | {} | Overrides for hls.js video library setup config |
keyboardActive | boolean | false | It enables DIVA keyboard shortcuts default mapping |
mediaAnalyticsEnabled | boolean | false | It enables media Analytics in Chromecast receiver |
multiviewMode | string: 'multiview' | 'pip' | 'multiview' | How to display the second video in case of multiple videoIds at startup. Possibile values are multiview and pip. |
muted | boolean | false | It specifies whether to start DIVA muted or not. |
parameters | { [key: string]: string } | undefined | Map of additional keys to add to the path resolver. Input keys will be saved inside resolver as "settings.<key>" |
preferredAudioTrackName | string | NA | Starting selector for the audiotracks |
preferredCCTrackName | string | NA | Starting selector for the closed captions |
shakaConfigOverrides | { any } | {} | Overrides for shaka video library setup config |
useCredential | boolean | false | Used by hls.js for xhrSetup. |
videoDebug | boolean | false | It enables debug mode of the video libraries (hlsjs / shaka) |
volume | number [0 - 1] | 100 | Startup volume. |
widevineOverrides |
| {} | Overrides for widevine DRM |
Callbacks​
Property | Type | Default | Description |
---|---|---|---|
setAPI | function | NA | It exposes DIVA APIs |
setPluginsManager | function | NA | It exposes DIVA Plugins Manager APIs: register, remove and change the
status of plugins |
onLog | function | NA | Logs callback |
onVideoIdChanges | function | NA | Called when current videos change |
onVideoMetadataChanges | function | NA | Called when videometadata of the main video changes |
onAnalyticEvent | function | NA | Callback for generic analytic events |
onMediaAnalyticEvent | function | NA | Callback for media analytic events |
onBackButtonClick | function | NA | Called when the user clicks on the back button during End of Play Note: The implementation of this callback affects the presence of the button itself |
onPlaybackRate | function | NA | Called when playback speed of the main video changes |
onPlayerPosition | function | NA | Called when player position (both relative to the video logical start
and unix timecode) of the main video changes
|
onPlayerMaxPosition | function | NA | Called when player max position (both relative to the video logical
start and unix timecode) of the main video changes
|
onPlayerState | function | NA | Called when player state of the main video changes |
onPreferredAudioTrack | function | NA | Called when the user select an audiotrack |
onPreferredCCTrack | function | NA | Called when the user select a closed caption |
onPreferredVideoQuality | function | NA | Called when the user select a video quality |
onVideoError | function | NA | Called on DIVA errors
|
onVideoEnd | function | NA | Called when video end is reached |
onPlayerActionRequest | function | NA | Callback for actions called by API: play, pause, seek, seekBack,
seekFroward, seekPercentage, seekAbsolute |
onPlaybackSession | function | NA | Called on DIVA playback session changed.
|
Full configuration example​
Full configuration example
{
autoplay: true,
bitratePreferences: {
max: -1,
min: -1,
starting: -1,
useLast: false
},
customIcons: {
watchTogether: "",
watchTogether_active: "<svg width=\"100%\" height=\"100%\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M12 10.5556C14.0363 10.5556 15.6923 8.86122 15.6923 6.77778C15.6923 4.69433 14.0363 3 12 3C9.96369 3 8.30769 4.69433 8.30769 6.77778C8.30769 8.86122 9.96369 10.5556 12 10.5556ZM19.3846 12.4445C20.9114 12.4445 22.1538 11.1732 22.1538 9.61112C22.1538 8.04901 20.9114 6.77779 19.3846 6.77779C17.8578 6.77779 16.6154 8.04901 16.6154 9.61112C16.6154 11.1732 17.8578 12.4445 19.3846 12.4445ZM7.38461 9.61112C7.38461 11.1732 6.14215 12.4445 4.61538 12.4445C3.08861 12.4445 1.84615 11.1732 1.84615 9.61112C1.84615 8.04901 3.08861 6.77779 4.61538 6.77779C6.14215 6.77779 7.38461 8.04901 7.38461 9.61112ZM23.0769 19.0556C23.5874 19.0556 24 18.6324 24 18.1111C24 15.5073 21.9295 13.3889 19.3846 13.3889C18.35 13.3889 17.3624 13.742 16.5603 14.3765C15.537 13.3324 14.1743 12.6363 12.6587 12.4786C12.4421 12.456 12.2223 12.4444 12 12.4444C11.7774 12.4444 11.5573 12.456 11.3404 12.4786C9.82514 12.6366 8.46284 13.3326 7.43968 14.3765C6.63758 13.742 5.65002 13.3889 4.61539 13.3889C2.07046 13.3889 1.90735e-06 15.5073 1.90735e-06 18.1111C1.90735e-06 18.6324 0.412617 19.0556 0.923079 19.0556H5.53846C5.53846 19.5769 5.95108 20 6.46154 20H17.5385C17.6023 20 17.6645 19.9934 17.7247 19.9808C18.1456 19.8927 18.4615 19.5117 18.4615 19.0556H23.0769Z\"\n fill=\"green\"\n />\n </svg>",
watchTogether_active_interacting: "<svg width=\"100%\" height=\"100%\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M12 10.5556C14.0363 10.5556 15.6923 8.86122 15.6923 6.77778C15.6923 4.69433 14.0363 3 12 3C9.96369 3 8.30769 4.69433 8.30769 6.77778C8.30769 8.86122 9.96369 10.5556 12 10.5556ZM19.3846 12.4445C20.9114 12.4445 22.1538 11.1732 22.1538 9.61112C22.1538 8.04901 20.9114 6.77779 19.3846 6.77779C17.8578 6.77779 16.6154 8.04901 16.6154 9.61112C16.6154 11.1732 17.8578 12.4445 19.3846 12.4445ZM7.38461 9.61112C7.38461 11.1732 6.14215 12.4445 4.61538 12.4445C3.08861 12.4445 1.84615 11.1732 1.84615 9.61112C1.84615 8.04901 3.08861 6.77779 4.61538 6.77779C6.14215 6.77779 7.38461 8.04901 7.38461 9.61112ZM23.0769 19.0556C23.5874 19.0556 24 18.6324 24 18.1111C24 15.5073 21.9295 13.3889 19.3846 13.3889C18.35 13.3889 17.3624 13.742 16.5603 14.3765C15.537 13.3324 14.1743 12.6363 12.6587 12.4786C12.4421 12.456 12.2223 12.4444 12 12.4444C11.7774 12.4444 11.5573 12.456 11.3404 12.4786C9.82514 12.6366 8.46284 13.3326 7.43968 14.3765C6.63758 13.742 5.65002 13.3889 4.61539 13.3889C2.07046 13.3889 1.90735e-06 15.5073 1.90735e-06 18.1111C1.90735e-06 18.6324 0.412617 19.0556 0.923079 19.0556H5.53846C5.53846 19.5769 5.95108 20 6.46154 20H17.5385C17.6023 20 17.6645 19.9934 17.7247 19.9808C18.1456 19.8927 18.4615 19.5117 18.4615 19.0556H23.0769Z\"\n fill=\"var(--primary-colour)\"\n />\n </svg>",
watchTogether_interacting: "<svg width=\"100%\" height=\"100%\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M23.0769 19.5924C23.5874 19.5924 24 19.1788 24 18.6693C24 16.1244 21.9295 14.0539 19.3846 14.0539C18.35 14.0539 17.3624 14.399 16.5603 15.0192C15.6754 14.1368 14.5368 13.5087 13.2649 13.2552C12.8558 13.1736 12.4328 13.1308 12 13.1308C10.2221 13.1308 8.60926 13.8529 7.43964 15.0192C6.63755 14.3991 5.65 14.0539 4.61539 14.0539C2.07047 14.0539 0 16.1244 0 18.6693C0 19.1789 0.412616 19.5924 0.923079 19.5924C1.43354 19.5924 1.84616 19.1789 1.84616 18.6693C1.84616 17.1426 3.08862 15.9001 4.61539 15.9001C5.24571 15.9001 5.84466 16.116 6.3283 16.4989C5.82487 17.4182 5.53842 18.4724 5.53842 19.5924C5.53842 19.7834 5.59645 19.961 5.6959 20.1084C5.76843 20.2158 5.86301 20.3072 5.97318 20.376C6.11476 20.4644 6.28211 20.5155 6.46155 20.5155C6.97201 20.5155 7.38463 20.1019 7.38463 19.5924C7.38463 17.0475 9.4551 14.977 12 14.977C13.2725 14.977 14.4263 15.4946 15.262 16.3303C15.482 16.5503 15.6799 16.7922 15.8521 17.0526C16.3343 17.7816 16.6154 18.6548 16.6154 19.5924C16.6154 19.8471 16.7185 20.0779 16.8855 20.245C16.9359 20.2954 16.9922 20.3401 17.0531 20.3778C17.1941 20.4651 17.3603 20.5155 17.5385 20.5155C18.049 20.5155 18.4616 20.1019 18.4616 19.5924C18.4616 18.4725 18.1751 17.4182 17.6717 16.4989C18.1553 16.116 18.7543 15.9 19.3846 15.9C20.9114 15.9 22.1538 17.1425 22.1538 18.6693C22.1538 19.1788 22.5665 19.5924 23.0769 19.5924Z\"\n fill=\"var(--primary-colour)\"\n />\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M22.1538 10.3616C22.1538 11.8883 20.9114 13.1308 19.3846 13.1308C17.8578 13.1308 16.6154 11.8883 16.6154 10.3616C16.6154 8.8348 17.8578 7.59234 19.3846 7.59234C20.9114 7.59234 22.1538 8.8348 22.1538 10.3616ZM20.3077 10.3616C20.3077 9.85296 19.8941 9.4385 19.3846 9.4385C18.8751 9.4385 18.4615 9.85296 18.4615 10.3616C18.4615 10.8702 18.8751 11.2847 19.3846 11.2847C19.8941 11.2847 20.3077 10.8702 20.3077 10.3616Z\"\n fill=\"var(--primary-colour)\"\n /><svg width=\"100%\" height=\"100%\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M23.0769 19.5924C23.5874 19.5924 24 19.1788 24 18.6693C24 16.1244 21.9295 14.0539 19.3846 14.0539C18.35 14.0539 17.3624 14.399 16.5603 15.0192C15.6754 14.1368 14.5368 13.5087 13.2649 13.2552C12.8558 13.1736 12.4328 13.1308 12 13.1308C10.2221 13.1308 8.60926 13.8529 7.43964 15.0192C6.63755 14.3991 5.65 14.0539 4.61539 14.0539C2.07047 14.0539 0 16.1244 0 18.6693C0 19.1789 0.412616 19.5924 0.923079 19.5924C1.43354 19.5924 1.84616 19.1789 1.84616 18.6693C1.84616 17.1426 3.08862 15.9001 4.61539 15.9001C5.24571 15.9001 5.84466 16.116 6.3283 16.4989C5.82487 17.4182 5.53842 18.4724 5.53842 19.5924C5.53842 19.7834 5.59645 19.961 5.6959 20.1084C5.76843 20.2158 5.86301 20.3072 5.97318 20.376C6.11476 20.4644 6.28211 20.5155 6.46155 20.5155C6.97201 20.5155 7.38463 20.1019 7.38463 19.5924C7.38463 17.0475 9.4551 14.977 12 14.977C13.2725 14.977 14.4263 15.4946 15.262 16.3303C15.482 16.5503 15.6799 16.7922 15.8521 17.0526C16.3343 17.7816 16.6154 18.6548 16.6154 19.5924C16.6154 19.8471 16.7185 20.0779 16.8855 20.245C16.9359 20.2954 16.9922 20.3401 17.0531 20.3778C17.1941 20.4651 17.3603 20.5155 17.5385 20.5155C18.049 20.5155 18.4616 20.1019 18.4616 19.5924C18.4616 18.4725 18.1751 17.4182 17.6717 16.4989C18.1553 16.116 18.7543 15.9 19.3846 15.9C20.9114 15.9 22.1538 17.1425 22.1538 18.6693C22.1538 19.1788 22.5665 19.5924 23.0769 19.5924Z\"\n fill=\"var(--primary-colour)\"\n />\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M22.1538 10.3616C22.1538 11.8883 20.9114 13.1308 19.3846 13.1308C17.8578 13.1308 16.6154 11.8883 16.6154 10.3616C16.6154 8.8348 17.8578 7.59234 19.3846 7.59234C20.9114 7.59234 22.1538 8.8348 22.1538 10.3616ZM20.3077 10.3616C20.3077 9.85296 19.8941 9.4385 19.3846 9.4385C18.8751 9.4385 18.4615 9.85296 18.4615 10.3616C18.4615 10.8702 18.8751 11.2847 19.3846 11.2847C19.8941 11.2847 20.3077 10.8702 20.3077 10.3616Z\"\n fill=\"var(--primary-colour)\"\n />\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M15.6923 7.59234C15.6923 9.62865 14.0363 11.2847 12 11.2847C9.96366 11.2847 8.30766 9.62865 8.30766 7.59234C8.30766 5.55603 9.96366 3.90002 12 3.90002C14.0363 3.90002 15.6923 5.55603 15.6923 7.59234ZM13.8461 7.59234C13.8461 6.57418 13.0181 5.74618 12 5.74618C10.9818 5.74618 10.1538 6.57418 10.1538 7.59234C10.1538 8.6105 10.9818 9.4385 12 9.4385C13.0181 9.4385 13.8461 8.6105 13.8461 7.59234Z\"\n fill=\"var(--primary-colour)\"\n />\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M1.84616 10.3616C1.84616 11.8884 3.08862 13.1309 4.61539 13.1309C6.14217 13.1309 7.38463 11.8884 7.38463 10.3616C7.38463 8.83485 6.14217 7.59239 4.61539 7.59239C3.08862 7.59239 1.84616 8.83485 1.84616 10.3616ZM3.69231 10.3616C3.69231 9.85301 4.10585 9.43854 4.61539 9.43854C5.12493 9.43854 5.53847 9.85301 5.53847 10.3616C5.53847 10.8702 5.12493 11.2847 4.61539 11.2847C4.10585 11.2847 3.69231 10.8702 3.69231 10.3616Z\"\n fill=\"var(--primary-colour)\"\n />\n </svg>\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M15.6923 7.59234C15.6923 9.62865 14.0363 11.2847 12 11.2847C9.96366 11.2847 8.30766 9.62865 8.30766 7.59234C8.30766 5.55603 9.96366 3.90002 12 3.90002C14.0363 3.90002 15.6923 5.55603 15.6923 7.59234ZM13.8461 7.59234C13.8461 6.57418 13.0181 5.74618 12 5.74618C10.9818 5.74618 10.1538 6.57418 10.1538 7.59234C10.1538 8.6105 10.9818 9.4385 12 9.4385C13.0181 9.4385 13.8461 8.6105 13.8461 7.59234Z\"\n fill=\"var(--primary-colour)\"\n />\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M1.84616 10.3616C1.84616 11.8884 3.08862 13.1309 4.61539 13.1309C6.14217 13.1309 7.38463 11.8884 7.38463 10.3616C7.38463 8.83485 6.14217 7.59239 4.61539 7.59239C3.08862 7.59239 1.84616 8.83485 1.84616 10.3616ZM3.69231 10.3616C3.69231 9.85301 4.10585 9.43854 4.61539 9.43854C5.12493 9.43854 5.53847 9.85301 5.53847 10.3616C5.53847 10.8702 5.12493 11.2847 4.61539 11.2847C4.10585 11.2847 3.69231 10.8702 3.69231 10.3616Z\"\n fill=\"var(--primary-colour)\"\n />\n </svg>",
},
daiImaAdTagParameters: undefined,
debug: true,
deepLinkType: undefined,
deepLinkValue: ["", ""],
detectAdBlock: false,
dictionary: {
messages: {
default_audio_selected: "Default Audio",
diva_360clips: "360 CLIPS",
diva_360multicam: "360 MULTICAM",
...
},
fairplayCertificatePath: "",
forceAutoplayMuted: true,
fullscreenContainerSelector: "#diva-container",
keyboardActive: true,
libs: {
googleCast: "https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1",
googleDAI: "https://imasdk.googleapis.com/js/sdkloader/ima3_dai.js",
googleIMA: "https://imasdk.googleapis.com/js/sdkloader/ima3.js",
hlsJs: "https://cdn.jsdelivr.net/npm/hls.js@1.5.7",
mux: "https://cdnjs.cloudflare.com/ajax/libs/mux.js/6.2.0/mux.min.js",
shaka: "https://ajax.googleapis.com/ajax/libs/shaka-player/4.7.11/shaka-player.compiled.js",
threeJs: "https://cdnjs.cloudflare.com/ajax/libs/three.js/0.148.0/three.min.js",
},
mediaAnalyticsEnabled: false,
multiviewMode: "multiview",
muted: true,
onAnalyticEvent: console.log,
onLog: console.log,
onMediaAnalyticEvent: console.log,
onPlaybackRate: console.log,
onPlayerActionRequest: console.log,
onPlayerMaxPosition: console.log,
onPlayerPosition: console.log,
onPlayerState: console.log,
onPreferredAudioTrack: console.log,
onPreferredCCTrack: console.log,
onPreferredVideoQuality: console.log,
onVideoError: console.log,
onVideoIdChanges: console.log,
onVideoMetadataChanges: console.log,
preferredAudioTrackName: "",
preferredCCTrackName: "",
preferredVideoQuality: "",
setAPI: (api) => {
// Here you can save a reference to DIVA APIs
window.divaAPI = api;
},
setPluginsManager: (pluginsMng) => {
// Here you can save a reference to DIVA plugins manager
window.divaPluginsMng = pluginsMng;
},
setting: {
general: {
culture: "en-GB",
isCommentaryFilteredByChapter: false
}
},
useCredential: false,
videoDebug: false,
videoId: ['<video_id>'],
videoMetadataProvider: (videoId, currentVideoMetadata, playbackState) => {
// returning a Promise of a VideoMetadata
return new Promise((resolve, reject) => {
resolve({
title: "<video_title>",
videoId: '<video_id>',
sources: [
{
format: "HLS",
uri: "https://<url>"
}
],
...
});
});
},
volume: 100
}