MKPlayer is an HTML5 video player SDK used for playing back HLS and DASH adaptive bitrate streams without using browser plugins.
Our main goal is to provide a simple, abstract API that allows you to quickly get video playback of MediaKind streams running on your web page.
Please reach out to MediaKind team as a player (mandatory) and analytics (optional) license subscription is required and respective domains must be whitelisted on which our player is expected to run on.
You can checkout the latest version of MKPlayer from npmjs.com using the following command:
npm i @mediakind/mkplayer
After getting hold of the latest version of MKPlayer from NPM, you need to include mkplayer.js and mkplayer-ui.css in the <head> of your HTML page as below:
<head>
<title>My Video Player</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- MKPlayer JavaScript and CSS -->
<script type="text/javascript" src="./node_modules/@mediakind/mkplayer/mkplayer.js"></script>
<link rel="stylesheet" href="./node_modules/@mediakind/mkplayer/mkplayer-ui.css">
</head>
<div> for your video container.As the next step you need to define a HTML <div> in your HTML page <body>. This is going to be your video container used by the player for playback.
<body>
<div id="video-container"></div>
</body>
Now, inside your JavaScript source, we can initialize the player and configure the player for your needs as below:
// 1. Grab the video container
const videoContainer = document.getElementById("video-container");
// 2. Prepare the player configuration
const playerConfig = {
key: "PLAYER_LICENSE_HERE",
playback: {
muted: true,
autoplay: true
},
// Subscribe to player events
events: {
[mkplayer.MKPlayerEvent.Error]: (event) => {
console.log("Encountered player error: ", JSON.stringify(event));
},
[mkplayer.MKPlayerEvent.TimeChanged]: (event) => {
console.log("Current player position: ", event.time);
}
}
};
// 3. Initialize the player with video container and player configuration
let player = new mkplayer.MKPlayer(videoContainer, playerConfig);
Please see MKPlayerConfig for more details.
From this point onwards, we are all set to use the many player API's and handle and respond to the many player events.
Optionally you can dynamically subscribe to player events in addition to the ones subscribed in player configuration as below:
player.on(mkplayer.MKPlayerEvent.SourceLoaded, (event) => {
console.log("Source loaded successfully!");
});
player.on(mkplayer.MKPlayerEvent.Ready, (event) => {
console.log("Player is ready for playback!");
});
At this step, we have a player which is properly initialized and ready for use. All we need to do now is prepare a source configuration object as below:
const sourceConfig = {
title: "Title for your source",
description: "Brief description of your 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"
};
When attempting to setup playback for DRM protected content, we need to pass in a MKDRMConfig as one of the properties to the source configuration above as below:
const sourceConfig = {
title: "Title for your source",
description: "Brief description of your 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",
// when your source is DRM protected
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",
}
}
}
};
Please see MKSourceConfig for more details.
Now with the above source config we are all set to start playback as below:
player.load(sourceConfig)
.then(() => {
// you can also get notified when subscribed to `SourceLoaded` event.
console.log("Source loaded successfull!");
})
.catch((error) => {
console.error("An error occurred while loading the source!);
});
To stop the current playback session:
player.unload()
.then(() => {
// you can also get notified when subscribed to `SourceUnloaded` event.
console.log("Source unloaded successfully!");
})
.catch((error) => {
console.error("Source unload failed with error: ", error);
});
Finally to destroy the player instance and release all held resources, you can call destroy(). You must create a new instance of the player after a call to destroy().
player.destroy();
// It is recommended to wait for `Destroy` event notification after a call to `destroy()`.