Configuration

Before starting

• Refer to the Video player instantiation input article to understand the role of the configuration in the video player instantiation.
• Refer to the Basic instantiation code article to understand what part of code you can extend with the configuration options full list.

Web

Configuration options full list

Mandatory properties

Property	Description	Type	Default value
libs	Object containing the external libraries' url lazy loaded by DIVA only when needed	Libs	-
setting	initialization setting	Setting	-
dictionary	DIVA dictionary	Dictionary	{ messages: {} }
videoId	The video Id or List of video Ids DIVA will open at startup (max 2 strings)	string	string[]
videoMetadataProvider	Function used by DIVA to retrieve videoMetadata	VideoMetadataProvider	-

Other Optional properties

Property	Type	Default	Description	Impacted features
autoplay	boolean	true	It specifies whether to autoplay DIVA.	Video playback
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.	Video playback
customIcons	Record<string, string>	{}	Custom icons reference	UI customization
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	Dynamic Ad Insertion Google-based
dataParsingInterval	number	3000	Pushengine Data parsing interval	Synchronized data
debug	boolean	false	It enables debug panel in chromecast	Troubleshooting
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: type relative -> number of milliseconds type absolute -> ISO 8801 datetime. A value at a specific position applies to the videoId at the corresponding index.
detectAdBlock	boolean	false	If true it raises an error if there's an AD and it's blocked by an ad blocker.
entitlementProvider	EntitlementProvider	NA	Function used by DIVA to perform entitlement and heartbeat calls	Video playback
fairplayCertificatePath	string	NA	Path of the fairplay certificate
fairplayOverrides	{ requestQueryParams?: Record<string, string>; requestHeaders?: Record<string, string>; skipLicenseRequestParsing?: boolean; }	{}	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 Keyboard Mapping reference
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
preferredVideoQuality	number | 'auto'	NA	Preselected video quality in kpbs
renderCustomization	RenderCustomization	NA	function to render custom rect element
sessionId	string	NA	Override of the video session id (otherwise random)
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	{ requestParams: Record<string, any>; }	{}	Overrides for widevine DRM

Full configuration example

Responsive Web full configuration

// DIVA Player SDK
import { DivaWebComponent } from "@deltatre-vxp/diva-sdk/diva-web-sdk";
import type { DivaConfiguration, VideoMetadata, VideoMetadataClean } from "@deltatre-vxp/diva-sdk/diva-web-sdk";
// Import SDK style
import "@deltatre-vxp/diva-sdk/diva-web-sdk/index.min.css";

const libs = {
  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",
  hlsJs: "https://cdn.jsdelivr.net/npm/hls.js@1.5.7",
  googleIMA: 'https://imasdk.googleapis.com/js/sdkloader/ima3.js',
  googleDAI: 'https://imasdk.googleapis.com/js/sdkloader/ima3_dai.js',
  googleCast: 'https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1',
  threeJs: 'https://cdnjs.cloudflare.com/ajax/libs/three.js/0.148.0/three.min.js',
};

const config: DivaConfiguration = {
  setting: {
    general: {
      culture: 'en-GB',
      timeToDisableAutoplay: 5400000,
    }
  }, 
  dictionary: {
    messages: {},
  },
  videoMetadataProvider: async (
    videoId: string,
    currentVideoMetadata?: VideoMetadataClean,
    playbackState?: {
      chromecast?: boolean | undefined;
    }): Promise<VideoMetadata> => {
    return {
      "title": "Video Title",
      "sources": [
        {
        "uri": "<stream URL>",
        "format": "HLS"
        }
      ],
      "videoId": "<video id>",
    }
  },
  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,
  forceAutoplayMuted: true,
  fullscreenContainerSelector: "#diva-container",
  keyboardActive: true,
  libs: libs,
  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;
  },
  shakaConfigOverrides: {
  // Applied before load
  0: {
      abr: {
          useNetworkInformation: true,
          switchInterval: 10,
          defaultBandwidthEstimate: 600 * 8 * 1000,
      },
      cmcd: {
          enabled: false,
      },
      cmsd: {
          enabled: false,
      },
      drm: {
          delayLicenseRequestUntilPlayed: true,
          parseInbandPsshEnabled: false,
      },
      streaming: {
          parsePrftBox: false,
          stallEnabled: true,
          bufferBehind: 0,
          bufferingGoal: 4,
          rebufferingGoal: 0.2,
          allowMediaSourceRecoveries: true,
          dispatchAllEmsgBoxes: false,
          segmentPrefetchLimit: 0,
          updateIntervalSeconds: 1,
          observeQualityChanges: true,
          retryParameters: {
              maxAttempts: 3,
          },
      },
      manifest: {
          disableAudio: false,
          disableThumbnails: true,
          disableText: false,
          dash: {
              updatePeriod: 12,
              ignoreSuggestedPresentationDelay: true,
              disableXlinkProcessing: true,
              ignoreMinBufferTime: true,
              autoCorrectDrift: false,
          },
      },
  },
  useCredential: false,
  videoDebug: false,
  videoId: ['<video_id>'],
  volume: 100,
};

export const App = () => {
  return <DivaWebComponent config={config} />;
};

WebTV

Configuration options full list

Mandatory properties

Property	Description	Type	Default value
dictionary	DIVA dictionary	Dictionary	{ messages: {} }
init	initialization config	init	-
libs	Object containing the external libraries' url lazy loaded by DIVA only when needed	Libs	-
videoMetadataProvider	Function used by DIVA to retrieve videoMetadata	VideoMetadataProvider	-

