Skip to main content

Web SDK 5.8

This guide explains how to integrate DIVA into your web application.

Integration demo

A VXP GitHub account is required to gain access to:

Requirements​

Our SDK is designed to be used on modern browsers:

  • Chrome
  • Firefox
  • Edge (Chromium)
  • Safari
  • Mobile Chrome
  • Mobile Safari

Provisioning​

Settings, with which DIVA will be configured.
The Dictionary, which will provide DIVA with the translations and localisations for the application.
The VideoMetaData, which provides DIVA with information about the playback for a specific item.

For more information about these items, please consult the Documentation.

This data can be provided as the application developer requires, but will need to return SettingClean, DictionaryClean and VideoMetaDataClean objects respectively in order to work with the DIVA configuration and initialise the player objects.

For the purpose of this example we will be using raw json, but the provision of the data can be provided from any available source.

We can as an example instantiate a mock 'video' item, from a potential video catalog. Crucial to DIVA 5 is the provision of an ID with which to retrieve settings information and a videoID to retrieve the VideoMetaData.

const videos = {
data: [
{
id: "item-1",
image: "./images/fifa-world-cup.jpg",
title: "France vs Croatia (minimal)",
videoId: "c6455bff-945f-42b2-af99-81dcd5aeba29",
settingId: "full",
},
],
};

Settings​

Setting for the application can be provided in various different formats and are used to provide configuration with which to run a particular video, for example:

