MKCustomUI plugin allows developers to implement a customizable playback UI for MKPlayer Web SDK using Bitmovin Player V3. Previously, MKPlayer only supported a boolean flag (ui: true/false) to enable or disable the default UI. This limited UI flexibility and did not provide any hooks for customization. So, with MKCustomUI, additional playback controls, buttons, and styling can be configured to meet to the functional requirements. Create fully custom UI controls and Configure UI components via UIConfig on Bitmovin UI interface behaviors.
Install plugin
npm install @mediakind/mkplayer-customui-plugin
Import plugin in your source
import { MKCustomUI } from "@mediakind/mkplayer-customui-plugin";
Ensure that playerConfig.ui is set to false if you use MKCustom plugin
const playerConfig = {
...otherConfigs,
ui: false, // disable Bitmovin UI
};
Initialize MKPlayer as usual
const player = new mkplayer.MKPlayer(videoContainer, playerConfig);
Initialize MKCustomUI with MKPlayer instance
const MKCustomUI = new mkplayercustomuiPlugin.MKCustomUI(player);
UIConfig Interface for configure uicontainer
const uiConfig = {
disableAutoHideWhenHovered: false,
playbackSpeedSelectionEnabled: true,
metadata: {
markers: [
{ time: 24, title: 'Marker1' },
{ time: 69, title: 'Marker2' },
],
}
};
Factory Default methods to create UIs
MKCustomUI.buildDefaultUI(uiConfig);
UIContainer the UI controls to add to the player
const UiContainer = new MKCustomizeUI.UIContainer({
components: [
subtitleOverlay,
new MKCustomizeUI.BufferingOverlay(),
new MKCustomizeUI.ReplayButton(),
new MKCustomizeUI.PlaybackToggleButton(),
new MKCustomizeUI.QuickSeekButton({
seekSeconds: -10
}),
new MKCustomizeUI.QuickSeekButton({
seekSeconds: 10
}),
new MKCustomizeUI.VolumeToggleButton()
]
});
For Custom UI Controls
MKCustomUI.customUi(UiContainer, UiConfig);
1. Include MKPlayer SDK in the <head> of your HTML file as below.
2. Include Bitmovin CSS in the <head> of your HTML file as below.
(https://cdn.jsdelivr.net/npm/bitmovin-player-ui@3/dist/css/bitmovinplayer-ui.css)
3. Once player is loaded (from SourceLoaded event) you can initialize the player UI
4. On stopping playback (from SourceUnloaded event) you can release the player UI