Interface MKSourceConfig

Source configuration interfcae.

Direct Source

// Prepare the source configuration object for direct source
// It is recommended to pass only one source type in the config.
// Player will choose a source by device support when multiple
// sources are specified.
const sourceConfig = {
   title: "MySource",
   description: "My first MKPlayer Source",
   poster: "https://my-cdn.com/mysource/poster.png",
   hls: "https://my-cdn.com/mysource/hls/index.m3u8",
   dash: "https://my-cdn.com/mysource/dash/manifest.mpd",
}

Specifying DRM configuration for direct sources. Please see documentation for MKDrmConfig.

const sourceConfig: {
    // in addition to the same source config as above
    // add the drm config as below.
    drm: {
        widevine: {
            LA_URL: "License server URL",
            headers: { // custom headers if available
                "X-CustomHeader1": "Custom header value",
                "X-CustomHeader2": "Custom header value",
            }
        },
        playready: {
            LA_URL: "License server URL",
            headers: { // custom headers if available
                "X-CustomHeader1": "Custom header value",
                "X-CustomHeader2": "Custom header value",
            }
        },
        // FairPlay DRM applies only to HLS sources on apple devices
        fairplay: {
            LA_URL: "License server URL",
            certificateURL: "Certificate URL",
            headers: { // custom headers if available
                "X-CustomHeader1": "Custom header value",
                "X-CustomHeader2": "Custom header value",
            }
        }
    }
}

MediaKind Registered Source

For a registered source you must also specify MKAssetType along with the source config as below.

const sourceConfig = {
    title: "MediaKind Registered Source",
    poster: "https://my-cdn.com/mysource/poster.png",
    assetType: "live" // live | event | catchup | dvr | vod
    registered: {
        mediaId: "LIVE1234",
        applicationToken: "1234", // must for live and event and dvr
        environmentConfig: {
            ownerUid: "azuki",    // always azuki
            serverUrl: "https://ottapp-appgw-amp-a.dev.mr.tv3cloud.com",
            authToken: "ENVIRONMENT STS AUTHENTICATION TOKEN STRING"
        }
    }
}

Finally call load to start playback with the given source config.

// Load the source to start playback
player.load(sourceConfig)
.catch((error) => {
   console.error("Load failed with error: ", error);
});

Hierarchy

  • MKSourceConfig

Properties

analytics? assetType? cdnOptions? dash? description? drm? hls? labeling? poster? progressive? registered? sessionId? smooth? sourceOptions? subtitleTracks? thumbnailTrack? timelineMarkers? title?

Properties

Optional analytics

analytics?: MKAnalyticsConfig

Bundled Analytics Configuration used to specify per-stream metadata and other settings.

For more information, please see documentation for MKAnalyticsConfig.

Optional assetType

assetType?: MKAssetType

Asset type (Live, Event, Catchup, DVR or VOD)

While specifying the correct asset type is not mandatory, as a good practice it is recommended that this be configured correctly so that any internal logic that depends on the type of asset being played can be applied correctly.

For example how startOffset is applied to the current source is decided on the asset type configured.

Optional cdnOptions

cdnOptions?: MKCdnOptions

CDN Options.

Please note that these options only apply to registered.

Optional dash

dash?: string

The URL to the MPEG-DASH manifest file (MPD, Media Presentation Description) for the video to play.

The file has to be a valid MPD.

Optional description

description?: string

The description of the video source.

Optional drm

drm?: MKDrmConfig

DRM Configuration for encrypted sources.

Only to be used with hls, dash or smooth and not required for ull, registered, progressive or whep sources.

The SDK applies the necessary drm config for registered source internally so there is no need to configure it externally. Doing so can cause unexpected errors.

Optional hls

hls?: string

An URL to an HLS playlist file (M3U8). The file has to be a valid M3U8 playlist.

Optional labeling

labeling?: MKSourceLabelingStreamTypeConfig

Labeling config for the different stream types.

Optional poster

poster?: string

The URL to a preview image which will be displayed until video starts playing.

Make sure JavaScript is allowed to access it, i.e. CORS (for the HTML5/JavaScript player) must be enabled and a crossdomain.xml has to be there if it's not the same server as the website.

Optional progressive

progressive?: string | MKProgressiveSource[]

An Array of objects to video files, used for progressive download as fallback.

Is only used when all other methods fail. Multiple progressive files can be used, e.g. .mp4 and .webm files to support as many browsers as possible.

Optional registered

registered?: MKRegisteredSource

Mediakind Registered source.

Optional sessionId

sessionId?: string

Unique session identifer for the playback session with this source configuration.

When no session identifier is provided the SDK will generate one internally.

Optional smooth

smooth?: string

An URL to a SmoothStreaming manifest file (xml or ismc). The file has to be a valid smooth streaming manifest file.

Optional sourceOptions

sourceOptions?: MKSourceOptions

An object specifying advanced source specific options.

Optional subtitleTracks

subtitleTracks?: MKSubtitleTrack[]

An array of external subtitle tracks.

Example:

subtitleTracks: [{
    url: 'http://path/to/subtitles/vtt/file.vtt',
}]

Optional thumbnailTrack

thumbnailTrack?: MKThumbnailTrack

Sideload thumbnail tracks.

Note: Sideloaded tracks if configured here will have preference over the thumbnail tracks found in the stream/manifest itself.

Example:

thumbnailTrack: {
    url: 'http://path/to/thumbnail/vtt/file.vtt',
}

Optional timelineMarkers

timelineMarkers?: MKTimelineMarker[]

Add timeline markers to the player UI progress bar.

Note: This is only available when ui is enabled.

Note: This setting is recommended to be used only for VOD assets as an accurate timeline for Live cannot be determined until playback starts. So for a VOD asset known markers can be configured via this static setting here. Just ensure that the time specified in the timeline markers are within the seekable range (boundary) of the current VOD asset.

Example:

timelineMarkers: [
    { time: 24, title: 'Marker 1' },
    { time: 69, title: 'Marker 2' },
    { time: 105, title: 'Marker 3' },
    { time: 189, title: 'Marker 4' },
];

Optional title

title?: string

Title of the video source.

Settings

Member Visibility

Theme

On This Page