Setting Example
{
"general":{
"audioSelectionMethod":"lang",
"closedCaptionSelectionMethod":"lang",
"expectedLiveDuration":3600000,
"increaseLiveDuration":600000,
"isMiddleTimelineEventsLineEnabled":true,
"isTimelineEventsVisibleWithCommentaryOpen":false,
"isVideoThumbnailPreviewEnabled":true,
"jumpLargeGaps":true,
"liveBackOff":30000,
"minimalLayoutWidth":600,
"pipMode":true,
"relevantCommentaryStartsVisible":false,
"resolveManifestUrl":true,
"smallGapLimit":0,
"trackVideoDataManifest":false,
"videoAnalyticsEventFrequency":60000,
"culture":"en-GB"
},
"alerts":{
"alertsPath":"https://<url>/alerts_demo.json",
"displayTime":10000
},
"customPlayByPlay":[
{
"key":"FirstExtraTimeEnd_Big",
"value":"https://<url>/icons/{p.density}/phase_end_big.png"
},
{
"key":"FirstExtraTimeEnd_Mini",
"value":"https://<url>/icons/{p.density}/phase_end_small.png"
},
{
"key":"FirstExtraTimeStart_Big",
"value":"https://<url>/icons/{p.density}/phase_start_big.png"
},
{
"key":"FirstExtraTimeStart_Mini",
"value":"https://<url>/icons/{p.density}/phase_start_small.png"
},
{
"key":"FirstHalfEnd_Big",
"value":"https://<url>/icons/{p.density}/phase_end_big.png"
},
{
"key":"FirstHalfEnd_Mini",
"value":"https://<url>/icons/{p.density}/phase_end_small.png"
},
{
"key":"FirstHalfStart_Big",
"value":"https://<url>/icons/{p.density}/phase_start_big.png"
},
{
"key":"FirstHalfStart_Mini",
"value":"https://<url>/icons/{p.density}/phase_start_small.png"
},
{
"key":"Goal_Big",
"value":"https://<url>/icons/{p.density}/goa_big.png"
},
{
"key":"Goal_Mini",
"value":"https://<url>/icons/{p.density}/goa_small.png"
},
{
"key":"OwnGoal_Big",
"value":"https://<url>/icons/{p.density}/ogo_big.png"
},
{
"key":"OwnGoal_Mini",
"value":"https://<url>/icons/{p.density}/ogo_small.png"
},
{
"key":"PenaltyEnd_Big",
"value":"https://<url>/icons/{p.density}/phase_end_big.png"
},
{
"key":"PenaltyEnd_Mini",
"value":"https://<url>/icons/{p.density}/phase_end_small.png"
},
{
"value":"https://<url>/icons/{p.density}/png_big.png",
"key":"PenaltyGoal_Big"
},
{
"key":"PenaltyGoal_Mini",
"value":"https://<url>/icons/{p.density}/png_small.png"
},
{
"key":"PenaltyStart_Big",
"value":"https://<url>/icons/{p.density}/phase_start_big.png"
},
{
"key":"PenaltyStart_Mini",
"value":"https://<url>/icons/{p.density}/phase_start_small.png"
},
{
"key":"PenaltyWrong_Big",
"value":"https://<url>/icons/{p.density}/ppw_big.png"
},
{
"key":"PenaltyWrong_Mini",
"value":"https://<url>/icons/{p.density}/ppw_small.png"
},
{
"key":"PhasePenaltyGoal_Big",
"value":"https://<url>/icons/{p.density}/ppg_big.png"
},
{
"value":"https://<url>/icons/{p.density}/ppg_small.png",
"key":"PhasePenaltyGoal_Mini"
},
{
"key":"PhasePenaltyWrong_Big",
"value":"https://<url>/icons/{p.density}/ppw_big.png"
},
{
"value":"https://<url>/icons/{p.density}/ppw_small.png",
"key":"PhasePenaltyWrong_Mini"
},
{
"key":"RedCard_Big",
"value":"https://<url>/icons/{p.density}/rc_big.png"
},
{
"key":"RedCard_Mini",
"value":"https://<url>/icons/{p.density}/rc_small.png"
},
{
"key":"SecondExtraTimeEnd_Big",
"value":"https://<url>/icons/{p.density}/phase_end_big.png"
},
{
"key":"SecondExtraTimeEnd_Mini",
"value":"https://<url>/icons/{p.density}/phase_end_small.png"
},
{
"key":"SecondExtraTimeStart_Big",
"value":"https://<url>/icons/{p.density}/phase_start_big.png"
},
{
"key":"SecondExtraTimeStart_Mini",
"value":"https://<url>/icons/{p.density}/phase_start_small.png"
},
{
"key":"SecondHalfEnd_Big",
"value":"https://<url>/icons/{p.density}/phase_end_big.png"
},
{
"key":"SecondHalfEnd_Mini",
"value":"https://<url>/icons/{p.density}/phase_end_small.png"
},
{
"key":"SecondHalfStart_Big",
"value":"https://<url>/icons/{p.density}/phase_start_big.png"
},
{
"key":"SecondHalfStart_Mini",
"value":"https://<url>/icons/{p.density}/phase_start_small.png"
},
{
"key":"Substitution_Big",
"value":"https://<url>/icons/{p.density}/sb_big.png"
},
{
"key":"Substitution_Mini",
"value":"https://<url>/icons/{p.density}/sb_small.png"
},
{
"key":"YellowCard_Big",
"value":"https://<url>/icons/{p.density}/yc_big.png"
},
{
"key":"YellowCard_Mini",
"value":"https://<url>/icons/{p.density}/yc_small.png"
}
],
"ecommerce":{
"feedUrl":"https://<url>/ecommerce/index.html?eventId={v.eventId}&amp;culture={d.culture}",
"wordTag":"shop",
"ecommerceId":"e-commerce",
"iconUrl":"https://<url>/img/shop_icon_white.png",
"toleranceWindow":5000,
"showNotificationsOnce":false
},
"highlights":{
"startMode":"short",
"shortFilter":[
"GOAL",
"OwnGoal",
"PenaltyGoal"
],
"mediumFilter":[
"Goal",
"OwnGoal",
"PenaltyGoal",
"YellowCard",
"RedCard"
],
"longFilter":[
"*"
],
"liveFilter":[
"Goal",
"OwnGoal",
"PenaltyGoal",
"YellowCard",
"RedCard",
"Substitution"
]
},
"liveLike":{
"clientId":"WV6W1rkAJAAXAS9l0LpqHzjDyEcPbuGJjX7Kc2hk",
"chatEnabled":true,
"widgetThemeUrl":"https://<url>/LiveLike/customWidgetThemeUpdated.json"
},
"pushEngine":{
"configUrl":"https://<url>/DIVAProduct/www/Data/DivaDemoIBC/PushEngine/pushengineConfig_HBS.json",
"eCommerceCollectionName":"eCommerceDemo",
"eCommerceCollectionEnabled":false,
"editorialCollectionName":" "
},
"syncDataPanels":{
"dataFolderUrl":"https://<url>/DIVAProduct/www/Data/Diva5.0Test/output/OverlayLiteData/{V.EventId}.{d.Culture}/{OverlayID}.xml",
"renderingFolderUrl":"https://<url>/DIVAProduct/www/Data/Diva5.0Test/output/RenderingLiteData{n:ResourceURI}",
"trustedOrigins":"https://divadoc.deltatre.net,https://<url>"
},
"videoCast":{
"castBackground":"https://<url>/img/diva_chromecast.jpg",
"chromecastAppID":"<appID>"
}
}

