MKPlayer Customization

MKPlayer customization

This section documents the @mediakind/mkplayer-customui-plugin, which allows you to build and customize playback user interfaces on top of Bitmovin Player UI V3.

Previously, MKPlayer supported a basic ui: true | false flag to show or hide the default playback UI. The MKCustomUI plugin extends this by enabling full layout, control, behavior, and styling customization.

What you can do

• Build MKPlayer’s default-style UI
• Create fully custom playback UIs
• Configure UI behavior through uiConfig
• Use responsive UI variants for mobile and browser layouts
• Style playback controls using CSS class overrides
• Apply UI updates dynamically at runtime based on screen size, app state, and user context

In this section

Install and initialize

Install the plugin, disable the default UI, and initialize MKPlayer and MKCustomUI.

UI configuration and variants

Configure uiConfig, build responsive layouts, and use lifecycle events.

MKCustomUI API

Reference list of constructors and UI factory methods.

CSS customization

Apply CSS overrides for seekbars, typography, and branded visual styling.

External references

• NPM package: @mediakind/mkplayer-customui-plugin
• API docs: MKCustomUI API reference
• Sample code: MKPlayerSamples custom UI example