Configuration parameters could be provided upon instantiation of the player instance.
var config = {
// Configuration here
};
var player = playkit.core.loadPlayer(config);
{
log: PKLogConfigObject,
text: PKTextConfigObject,
playback: PKPlaybackConfigObject,
streaming: PKStreamingConfigObject,
session: PKSessionConfigObject,
network: PKNetworkConfigObject,
customLabels: PKCustomLabelsConfigObject,
abr: PKAbrConfigObject,
drm: PKDrmConfigObject,
dimensions: PKDimensionsConfig
}
var config = {
log: {
level: 'ERROR'
},
text: {
enableCEA708Captions: true,
useNativeTextTrack: false,
forceCenter: false,
captionsTextTrack1Label: 'English',
captionsTextTrack1LanguageCode: 'en',
captionsTextTrack2Label: 'Spanish',
captionsTextTrack2LanguageCode: 'es'
},
playback: {
audioLanguage: '',
textLanguage: '',
captionsDisplay: false,
additionalAudioLanguage: '',
additionalTextLanguage: '',
volume: 1,
playsinline: true,
preload: 'none',
autoplay: false,
loop: false,
allowMutedAutoPlay: true,
updateAudioDescriptionLabels: true,
muted: false,
pictureInPicture: true,
options: {
html5: {
hls: {},
dash: {},
native: {}
}
},
preferNative: {
hls: false,
dash: false
},
streamPriority: [
{
engine: 'html5',
format: 'hls'
},
{
engine: 'html5',
format: 'dash'
},
{
engine: 'html5',
format: 'progressive'
}
]
},
abr: {
enabled: true,
fpsDroppedFramesInterval: 5000,
fpsDroppedMonitoringThreshold: 0.2,
capLevelOnFPSDrop: false,
capLevelToPlayerSize: false,
restrictions: {
minHeight: 0,
maxHeight: Infinity,
minWidth: 0,
maxWidth: Infinity,
minBitrate: 0,
maxBitrate: Infinity
}
},
drm: {
keySystem: ''
}
};
{ level: string, playerVersion: boolean, handler: ?LogHandlerType }Possible values:
"DEBUG", "INFO", "TIME", "WARN", "ERROR", "OFF"
Possible values:
true/false
function(messages: any[], context: Object)(messages: any[], context: Object)
{ dash: Array<PKMediaSourceObject>, hls: Array<PKMediaSourceObject>, progressive: Array<PKMediaSourceObject>, options: PKMediaSourceOptionsObject, type: string, dvr: boolean, vr?: Object, metadata: PKMetadataConfigObject, id?: string, poster?: string, duration?: number, captions?: Array<PKExternalCaptionObject>, thumbnails?: PKExternalThumbnailsConfig, startTime?: number seekFrom?: number clipTo?: number }{ mimetype: string, url: string, id: string, // optional bandwidth: number, // optional width: number, // optional height: number, // optional drmData: Array<PKDrmDataObject> // optional }{ licenseUrl: string, scheme: string, certificate: string // optional }{ forceRedirectExternalStreams: boolean, redirectExternalStreamsHandler: ?Function, redirectExternalStreamsTimeout: ?number }{ name?: string, description?: string }{ url: string, label: string, language: string, default?: string, type?: string }{ options: { forceRedirectExternalStreams: false }. metadata: {} }var sources: { hls: [ { mimetype: 'application/x-mpegurl', url: '//PATH/TO/MANIFEST.m3u8' } ] };var sources: { dash: [ { mimetype: 'application/x-mpegurl', url: '//PATH/TO/MANIFEST.mpd' } ] };var sources: { progressive: [ { mimetype: 'video/mp4', url: '//PATH/TO/FILE.mp4' } ] };{ forceRedirectExternalStreams: false; }Possible values:
"Vod", "Live", "Image", "Audio", "Unknown"
.Relevant only if the media type=
"Live"
.The following fields are mandatory:
url
,language
andlabel
.var sources: { captions: [ { url: 'www.path.to/your/captions/file', type: 'vtt', default: true, language: 'en', label: 'English' } ] };The imgBaseUrl field is optional, if not provided - it would be resolved to the application domain.
var sources: { thumbnails: [ { imgBaseUrl: 'www.path.to/your/resources/images', vttUrl: 'www.path.to/your/thumbnails/file.vtt' } ] };Default -1 refer to automatic start time - 0 to VOD and live edge to live.
Note.
startTime
affects the ad playback, e.g.startTime: 10
will skip ads scheduled until 10.
To force playing ads scheduled beforestartTime
, need to configure the ads plugin.
For example with IMA plugin, setadsRenderingSettings: {playAdsAfterTime: -1}
.Unlike
startTime
, this configuration will cut and omit the part of the video that is before the configuredseekFrom
value and will start from there. This will affect the duration of the video.
clipTo
will cut and omit the part of the video that is after the configured value, and will end at this position. This will affect the duration of the video.{ useNativeTextTrack: boolean, enableCEA708Captions: boolean, forceCenter: boolean, textTrackDisplaySetting: PKTextTrackDisplaySettingObject, textStyle: TextStyle, captionsTextTrack1Label: string, captionsTextTrack1LanguageCode: string, captionsTextTrack2Label: string, captionsTextTrack2LanguageCode: string }{ useNativeTextTrack: false, enableCEA708Captions: true, forceCenter: false, captionsTextTrack1Label: "English", captionsTextTrack1LanguageCode: "en", captionsTextTrack2Label: "Spanish", captionsTextTrack2LanguageCode: "es" }If set to True, the native browser captions will be displayed.
{ line: string | number, // [-16 .. 16] lineAlign: string, // ['start', 'center', 'end'] align: string, // ['start', 'center', 'end', 'left', 'right'] position: number, //[0 .. 100] positionAlign: string, // ['line-left', 'center', 'line-right'] snapToLines: boolean, // [true, false] vertical: string, //['', 'lr', 'rl'] size: number //[0 .. 100] }The line defines positioning of the cue box
An alignment for the cue box’s line, one of start/center/end alignment
An alignment for all lines of text within the cue box, in the dimension of the writing direction
is a boolean indicating whether the line is an integer number of lines (using the line dimensions of the first line of the cue), or whether it is a percentage of the dimension of the video. The flag is set to true when lines are counted, and false otherwise.
The position defines the indent of the cue box in the direction defined by the writing direction
An alignment for the cue box in the dimension of the writing direction, describing what the position
is a boolean indicating whether the line is an integer number of lines (using the line dimensions of the first line of the cue), or whether it is a percentage of the dimension of the video. The flag is set to true when lines are counted, and false otherwise.
configures the cue to use vertical text layout rather than horizontal text layout. Vertical text layout is sometimes used in Japanese, for example. The default is horizontal layout
A number giving the size of the cue box, to be interpreted as a percentage of the video, as defined by the writing direction
{ fontSize?: '50%' | '75%' | '100%' | '200%' | '300%' | '400%' textAlign?: string, // ['default', 'center', 'left', 'right'] fontScale?: -2 | -1 | 0 | 2 | 3 | 4 fontFamily?: string, // font family available in browser fontColor?: [number, number, number], // RGB fontOpacity?: number, // [0.0 .. 1.0] fontEdge?: Array<[number, number, number, number, number, number]>, // TextStyle.EdgeStyles.NONE TextStyle.EdgeStyles.RAISED TextStyle.EdgeStyles.DEPRESSED TextStyle.EdgeStyles.UNIFORM TextStyle.EdgeStyles.DROP backgroundColor?: [number, number, number], // RGB backgroundOpacity?: number // [0.0 .. 1.0] }An alignment for all lines of text within the cue box, in the dimension of the writing direction
Percentage unit relative to the parent element's font
Integer number representing the scaling factor relative to the parent element's font size
The font family
Font color in RGB format
The font opacity
Each inner array represents a shadow, and is composed of RGB values for the shadow color, followed by pixel values for x-offset, y-offset, and blur
Background color in RGB format
The background opacity
{ audioLanguage: string, textLanguage: string, additionalAudioLanguage: string, additionalTextLanguage: string, captionsDisplay: boolean, volume: number, playsinline: boolean, crossOrigin: string, preload: string, autoplay: PKAutoPlayTypes, loop: boolean, autopause: boolean, allowMutedAutoPlay: boolean, updateAudioDescriptionLabels: boolean, muted: boolean, pictureInPicture: boolean, options: PKPlaybackOptionsObject, streamPriority: Array<PKStreamPriorityObject>, preferNative: PKPreferNativeConfigObject, inBrowserFullscreen: boolean, playAdsWithMSE: boolean, screenLockOrientionMode: string }{ audioLanguage: "", textLanguage: "", additionalAudioLanguage: "", additionalTextLanguage: "", captionsDisplay: false, volume: 1, playsinline: true, preload: "none", autoplay: false, loop: false, allowMutedAutoPlay: true, updateAudioDescriptionLabels: true, muted: false, pictureInPicture: true, playAdsWithMSE: false, screenLockOrientionMode: ScreenOrientationType.NONE, options: { html5: { hls: {}, dash: {} } }, preferNative: { hls: false, dash: false }, streamPriority: [ { engine: "html5", format: "hls" }, { engine: "html5", format: "dash" }, { engine: "html5", format: "progressive" } ] }If an audio track with the defined language exists, this audio track will be selected as the initial audio track.
var config = { playback: { audioLanguage: 'eng' // Start playback with english audio } };If the value
"auto"
is set, i.e:var config = { playback: { audioLanguage: 'auto' } };If there is an audio track with the same language as the user's system locale language, this audio track will be selected.
If captions for the defined language are available, this text track will be selected as the initial text track.
var config = { playback: { textLanguage: 'heb' // Start playback with hebrew captions } };If the value
"auto"
is set, i.e:var config = { playback: { textLanguage: 'auto' } };The player will choose the default captions language using the following logic:
- Locale language - If there is a text track with the same language as the user's system locale language, this text track will be selected.
- Manifest default language - If a default language is specified in the manifest file then this language will be selected.
- First language in manifest - The first language specified in the manifest file will be selected.
- If none of the above conditions have taken place, do not display captions.
option to add the audioLanguage with additional code (should be the same language as the audioLanguage field). intended for cases where the 639-1 code is totaly different than the 639-2 code. for example: Spanish 639-1: 'es' 639-2: 'spa'
If an audio track with the defined language exists, this audio track will be selected as the initial audio track.
var config = { playback: { additionalAudioLanguage: 'spa' // Start playback with Spanish audio } };option to add the textLanguage with additional code. (should be the same language as the textLanguage field). intended for cases where the 639-1 code is totaly different than the 639-2 code. for example: Spanish 639-1: 'es' 639-2: 'spa'
If captions for the defined language are available, this text track will be selected as the initial text track.
var config = { playback: { additionalTextLanguage: 'spa' // Start playback with Spanish captions } };Description: A Boolean attribute that indicates whether the captions are disabled or enabled by default.
var config = { playback: { captionsDisplay: true } };The value must be in the range of 0-1.
var config = { playback: { volume: 0.5 } };Description: A Boolean attribute that indicates whether the video should be played "inline", that is, within the element's playback area.
This is especially relevant when playing videos on iPhone devices, where - if the value is set to false - the video will be played using the AV Player (iOS native video player).
Description: This enumerated attribute indicates whether to use CORS to fetch the related image. CORS-enabled resources can be reused in the element without being tainted.
Possible values:
"anonymous"
: Sends a cross-origin request without a credential. In other words, it sends the Origin: HTTP header without a cookie, X.509 certificate, or performing HTTP Basic authentication. If the server does not give credentials to the origin site (by not setting the Access-Control-Allow-Origin: HTTP header), the image will be tainted, and its usage restricted."use-credentials"
: Sends a cross-origin request with a credential. In other words, it sends the Origin: HTTP header with a cookie, a certificate, or performing HTTP Basic authentication. If the server does not give credentials to the origin site (through Access-Control-Allow-Credentials: HTTP header), the image will be tainted and its usage restricted.When not present, the resource is fetched without a CORS request (i.e. without sending the Origin: HTTP header), preventing its non-tainted used in elements. If invalid, it is handled as if the enumerated keyword anonymous was used. See CORS settings attributes for additional information.
Possible values:
"none"
: indicates that the video should not be preloaded."auto"
: indicates that the whole video file could be downloaded, even if the user is not expected to use it.for
autoplay
&allowMutedAutoPlay
options read here.This is a Boolean attribute that indicates the default setting of the audio contained in the video. If set, the audio will be initially silenced. The attribute's default value is false, which means that the audio will be played automatically when the video is played.
This is an Array attribute that is used to implement user controls for fast forward, slow motion, and so forth. The normal playback rate is multiplied by this value to obtain the current rate, so a value of 1.0 indicates normal speed.
This is a boolean attribute that allows to disable (enabled by default) the picture in picture feature (it will be enabled only in browsers supporting this ability)
{ html5: { hls: Object, dash: Object } }{ html5: { hls: {}, dash: {} } }
- For
hls
configuration, see the hls.js documentation.- For
dash
configuration, see the shaka-player documentation.{ hls: boolean, dash: boolean }{ hls: false, dash: false }Description: Indicates whether to prefer native browser playback (if supported) with media source extensions.
If one of the values is set to True and the player chooses to play the truthly media source extension, the player will try to play it natively if supported by the browser.
Lets assume the following configuration:
var config = { playback: { preferNative: { hls: true } } };If the player is running on a Safari browser, the player will use the native hls playback managed by the Safari browser. However, if running on a browser in which hls playback is not supported natively, for example, Chrome, the player will play hls using the
hls.js
library.inBrowserFullscreen: boolean;playAdsWithMSE: boolean;screenLockOrientionMode: string;{ engine: string, format: string }[ { engine: 'html5', format: 'hls' }, { engine: 'html5', format: 'dash' }, { engine: 'html5', format: 'progressive' }, { engine: 'flash', format: 'hls' } ];As soon as the player receives the sources, it will review the configuration array and try to play the source with the matched stream format according to the matched engine. For example, in the priority configuration above, the player will try to play the hls stream using an html5 engine first. If an hls stream isn't received, the player will continue to play the dash stream using an html5 engine. If a dash stream isn't received, the player will then will continue to play the progressive stream using an html5 engine.
{ forceBreakStall: boolean, lowLatencyMode: boolean, trackEmsgEvents: boolean, switchDynamicToStatic: boolean }{ forceBreakStall: false, lowLatencyMode: true, // default for hls playback (optional) lowLatencyMode: false, // default for dash & smart TV playback (optional) trackEmsgEvents: true, // default for dash (optional) switchDynamicToStatic: false // toggle whether to switch to static manifest when live stream ends }
{ id: string, ks: string, partnerId: number, uiConfId: number }
{ requestFilter?: Function, responseFilter?: Function }Description: Defines a filter for requests. This filter takes the request and modifies it before it is sent. A request filter can run asynchronously by returning a promise; in this case, the request will not be sent until the promise is resolved.
{ MANIFEST: 0, SEGMENT: 1, LICENSE: 2 }{ url: string, body: ?string | ArrayBuffer, headers: { [header: string] : string } }var config = { network: { requestFilter: function (type, request) { if (type === KalturaPlayer.core.RequestType.LICENSE) { request.headers['customData'] = CUSTOM_DATA; } } } };var config = { network: { requestFilter: function (type, request) { if (type === KalturaPlayer.core.RequestType.LICENSE) { return new Promise(function (resolve) { request.headers['customData'] = CUSTOM_DATA; resolve(request); }); } } } };Description: Defines a filter for responses. This filter takes the response and modifies it before it is returned. A response filter can run asynchronously by returning a promise.
{ MANIFEST: 0, SEGMENT: 1, LICENSE: 2 }{ url: string, originalUrl: string, data: ArrayBuffer, headers: { [header: string] : string } }Description: The URI which was loaded. Request filters and server redirects can cause this to be different from the original request URIs.
var config = { network: { responseFilter: function (type, response) { if (type === KalturaPlayer.core.RequestType.LICENSE) { response.data = MANIPULATED_DATA; } } } };var config = { network: { responseFilter: function (type, response) { if (type === KalturaPlayer.core.RequestType.LICENSE) { return new Promise(function (resolve) { response.data = MANIPULATED_DATA; resolve(response); }); } } } };{ audio: Function, qualities: Function, captions: Function }Description: Specifies callback functions that modify the default label of a track. If this section or one of the keys is not present, the player will use a default label.
This part of the configuration has three possible keys:
- audio (for Audio tracks).
- qualities (for Video tracks).
- captions (for Text tracks).
The value of the keys is a reference to a function. The function gets a track object as an input and returns a string with the custom label. Here is an example to a possible use of this configuration:
var config = { customLabels: { qualities: function (videoTrack) { if (videoTrack.height > 500) { return 'High'; } return 'Low'; } } };Important: A Text track has language and label properties. The label is set by the label property in the manifest. However, in case the manifest does not have a label property - the language property will be set as the tracks label.
{ enabled: boolean, fpsDroppedFramesInterval: number, fpsDroppedMonitoringThreshold: number, capLevelOnFPSDrop: boolean, capLevelToPlayerSize: boolean, defaultBandwidthEstimate: number, restrictions: { minHeight: number, maxHeight: number, minWidth: number, maxWidth: number, minBitrate: number, maxBitrate: number } }{ enabled: true, fpsDroppedFramesInterval: 5000, fpsDroppedMonitoringThreshold: 0.2, capLevelOnFPSDrop: false, capLevelToPlayerSize: false, restrictions: { minHeight: 0, maxHeight: Infinity, minWidth: 0, maxWidth: Infinity, minBitrate: 0, maxBitrate: Infinity } }
{ keySystem: string; }
{ width?: string | number; height?: string | number; ratio?: string; }If number was provided, the width will be calculated in pixels (
width: 640
equivalent towidth: '640px'
). If string was provided, any valid css syntax can be passed, for example:width: '100%'
,width: 'auto'
, etc.If number was provided, the height will be calculated in pixels (
height: 360
equivalent towidth: '360px'
). If string was provided, any valid css syntax can be passed, for example:height: '100%'
,height: 'auto'
, etc.The aspect ratio should be written in the form of
'width:height'
, for example:'4:3'
(classic TV ratio). If one of theheight
orwidth
parameters is additionally provided in the configuration, the value of the other parameter not provided will be calculated accordingly to match the aspect ratio. If both were provided, theheight
value would be overridden.
Now that we've learned about the different options available in the player configuration, let's see how does the source selection logic works.