For more information about setting and the available options click here.

Dictionary​

Dictionary must be provided based on the locale and will resemble something like the following:

Dictionary Example
{
"messages":{
"diva_go_live":"Go Live",
"diva_video_error":"This video is not working or not available in your region.",
"diva_error_button_ok":"OK",
"diva_menu_full_stats_button":"All Stats",
"diva_playbutton":"Play",
"diva_pausebutton":"Pause",
"diva_seekforward_button":"+{n}",
"diva_seekback_button":"-{n}",
"diva_alternate_timeline":"Alternate Timeline",
"diva_alternate_timeline_show_all":"See all events",
"diva_spoil":"SHOW EVENTS",
"diva_fullscreen":"Full Screen",
"diva_exitfullscreen":"Exit Full Screen",
"diva_alert":"Alerts",
"diva_multicam":"MULTICAM",
"diva_360clips":"360 CLIPS",
"diva_360multicam":"360 MULTICAM",
"diva_no_multicam":"Videos will appear as soon as they are published, please retry in a short while",
"diva_back_button":"Back",
"diva_chapters_open":"Chapters",
"diva_chapters_close":"Close Chapters",
"diva_theater_mode":"Theater Mode",
"diva_exit_theater_mode":"Exit Theater Mode",
"diva_mute":"Mute",
"diva_unmute":"Unmute",
"diva_show_multiview":"Show in sideBySide",
"diva_collapse_this_video":"Collapse video",
"diva_close_this_video":"Close video",
"diva_chromecast":"Chromecast",
"diva_close_stats_button":"",
"diva_audio_is_muted":"Audio is muted",
"diva_vr_start_video_loading":"VR loading ...",
"diva_button_close":"Close",
"diva_gck_connect_to_device":"Cast to",
"diva_gck_stop_casting":"Stop casting",
"diva_gck_cancel":"Cancel",
"diva_videometadata_error":"The video metadata are corrupted. Please try another video",
"diva_overlay_load_failure":"Could not load data panel",
"diva_drm_error":"Content protection error",
"diva_ssai_request_error":"This video is not working right now. Please disable any AdBlocker and then try again. In case this error persist please contact the Customer Care at help@diva.com",
"diva_no_highlights_error":"No key moments available at the moment. Please try later",
"diva_settings":"Settings Panel",
"diva_settings_button":"Settings",
"diva_error_title":"Error",
"diva_audio":"Audio Tracks",
"diva_cc_panel_title":"Subtitles",
"diva_closed_caption":"Closed Caption",
"diva_cc_disabled":"Disabled",
"diva_cc_d3608":"Enable CC",
"diva_cc_english":"English",
"diva_cc_french":"FRENCH",
"diva_cc_spanish":"Spanish",
"diva_cc_#1 Fre":"French",
"diva_cc_#2 Eng":"English",
"default_audio_selected":"Default Audio",
"diva_settings_hdr_enable":"Enable HDR",
"diva_adResumeTime":"Your video will resume in {remTime} s",
"diva_adResumeAt":"Your video will resume after the following advertisements {cVideo}/{totVideo}",
"diva_ad_loading_text":"Ad loading",
"diva_adblock":"You need to disable AdBlock to view the content",
"diva_adClickToEnableAudio":"Enable ad audio",
"diva_select_chapter":"Chapter List",
"diva_alert_replay":"Replay",
"diva_alert_back":"Back to",
"diva_highlightsmode_loading":"Highlights cards processing...",
"diva_highlightsmode_howto":"How do you want to watch this match?",
"diva_highlightsmode_short":"Short",
"diva_highlightsmode_medium":"Medium",
"diva_highlightsmode_long":"Long",
"diva_highlightsmode_live":"Live",
"diva_highlightsmode_full":"Full Match",
"diva_highlightsmode_resume":"Resume Highlights",
"diva_highlightsmode_next":"Next",
"diva_highlightsmode_highlights":"Highlights",
"diva_highlightsmode_youarein":"You are in highlights mode",
"diva_highlightsmode_notification_title":"Don't miss {n} key moments",
"diva_highlightsmode_notification_subtitle":"Would you like to watch them?",
"diva_highlightsmode_notification_watch":"Watch",
"diva_highlightsmode_highlights_title":"Highlights duration:",
"diva_hours":"h",
"diva_minutes":"m",
"diva_seconds":"s",
"diva_playbyplay":"Commentary",
"diva_noplaybyplay":"First message will be displayed shortly after the start of the session",
"diva_recommendation_watch_again":"Watch again",
"diva_recommendation_watch_next_video":"Watch the next video",
"diva_recommendation_next_videos":"Next videos",
"diva_recommendation_video_autoload":"Next video will start in {sec} sec",
"shop":"Shop",
"diva_ecommerce_rotate_device":"Rotate your screen to view the shop",
"diva_settings_close":"",
"diva_cc_enabled":"Enabled",
"diva_settings_pip_enable":"Enable Picture-In-Picture",
"diva_enterpip":"Enter pip mode",
"diva_exitpip":"Exit pip mode",
"diva_novideoavailable":"",
"diva_airplay_error":"Error trying to cast to AirPlay",
"diva_airplay_forbiden_error":"AirPlay cast disabled in Diva settings",
"diva_live":"Live Now",
"diva_settings_title":"Settings",
"diva_settings_hdr_label":"HDR",
"diva_settings_hdr_description":"Disable HDR if you are experiencing problems seeing the colours in the video",
"diva_at_button_tooltip":"Audio",
"diva_at_settings_title":"Audio tracks",
"diva_cc_button_tooltip":"Subtitles",
"diva_cc_settings_title":"Subtitles",
"diva_cc_eng":"english (lang)",
"diva_cc_en":"english (lang)",
"diva_airplay_forbidden_error":"AirPlay cast disabled in Diva settings",
"diva_timeline_events_title":"Key moments",
"diva_videolist_watching":"WATCHING",
"diva_videolist_live":"LIVE",
"diva_cc_enhancements_button":"Caption style",
"diva_cc_enhancements_button_subtitle":"Change text size and style",
"diva_cc_enlarge_label":"Enlarge text",
"diva_cc_caption_style_title":"Caption style",
"diva_cc_enlarge_subtitle":"Enlarge text",
"diva_cc_enlarge_description":"Activate for a significant increase of the subtitles text, for better readability",
"diva_cc_style_subtitle":"Style",
"diva_cc_style_description":"Activate to enable a darker background behind the subtitles text for increased visibility",
"diva_cc_style_label":"Style",
"diva_settings_hdr_ON_value":"On",
"diva_settings_hdr_OFF_value":"Off",
"diva_eop_starts_in_seconds":"Starts in {seconds} sec",
"diva_eop_reccomandation_title":"Recommendations",
"diva_eop_rewind":"Replay",
"diva_ccat_panel_title":"Audio and Subtitles",
"diva_accessibility_high_contrast_title":"Increase contrast",
"diva_accessibility_high_contrast_description":"Turn on increase contrast mode if you are having trouble seeing the menu",
"diva_accessibility_high_contrast_label":"Increase contrast",
"diva_videolist_default_title":"Default Title",
"diva_videolist_title_highlight":"Highlights",
"diva_fullmatch_highlights_button_label":"Full Match",
"diva_next_highlights_button_label":"Next",
"diva_videolist_highlight":"HIGHLIGHTS",
"diva_highlights_title_medium":"Highlights medium",
"diva_highlights_title_long":"Highlights long",
"diva_highlights_title_short":"Highlights short",
"diva_cc_caption_style_header":"Caption style",
"diva_cc_settings_header":"Subtitles",
"diva_cc_settings_subheader":"Style",
"diva_cc_enlarge_subheader":"Enlarge text",
"diva_highlights_title_live":"Live highlights",
"diva_highlights_notification":"Match Highlights",
"diva_highlights_badge_live":"Live Highlights",
"diva_highlights_badge_short":"Short Highlights",
"diva_highlights_badge_medium":"Medium Highlights",
"diva_highlights_badge_long":"Long Highlights",
"diva_highlights_alert_seek_unavailable":"Return to the full match to use rewind and fast forward",
"diva_pinned":"Pinned",
"diva_menu_button":"MENU",
"diva_data_panel_close_button":"Close Data Panel",
"diva_menu_close_button":"Close Menu",
"diva_data_panel_button_tooltip":"Stats",
"diva_data_panel_no_data_available_title":"No data available yet",
"diva_data_panel_no_data_available_description":"Please check back here shortly after the game has started!",
"diva_eop_replay":"Replay",
"diva_swap_video":"Swap video"
}
}

