Bitmovin UI Config

Support
, ,
1

Hello Bitmovin Community,

I’m working on seek bar sailing with the keyboard arrow controls in bitmovin player. I’m not getting how to use the below config property in bitmovin player config

This is what I have as config.
const playerConfig = {
key:‘bitmovin-key’,
ui: {
keyStepIncrements: { leftRight: 10, upDown: 0 },
snappingRange: 10
},
};

const playerInstance = new Player(playerDiv?.current, playerConfig)

Please help if you can. Thanks

2

Hi @priyadharshan.b,

Currently we only support properties from the UIConfig to be passed through the PlayerConfig.

In order to customize the keyStepIncrements you would need to use the Bitmovin Player Web UI directly. (Examples can be found here).

And then when initializing the SeekBar component you can specify those values through the SeekBarConfig. This would look like this:

new SeekBar(
    { 
        label: new SeekBarLabel(),
        keyStepIncrements: { leftRight: 10, upDown: 0 },
        snappingRange: 10
    }
)
3

Hi @davidsteinacher ,
Thanks for your reply. Can I know where exactly I need to use this function. As per my observation Can I go with this format?

import { SeekBar, UIContainer, UIManager } from ‘bitmovin-player-ui’;

const myUi = new UIContainer({
components: [
new SeekBar(
{
label: new SeekBarLabel(),
keyStepIncrements: { leftRight: 10, upDown: 0 },
snappingRange: 10
}
)
],
});

const myUiManager = new UIManager(player, myUi);

4

Yes exactly. The provided code snipped should work.

If you need more UI elements than just the SeekBar, you can have a look at our UIFactory to see how the full UI is built per default.

You could copy the content of UIFactory and only replace the SeekBar initialization with the config you need.