Init Property

Init mandatory properties

Property	Description	Type	Default value
setting	initialization setting	Setting	-
videoId	The video Id or List of video Ids DIVA will open at startup (max 2 strings)	string	string[]

Init optional properties

Property	Type	Default	Description	Impacted features
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.	Video playback
dataParsingInterval	number	3000	Pushengine Data parsing interval	Synchronized data
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: type relative -> number of milliseconds type absolute -> ISO 8801 datetime. A value at a specific position applies to the videoId at the corresponding index.
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.
hdrMode	boolean	false	It specifies whether to activate HDR or not at startup.
hlsJsConfigOverrides	{ any }	{}	Overrides for hls.js video library setup config
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
renderCustomization	RenderCustomization	NA	function to render custom rect element
sessionId	string	NA	Override of the video session id (otherwise random)
shakaConfigOverrides	{ any }	{}	Overrides for shaka video library setup config

Other Optional properties

Property	Type	Default	Description	Impacted features
accessibility	Accessibility Options	NA	Accessibility Options	-
forcedWebTvPlatform	'Tizen' | 'WebOS' | 'SkyQ' | 'Generic' | 'XBOX' | 'PS4' | 'PS5' | 'X1'	NA	Used in case there are issues with the autodetection	-
gamepadActive	boolean	true	Flag to enable/disable gamepad navigation support	-
keyboardActive	boolean	true	Flag to enable/disable keyboard navigation support	-
navigationActive	boolean	true	Flag to enable or disable navigation inside the component	-
noControlsGradientBackground	boolean	false	Flag to disable css gradient backgrounds	-
noTransitions	boolean	false	Flag to disable css transitions	-
remoteActive	boolean	true	Flag to enable/disable navigation through remote	-
uiDelay	boolean	false	Delay to show the player UI in milliseconds after startup	-
unfreezeShakaAtMediaQualityChanges	number	0	Flag to toggle play pause in case of bitrate switches. Hack for sky xione and harmonic stream. It needs at least shaka 3.3.19	-

Full configuration example

WebTV full configuration

// DIVA Standalone SDK
import { DivaWebTV } from "@deltatre-vxp/diva-sdk/diva-webtv-sdk";
import type { 
  DivaWebTVInitType, 
  DivaWebTVProps, 
  VideoMetadata, 
  VideoMetadataClean
} from "@deltatre-vxp/diva-sdk/diva-webtv-sdk";

// Import SDK style
import "@deltatre-vxp/diva-sdk/diva-webtv-sdk/index.min.css";

const init: DivaWebTVInitType = {
  setting: {
    general: {
      culture: "en-GB",
    }
  },
  videoId: "<video id>",
  bitratePreferences: {
      max: -1,
      min: -1,
      starting: -1,
      useLast: false
  },
  daiImaAdTagParameters: undefined,
  debug: true,
  deepLinkType: undefined,
  deepLinkValue: ["", ""],
  detectAdBlock: false,  
  preferredAudioTrackName: "",
  preferredCCTrackName: "",

  shakaConfigOverrides: {
  // Applied before load
  0: {
      abr: {
          useNetworkInformation: true,
          switchInterval: 10,
          defaultBandwidthEstimate: 600 * 8 * 1000,
      },
      cmcd: {
          enabled: false,
      },
      cmsd: {
          enabled: false,
      },
      drm: {
          delayLicenseRequestUntilPlayed: true,
          parseInbandPsshEnabled: false,
      },
      streaming: {
          parsePrftBox: false,
          stallEnabled: true,
          bufferBehind: 0,
          bufferingGoal: 4,
          rebufferingGoal: 0.2,
          allowMediaSourceRecoveries: true,
          dispatchAllEmsgBoxes: false,
          segmentPrefetchLimit: 0,
          updateIntervalSeconds: 1,
          observeQualityChanges: true,
          retryParameters: {
              maxAttempts: 3,
          },
      },
      manifest: {
          disableAudio: false,
          disableThumbnails: true,
          disableText: false,
          dash: {
              updatePeriod: 12,
              ignoreSuggestedPresentationDelay: true,
              disableXlinkProcessing: true,
              ignoreMinBufferTime: true,
              autoCorrectDrift: false,
          },
      },
  },
  useCredential: false,
  videoDebug: false,
};

const libs = {
  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",
  hlsJs: "https://cdn.jsdelivr.net/npm/hls.js@1.5.7",
  googleIMA: 'https://imasdk.googleapis.com/js/sdkloader/ima3.js',
  googleDAI: 'https://imasdk.googleapis.com/js/sdkloader/ima3_dai.js',
};

const props: DivaWebTVProps = {
  init,
  libs,
  dictionary: {
    messages: {},
  },
  keyboardActive: true,
  videoMetadataProvider: async (
    videoId: string,
    currentVideoMetadata?: VideoMetadataClean,
    playbackState?: {
      chromecast?: boolean | undefined;
    }): Promise<VideoMetadata> => {
    return {
      "title": "Video Title",
      "sources": [
        {
        "uri": "<stream URL>",
        "format": "HLS"
        }
      ],
      "videoId": "<video id>",
    }
  },
  onAnalytics: console.log,
  onLog: console.log,
  onMediaAnalytics: 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,
  onVideoMetadataChanges: console.log,
  setAPI: (api) => {
      // Here you can save a reference to DIVA APIs
      window.divaAPI = api;
  },
};


export const App = () => {
  return <DivaWebTV {...props} />;
}