For more information about dictionary and the available options click here.

VideoMetaData​

In order to support decoupled OVP provision, DIVA 5 requires that video meta data is retrieved by the integrating application and passed to DIVA 5 as part of the initialisation parameters, an example of which is as follows:

VideoMetadata Example
{
"title":"Video title",
"image":"https://<thumbnail_url>.jpg",
"eventId":"108606",
"programDateTime":"2018-07-15T13:40:15.681Z",
"trimIn":4680858,
"trimOut":11641166,
"ad":"https://<vast_url>/skippable2.xml",
"sources":[
{
"uri":"https://<url>/<video_id>.ism/manifest(format=m3u8-aapl,filter=hls)",
"format":"HLS"
}
],
"audioTracks":[
{
"label":"English",
"id":"English1",
"selector":"English"
}
],
"defaultAudioTrackId":"English1",
"videoLists":[
{
"feedUrl":"https://<url>/rss/108606.xml",
"menu":"Other cameras",
"message":"Watch the live match from different angles",
"behaviour":"multistreamSwitch",
"id":"multistream",
"pollingInterval":30
},
{
"menu":"Other matches",
"message":"Watch other live mathes",
"highlightColor":"0xE65100",
"highlightColorLight":"0xff0000",
"id":"videolist",
"feedUrl":"https://<url>/rss/videolistSwitchDemo.xml"
}
],
"customAttributes":{
"chatId":"444ecf59-dbf2-43db-ae09-99926714022a",
"chatType":"influencer"
},
"recommendation":{
"feedUrl":"https://<url>/rss/videolist_recommendation_short.xml",
"autoLoadTime":0
},
"behaviour":{
"spoilerMode":"highlights"
},
"videoId":"<video_id>"
}
VideoMetadata Provider
// Type definition
export type VideoMetadataProvider = (
videoId: string,
currentVideoMetadata: VideoMetadataClean | undefined,
playbackState?:
| {
chromecast?: boolean | undefined;
hdrMode?: boolean | undefined;
}
| undefined
) => Promise<VideoMetadata>;

