Skip to main content

UI Customization

By fully customizing your Web player UI using the Web Player SDK, you can create a unique and seamless playback experience for your users.

Step 1: Create a Custom UI

Follow the provided sample codes to disable the official UI and create a custom one:

import {createPlayer} from '@blendvision/player'

const playerInstance = createPlayer('playerId', {
// config
})

playerInstance.switchControlMode('HIDE')

Step 2: Add Customized UI Components

Use a container to wrap your UI and the player SDK, and the example below only represents that the all UI has been arranged to the center above our player SDK id="playerId".


And, use the provided [APIs](/docs/sdk/player/web/intro) to create controllers on your player UI for custom playback behavior.
<div
style={{
position: 'relative',
}}
>
<div id="playerId"/>
<button
style={{position: 'absolute', top: '35%', left: '20%'}}
onClick={() => playerInstance.play()}
>
play
</button>
<button
style={{position: 'absolute', top: '40%', left: '20%'}}
onClick={() => playerInstance.pause()}
>
pause
</button>
<button
style={{position: 'absolute', top: '45%', left: '20%'}}
onClick={() => playerInstance.seek(30)}
>
seek to timestamp
</button>
</div>
tip

Remember to set the callback for using our playback SDK API for operating the Video.