DIVA Player configuration
What you learn
You will learn how to set up the DIVA Player standard and the DIVA Player with BO adapter.
Before starting
- Ensure your project is checked out in your local workspace.
- Install all project dependencies.
Instantiation
The DIVA Player standard and DIVA Player with BO adapter have slightly different configuration APIs.
Diva Standard Player Configuration
Here is the full Diva standard video player API that can be configured by the developer:
export interface DivaWebConfiguration {
/**
* Video id to play
* Can be a single video id or an array of video ids
*/
videoId: string | string[];
/**
* Type of deeplink to apply at startup: relative to the video start (or trimIn) or absolute.
*/
deepLinkType?: DeepLinkType;
/**
* 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.
*/
deepLinkValue?: (string | number | undefined)[];
/**
* Starting audio track name
*/
preferredAudioTrackName?: string;
/**
* Starting closed caption track name
*/
preferredCCTrackName?: string;
/**
* Preselected video quality in kpbs
*/
preferredVideoQuality?: number | 'auto';
/**
* Bitrate preferences
* max: maximum bitrate
* min: minimum bitrate
* starting: starting bitrate
* useLast: use the last bitrate used
*/
bitratePreferences?: BitratePrefs;
/**
* Map of additional keys to add to the path resolver.
* Input keys will be saved inside resolver as "settings.<key>"
*/
parameters?: { [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
*/
daiImaAdTagParameters?: { [key: string]: string };
/**
* the path of the fairplay certificate
*/
fairplayCertificatePath?: string;
/**
* Use credential for the video request in hls.js
*/
useCredential?: boolean;
/**
* Starting volume level (0-1)
* Default is 1
* If the device is muted, the volume will be set to 0
*/
volume?: number;
/**
* Muted state at start
*/
muted?: boolean;
/**
* Autoplay the video at start
*/
autoplay?: boolean;
/**
* Force autoplay muted
* If the device does not support autoplay unmuted, the video will start muted
* Default is true
* If set to false, the video will not autoplay if the device does not support autoplay unmuted
*/
forceAutoplayMuted?: boolean;
/**
* Detect adblocker
* if true, the player will detect if an adblocker is active and will show an error message to the user
*/
detectAdBlock?: boolean;
/**
* Multi-view mode [multiview, pip]
* Used in case of multiview stertup
* Default is multiview
*/
multiviewMode?: MultiviewMode;
/**
* Dictionary used by DIVA
*/
dictionary: Dictionary;
/**
* Urls of the libraries lazy loaded by DIVA
* The key is the library name and the value is the url of the library
* If false, the library is not loaded and DIVA assumes it is already loaded
*/
libs: Libs;
/**
* Setting to apply at startup
*/
setting: Setting;
/**
* Enable media analytics in chromecast
*/
mediaAnalyticsEnabled?: boolean;
/**
* Container to launch in fullscreen
* Default is the #diva-container
* Used in case DIVA and other elements like Livelike are in the same page
*/
fullscreenContainerSelector?: string;
/**
* Debug modein chromecast
*/
debug?: boolean;
/**
* Debug mode for video
*/
videoDebug?: boolean;
/**
* Keyboard active
* Default is false
*/
keyboardActive?: boolean;
/**
* VideoMetadataProvider
* Function to get the video metadata
* The function must return a promise with the video metadata
*/
videoMetadataProvider: (
videoId: string,
currentVideoMetadata?: VideoMetadataClean,
playbackState?: {
chromecast?: boolean;
}
) => Promise<VideoMetadata>;
/**
* Entitlement provider
* Object that exposess
* getConfiguration: (cb: (cf: EntitlementConfiguration) => void) => void;
* request: (request: EntitlementRequest) => Promise<EntitlementSuccessResponse>;
*/
entitlementProvider?: EntitlementProvider;
/**
* Additional configuration for fairplay
*/
fairplayOverrides?: {
requestQueryParams?: { [key: string]: string };
requestHeaders?: { [key: string]: string };
skipLicenseRequestParsing?: boolean;
};
/**
* Additional tag params for google DAI
* For example tfua: 1 (Tag For Users under the Age of Consent in Europe) and npa: 1
*/
hlsJsConfigOverrides?: any;
/**
* Additional configuration for shaka
*/
shakaConfigOverrides?: { [key: string]: any } | { time: number; config: any };
/**
* Additional configuration for widevine
*/
widevineOverrides?: {
requestParams: any;
};
/**
* Custom icons for the player
*/
customIcons?: { [key: string]: string };
/**
* Pushengine Data parsing interval
* Default is 3000
*/
dataParsingInterval?: number;
/**
* Session id
*/
sessionId?: string;
/**
* It enables the fetch of the hls manifest for thumbnails and program date time retrieving
* Note that this will increase the network traffic
* Default is true
*/
fetchHlsManifest?: boolean;
// Callbacks
onLog?: (log: LogEntry) => void;
onVideoIdChanges?: (videoIds: string[]) => void;
onVideoMetadataChanges?: (videoMetadata: VideoMetadataClean) => void;
onAnalyticEvent?: (event: AnalyticEvent) => void;
onBackButtonClick?: (videoMetadata: VideoMetadataClean) => void;
onMediaAnalyticEvent?: (event: MediaAnalyticEvent) => void;
onPlaybackRate?: (rate: number) => void;
onPlayerActionRequest?: (value: DivaAction) => void;
onPlayerPosition?: (position: { relativePosition: number; absolutePosition: Date }) => void;
onPlayerMaxPosition?: (position: { relativePosition: number; absolutePosition: Date }) => void;
onPlayerState?: (state: PlayerState) => void;
onPreferredAudioTrack?: (value: string) => void;
onPreferredCCTrack?: (value: string) => void;
onPreferredVideoQuality?: (value: number | 'auto') => void;
onVideoError?: (videoError: DivaError, videoMetadata: VideoMetadataClean | undefined) => void;
onVolume?: (value: number) => void;
onVideoEnd?: () => void;
onPlaybackSession?: (value: { id: string; playbackSessionId: string }) => void;
/**
* DIVA API callback
* @param apiRef
* @returns
*/
setAPI?: (apiRef: DivaWebAPI) => void;
/**
* API to set the plugins manager
* @param pluginsManager
* @returns
*/
setPluginsManager?: (pluginsManager: DivaPluginsManager) => void;
}
You can find additional details about each parameter in the DIVA Player documentation.
DIVA Player Standard Setup in AXIS
In AXIS, the DIVA Player standard is set up as follows:
export const DivaWebComponent = ({ videoId, videoMetadataProvider, resumeProps, onMediaAnalyticEvent, standalone, loading }: DivaWebComponentProps) => {
const config = useConfigAPI().getModule().getConfig();
const { dictionary } = useDictionary(config.divaLanguage, config.divaDefaultLanguage);
return !loading
? <div className={ cx(bem.b({ standalone })) }>
<DivaWeb config={{
dictionary,
libs,
setting: settings,
videoId,
videoMetadataProvider,
onMediaAnalyticEvent,
keyboardActive: true,
...resumeProps,
}}
/>
</div>
: null;
};
The key values set are:
videoId: The video ID.settings: Configuration for the player.dictionary: Used for multilingual support.resumeProps: Controls resume point setup and some callbacks for consuming analytics events and providing metadata.libs: Defines URLs to libraries such as HLS.js, Shaka, Google IMA, and others.
Here is an example of how the libs are set up:
export default {
hlsJs: 'https://cdn.jsdelivr.net/npm/hls.js@1.0.4',
shaka: 'https://ajax.googleapis.com/ajax/libs/shaka-player/4.3.1/shaka-player.compiled.js',
mux: 'https://src.litix.io/core/3/mux.js',
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',
};