// Implementation example
export const requestVideometadata: VideoMetadataProvider = (videoId, currentVideoMetadata, playbackState) => {
videoId = decodeURIComponent(videoId);

const platform = playbackState?.chromecast === true ? 'chromecast' : 'html5';
const hdrType = playbackState?.hdrMode === true ? 'hdr10' : 'none';

const url = `https://<videoMetadataServiceUrl>/${videoId}?platform=${platform}&hdrType=${hdrType}`;

return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();

xhr.open('GET', url, true);
xhr.responseType = 'json';
xhr.onload = function () {
if (this.status >= 200 && this.status < 300) {
resolve(xhr.response);
} else {
reject(new Error(`${this.status} ${xhr.statusText}`));
}
};
xhr.onerror = function () {
reject(xhr.statusText);
};
xhr.send();
});
};

Provision must be done with the same signature as above so that DIVA internally is able to call the VideoMetaData provider and if necessary recall based on interval polling if the application requires data to be refreshed, i.e.

if (!isNaN(divaParams.videoPolling) && divaParams.videoPolling > 0) {
setInterval(function () {
divaAPI.requestVideoMetadataUpdate();
}, divaParams.videoPolling * 1000);
}

With the ability to return VMD, we then have all the elements required to instantiate a DIVA session.

For more information about Video Meta Data please click here.

Entitlement​

Entitlement and Entitlement Provider documentation.

SDK Setup​

DIVA Configuration​

Once the data has been provisioned, we combine the variables into a set of parameters to instantiate DIVA.

PropertyTypeDefaultDescription
Mandatory
videoIdstring | string[]NA

VideoId or List of videoId DIVA will open at startup (max 2 strings)

settingSettingNADIVA setting
dictionaryDictionaryNADIVA dictionary
videoMetadataProviderProviderNAFunction used by DIVA to retrieve videoMetadata
libsobjectNA

Object containing the external libraries' url lazy loaded by DIVA only when needed.
Libs reference

Optional
entitlementProviderProviderNAFunction used by DIVA to perform entitlement and heartbeat calls
debugbooleanfalseIt enables debug panel in chromecast
videoDebugbooleanfalseIt enables debug mode of the video libraries (hlsjs / shaka)
mediaAnalyticsEnabledbooleanfalseIt enables media Analytics in Chromecast receiver
keyboardActivebooleanfalse

It enables DIVA keyboard shortcuts default mapping
Keyboard Mapping reference

mediaAnalyticsEnabledbooleanfalseIt enables media Analytics in Chromecast receiver
deepLinkTypestring: '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:
type relative -> number of milliseconds
type absolute -> ISO 8801 datetime.
A value at a specific position applies to the videoId at the corresponding index.

preferredAudioTrackNamestringNAStarting selector for the audiotracks
preferredCCTrackNamestringNAStarting selector for the closed captions
preferredVideoQualitynumber | 'auto'NAPreselected video quality in kpbs
bitratePreferences

