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.