Configuration parameters could be provided upon instantiation of the player instance.
var config = {
// Configuration here
};
var player = playkit.core.loadPlayer(config);{
logLevel: string,
playback: PKPlaybackConfigObject,
sources: PKSourcesConfigObject,
session: PKSessionConfigObject,
plugins: PKPluginsConfigObject,
customLabels: PKCustomLabelsConfigObject
}var config = {
logLevel: 'ERROR',
sources: {
options: {
forceRedirectExternalStreams: false
},
metadata: {}
},
plugins: {},
playback: {
audioLanguage: '',
textLanguage: '',
useNativeTextTrack: false,
enableCEA708Captions: false,
captionsTextTrack1Label: 'English',
captionsTextTrack1LanguageCode: 'en',
captionsTextTrack2Label: 'Spanish',
captionsTextTrack2LanguageCode: 'es',
volume: 1,
startTime: -1,
playsinline: true,
preload: 'none',
autoplay: false,
allowMutedAutoPlay: true,
loop: false,
muted: false,
options: {
html5: {
hls: {},
dash: {}
}
},
preferNative: {
hls: false,
dash: false
},
streamPriority: [
{
engine: 'html5',
format: 'hls'
},
{
engine: 'html5',
format: 'dash'
},
{
engine: 'html5',
format: 'progressive'
}
]
}
};Possible values:
"DEBUG", "INFO", "TIME", "WARN", "ERROR", "OFF"
{ dash: Array<PKMediaSourceObject> hls: Array<PKMediaSourceObject> progressive: Array<PKMediaSourceObject>, options: PKMediaSourceOptionsObject, type: string, dvr: boolean, metadata: PKMetadataConfigObject, id?: string, poster?: string, duration?: number, captions?: Array<PKExternalCaptionObject> }{ 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 config = { sources: { hls: [ { mimetype: 'application/x-mpegurl', url: '//PATH/TO/MANIFEST.m3u8' } ] } };var config = { sources: { dash: [ { mimetype: 'application/x-mpegurl', url: '//PATH/TO/MANIFEST.mpd' } ] } };var config = { 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,languageandlabel.var config = { sources: { captions: [ { url: 'www.path.to/your/captions/file', type: 'vtt', default: true, language: 'en', label: 'English' } ] } };
{ [plugin: string]: Object }This should map the plugin to its config object.
var config = { plugins: { myAwesomePlugin1: {}, myAwesomePlugin2: {} } };var config = { plugins: { myAwesomePlugin: { disable: true } } };
{ audioLanguage: string, textLanguage: string, useNativeTextTrack: boolean, enableCEA708Captions: boolean, captionsTextTrack1Label: string, captionsTextTrack1LanguageCode: string, captionsTextTrack2Label: string, captionsTextTrack2LanguageCode: string, volume: number, startTime: number, playsinline: boolean, crossOrigin: string, preload: string, autoplay: boolean, allowMutedAutoPlay: boolean, loop: boolean, muted: boolean, options: PKPlaybackOptionsObject, streamPriority: Array<PKStreamPriorityObject>, preferNative: PKPreferNativeConfigObject }{ audioLanguage: "", textLanguage: "", useNativeTextTrack: false, enableCEA708Captions: false, captionsTextTrack1Label: "English", captionsTextTrack1LanguageCode: "en", captionsTextTrack2Label: "Spanish", captionsTextTrack2LanguageCode: "es", volume: 1, startTime: -1, playsinline: true, preload: "none", autoplay: false, allowMutedAutoPlay: true, loop: false, muted: false, 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 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 are captions in the user's system language then this language 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.
If set to True, the native browser captions will be displayed.
The value must be in the range of 0-1.
var config = { playback: { volume: 0.5 } };Default -1 refer to automatic start time - 0 to VOD and live edge to live.
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&allowMutedAutoPlayoptions read here.This is a Boolean attribute that indicates the default setting of the loop playback option. If set, the player will restart playback upon completion. The attribute's default value is false, which means that the video will pause when the video is finished playing.
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.
{ html5: { hls: Object, dash: Object } }{ html5: { hls: {}, dash: {} } }
- For
hlsconfiguration, see the hls.js documentation.- For
dashconfiguration, 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.jslibrary.{ 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.
{ id: string, ks: string, partnerId: number, uiConfId: number }{ 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'; } } };
Now that we've learned about the different options available in the player configuration, let's see how does the source selection logic works.