{
max?: number;
min?: number;
starting?: number;
useLast?: boolean;
}

{
max: -1,
min:-1,
starting: -1,
useLast: false
}

max, min, starting bitrate (-1 means disabled).
useLast: if true it makes DIVA using last bitrate from the previous session.

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

shakaConfigOverrides{ any }{}Overrides for shaka video library setup config
hlsJsConfigOverrides{ any }{}Overrides for hls.js video library setup config
fairplayOverrides

{
requestQueryParams?: Record<string, string>;
requestHeaders?: Record<string, string>;
skipLicenseRequestParsing?: boolean;
}

{}

Overrides for fairplay DRM: headers, query params, license request parsing

fairplayCertificatePathstringNAPath of the fairplay certificate
widevineOverrides

{
requestParams: Record<string, any>;
}

{}Overrides for widevine DRM
useCredentialbooleanfalseUsed by hls.js for xhrSetup.
volumenumber [0 - 1]100Startup volume.
mutedbooleanfalseIt specifies whether to start DIVA muted or not.
autoplaybooleantrueIt specifies whether to autoplay DIVA.
forceAutoplayMutedbooleantrue

If false and autoplay is not supported DIVA will wait for manual play.

detectAdBlockbooleanfalse

If true it raises an error if there's an AD and it's blocked by an ad blocker.

fetchHlsManifestbooleantrue

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.

multiviewModestring: 'multiview' | 'pip''multiview'

How to display the second video in case of multiple videoIds at startup. Possibile values are multiview and pip.

fullscreenContainerSelectorstringNA

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.

dataParsingIntervalnumber3000

Pushengine Data parsing interval

customIconsRecord<string, string>{}Custom icons reference
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>"

Callbacks
setAPIfunctionNA

It exposes DIVA APIs
(apiRef: DivaAPI) => void;
API reference

setPluginsManagerfunctionNA

It exposes DIVA Plugins Manager APIs: register, remove and change the status of plugins
(pluginsManager: DivaPluginsManagerAPI) => void;
Plugins reference

onLogfunctionNA

Logs callback
(log: logger.LogEntry) => void;

onVideoIdChangesfunctionNA

Called when current videos change
(videoIds: string[]) => void;

onVideoMetadataChangesfunctionNA

Called when videometadata of the main video changes
(videoMetadata: VideoMetadataClean) => void;

onAnalyticEventfunctionNA

Callback for generic analytic events
(event: GenericEvent) => void;

onMediaAnalyticEventfunctionNA

Callback for media analytic events
(event: MediaEvent) => void;

onBackButtonClickfunctionNA

Called when the user clicks on the back button during End of Play
(videoMetadata: VideoMetadataClean) => void;


Note: The implementation of this callback affects the presence of the button itself

onPlaybackRatefunctionNA

Called when playback speed of the main video changes
(rate: number) => void;

onPlayerPositionfunctionNA

Called when player position (both relative to the video logical start and unix timecode) of the main video changes

(position: { relativePosition: number; absolutePosition: Date } ) => void;

onPlayerMaxPositionfunctionNA

Called when player max position (both relative to the video logical start and unix timecode) of the main video changes

(position: { relativePosition: number; absolutePosition: Date } ) => void;

onPlayerStatefunctionNA

Called when player state of the main video changes
(state: PlayerState) => void;

onPreferredAudioTrackfunctionNA

Called when the user select an audiotrack
(value: string) => void;

onPreferredCCTrackfunctionNA

Called when the user select a closed caption
(value: string) => void;

onPreferredVideoQualityfunctionNA

Called when the user select a video quality
(value: number | 'auto') => void;

onVideoErrorfunctionNA

Called on DIVA errors

(videoError: VideoError, videoMetadata: VideoMetadataClean | undefined) => void;

onVideoEndfunctionNA

Called when video end is reached
() => void;

onPlayerActionRequestfunctionNA

Callback for actions called by API: play, pause, seek, seekBack, seekFroward, seekPercentage, seekAbsolute
(value: DivaAction) => void;

onPlaybackSessionfunctionNA

Called on DIVA playback session changed.
It returns also a unique identifier of the diva item.

(value: { id: string; playbackSessionId: string }) => void;

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://cdnjs.cloudflare.com/ajax/libs/shaka-player/4.11.2/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
}

Initialization​

Define configuration to use at DIVA instantiation time, combining the data that has been provisioned.

