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.
Include mkplayer.js and mkplayer-ui.css in your HTML file as below:
<script type="text/javascript" src="mkplayer.js"></script>
<link rel="stylesheet" href="mkplayer-ui.css">
Add a <div> for the video player as below:
<div id="player-container"></div>
Next initialize the video player as below:
// Player configuration
const playerConfig = {
ui: true,
key: "<YOUR PLAYER LICENSE KEY>",
playback: {
muted: true,
autoplay: true
}
}
// Player container element
const playerContainer = document.getElementById("player-container");
// Initialize player
let player = new mkplayer.MKPlayer(playerContainer, playerConfig);
Register for various player events prior to loading a source but after player initialization using one of the methods as shown below:
// Player configuration
const playerConfig = {
ui: true,
key: "<YOUR PLAYER LICENSE KEY>",
playback: {
muted: true,
autoplay: true
},
events: {
[mkplayer.MKPlayerEvent.SourceLoaded]: (event) => {
console.log("Source loaded: ", event);
},
[mkplayer.MKPlayerEvent.Playing]: (event) => {
console.log("Playing: ", event);
},
[mkplayer.MKPlayerEvent.Paused]: (event) => {
console.log("Paused: ", event);
}
}
}
player.on(mkplayer.MKPlayerEvent.SourceLoaded, (event) => {
console.log("Source loaded: ", event);
});
player.on(mkplayer.MKPlayerEvent.Playing, (event) => {
console.log("Playing: ", event);
});
player.on(mkplayer.MKPlayerEvent.Paused, (event) => {
console.log("Paused: ", event);
});
Load a source for starting playback:
// Prepare the source configuration object
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"
}
// Load the source to start playback
player.load(sourceConfig)
.catch((error) => {
console.error("Load failed with error: ", error);
});
Unload the currently playing source to stop playback:
player.unload()
.catch((error) => {
console.error("Source unload failed with error: ", error);
});
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();