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


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.
position: 'relative',
<div id="playerId"/>
style={{position: 'absolute', top: '35%', left: '20%'}}
onClick={() =>}
style={{position: 'absolute', top: '40%', left: '20%'}}
onClick={() => playerInstance.pause()}
style={{position: 'absolute', top: '45%', left: '20%'}}
onClick={() =>}
seek to timestamp

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