const config: DivaConfiguration = {
dictionary: {
...
},
libs: {
...
},
setting: {
...
},
videoId: '<videoId>',
...
};
  1. Import Diva into your React code
import { 
DivaWebComponent,
DivaConfiguration
} from "@deltatre-vxp/diva-sdk/diva-web-sdk";
import "@deltatre-vxp/diva-sdk/diva-web-sdk/index.min.css";
  1. Use the Diva component in your React component's render method
function MyAppComponent() {
...
return (
<div>
<DivaWebComponent config={config} />
</div>
);
}

API​

The property setAPI inside DIVA Configuration is intended to be a function that returns an object containing all the APIs for the current DIVA instance.

DIVA API reference list:

tip

For all the commands, in case of missing videoId parameter, action will be applied to Main video


/**
* It will force DIVA to request a new VideoMetadata through videoMetadataProvider
*/
requestVideoMetadataUpdate: (videoId?: string) => void;

// Getters

/**
* It returns the player position (both relative to the video logical start and unix timeCode as Date) of the video.
*/
getPlayerPosition: (videoId?: string) => { relative: number; absolute: Date };

/**
* It returns the player duration (both relative to the video logical duration and absolute end point as a Date) of the video.
*/
getPlayerDuration: (videoId?: string) => { relative: number; absolute: Date };

/**
* It returns the current video playback rate.
*/
getPlaybackRate: (videoId?: string) => number;

/**
* It returns the current video state. Possible value: STOPPED, PLAYING, BUFFERING, PAUSED, UNKNOWN, NOT_MONITORED.
*/
getPlayerState: (videoId?: string) => PlayerState;

/**
* It returns the current video volume. Values could be from 0 to 1.
*/
getVolume: (videoId?: string) => number;

/**
* It returns the Diva version in this format: 'major.minor.patch'.
*/
getVersion: () => string;

// Actions

/**
* It mute/unmute the video.
* @param value boolean, true to mute, false to unmute.
*/
mute: (value: boolean, videoId?: string) => void;

/**
* It pauses video playback.
* @param interactive boolean, for analytics track, true if with user interaction.
*/
pause: (interactive?: boolean, videoId?: string) => void;

/**
* It starts the video playback.
* @param interactive boolean, for analytics track, true if with user interaction.
* @returns the videoElement play promise.
*/
play: (interactive?: boolean, videoId?: string) => Promise<void>;

/**
* It seeks the video playback.
* @param value number, milliseconds value relative to the video start time.
* @param interactive boolean, for analytics track, true if with user interaction.
* @returns A promise usefull to check when the action is done.
*/
seek: (value: number, interactive?: boolean, videoId?: string) => Promise<void>;

/**
* It seeks back the video playback by the value get from videoMetadata.behaviour.seekInterval. Default 10 seconds.
* @param interactive boolean, for analytics track, true if with user interaction.
* @returns A promise usefull to check when the action is done.
*/
skipBack: (interactive?: boolean, videoId?: string) => Promise<void>;

/**
* It seeks forward the video playback by the value get from videoMetadata.behaviour.seekInterval. Default 10 seconds.
* @param interactive boolean, for analytics track, true if with user interaction.
* @returns A promise usefull to check when the action is done.
*/
skipForward: (interactive?: boolean, videoId?: string) => Promise<void>;

/**
* It seeks the video playback by percentage.
* @param value number, percentage from 0 to 100.
* @param interactive boolean, for analytics track, true if with user interaction.
* @returns A promise usefull to check when the action is done.
*/
seekPercentage: (value: number, interactive?: boolean, videoId?: string) => Promise<void>;

/**
* It seeks the video playback by Date object.
* @param value Date, in ISO 8601 format. (YYYY-MM-DDThh:mm:ssZ)
* @param interactive boolean, for analytics track, true if with user interaction.
* @returns A promise usefull to check when the action is done.
*/
seekAbsolute: (value: Date, interactive?: boolean, videoId?: string) => Promise<void>;

/**
* It sets the rate at which the video is being played back.
* @param value number, a value of 1 indicates normal speed.
*/
setPlaybackRate: (value: number, videoId?: string) => void;

/**
* It sets the video volume.
* @param value number, from 0 to 1, where 0 is effectively muted and 1 is the loudest possible value.
*/
setVolume: (value: number, videoId?: string) => void;

/**
* It increases the video volume by 0.1 steps.
*/
raiseVolume: (videoId?: string) => void;

/**
* It decreases the video volume by 0.1 steps.
*/
lowerVolume: (videoId?: string) => void;

/**
* It sets the minimum distance between icons on timeline.
* @param value number, in pixels. Default 20.
*/
setTimelineIconsMinDistance: (value: number) => void;

// Advanced UI actions

/**
* It opens a data panel.
* @param value string, data panel id.
*/
openDataPanel: (value: string, videoId?: string) => void;

/**
* It closes the opened data panel.
*/
closeDataPanel: (videoId?: string) => void;

/**
* It enters in native Picture in Picture.
*/
enterPiP: (videoId?: string) => void;

/**
* It exits from native Picture in Picture.
*/
exitPiP: (videoId?: string) => void;

/**
* It enters/exits in/from native Picture in Picture.
*/
togglePiP: (videoId?: string) => void;

/**
* It enters in full screen mode.
*/
enterFullscreen: (videoId?: string) => void;

/**
* It exits from full screen mode.
*/
exitFullscreen: (videoId?: string) => void;

/**
* It enters/exits in/from full screen mode.
*/
toggleFullscreen: (videoId?: string) => void;

/**
* Fires an event of the specified type with an optional payload.
* Used for Ad beaconing.
* @param type - The type of the event.
* @param payload - The payload associated with the event.
*/
fireEvent: (type: AnalyticsMediaEventType, payload?: { ad: Ad }) => void;

// Exposed path resolver
resolve(
value: string,
options?: {
videoId?: string; // if not provided it will fallback to main item
data?: Record<string, string>;
dontApplyDefault?: boolean;
}
): string;

Single command entry point for: mute, pause, play, set playback rate, seek, seek absolute

sendPlayerCommand: (command: DivaCommand, interactive: boolean, videoId?: string) => void | Promise<void>;

// DIVA Commands interfaces
export enum DivaCommandName {
MUTE = 'mute',
PAUSE = 'pause',
PLAY = 'play',
PLAYBACK_RATE = 'playback-rate',
SEEK = 'seek',
SEEK_ABSOLUTE = 'seek-absolute',
}

interface DivaCommandBase {
videoId?: string;
command: DivaCommandName;
}

export interface DivaCommandMute extends DivaCommandBase {
command: DivaCommandName.MUTE;
value: boolean;
}

export interface DivaCommandPause extends DivaCommandBase {
command: DivaCommandName.PAUSE;
}

export interface DivaCommandPlay extends DivaCommandBase {
command: DivaCommandName.PLAY;
}

export interface DivaCommandPlaybackRate extends DivaCommandBase {
command: DivaCommandName.PLAYBACK_RATE;
value: number;
}

export interface DivaCommandSeek extends DivaCommandBase {
command: DivaCommandName.SEEK;
value: number; // Milliseconds relative to trim in
}

export interface DivaCommandSeekAbsolute extends DivaCommandBase {
command: DivaCommandName.SEEK_ABSOLUTE;
value: Date;
}

export type DivaCommand =
| DivaCommandMute
| DivaCommandPause
| DivaCommandPlay
| DivaCommandPlaybackRate
| DivaCommandSeek
| DivaCommandSeekAbsolute;

Global functions​

List of global functions exposed by DIVA library.
It's not needed to instantia DIVA in order to use them.

getDivaResolverSession: () => string;
getDivaVersion: () => string;
getDivaMajorVersion: () => string;
getDivaMinorVersion: () => string;
getDivaPatchVersion: () => string;
getDivaPlatform: () => 'HTML5';
getDivaDevice: () => 'Web' | 'Tablet' | 'Smartphone';
getDivaDensity: () => string; // @1x | @2x | @3x
import { getDivaDevice } from '@deltatre-vxp/diva-web-sdk';

...

console.log(getDivaDevice());

Logging​

It is possible to attach to DIVA logs or even to use DIVA logger by using onLog config or:

import { LogEntry, onLog, getLogger } from "@deltatre-vxp/diva-sdk/diva-web-sdk/index{targetEnv}.js";

// Attach to DIVA logs
const unsubscribe = onLog((log: LogEntry) => {
console.log(log.message, log);
});

// Make use of DIVA logger
const { logDebug, logError, logInfo, logWarning } = getLogger('GENERIC:APP');
logDebug('log message', {
whatever: 'details'
});

// Unsubscribe from DIVA logs
unsubscribe();
note
  • {targetEnv}: .min (production), (empty string) development

Enable DIVA logs via query parameter​

To quickly enable DIVA logs in console add the query parameter __divaLogToConsole=true to the page URL.

Enable DIVA logs via local storage​

To quickly enable DIVA logs in console add the local storage parameter __divaLogToConsole=true.