Customizing the HTML Player UI

The Bitmovin Player SDKs use the open source Bitmovin Player Web UI on all platforms, except tvOS. The UI is customizable in multiple ways.

Custom implementation

Since the Bitmovin Player Web UI is open source, it can be forked and modified to tailor to any application's needs. Refer to the Customizing the UI section for details.

In case a custom implementation of the Player UI is desired, configure the hosted JS and CSS files via the StyleConfig as shown in the following example:

const player = usePlayer({
  styleConfig: {
    playerUiCss: 'CUSTOM_UI_CSS_URL',
    playerUiJs: 'CUSTOM_UI_JS_URL',
  },
});

Sending and receiving custom messages between your application and the Player UI

This is supported on Android and iOS only.

For Android it requires Android Player SDK version 3.39.0 or higher.

When using your own build of the Player UI, you can communicate between your React Native application and the Player UI.

This two-way communication channel can be set up by creating a CustomMessageHandler and assigning it to PlayerView's customMessageHandler property.

Messages sent from the Player UI are received on the callbacks provided to the CustomMessageHandler.

Messages can be sent from the React Native integration to the Player UI via the customMessageHandler.sendMessage("YOUR_MESSAGE_IDENTIFIER", payload) method, where payload is a string, usually a serialized payload.

Messages sent from the React Native integration are received by callbacks assigned via: window.bitmovin.customMessageHandler.on('YOUR_MESSAGE_IDENTIFIER', (data?: string) => { /* perform action */});. See an example here.

Example

const customMessageHandler = useRef(
    new CustomMessageHandler({
      onReceivedSynchronousMessage: (
        message: string, 
        payload: string | undefined
      ) => {
        // This is called when a synchronous message is sent from the Player UI.
        // The returned value gets forwarded to the caller side.
        console.log('Received synchronous message', { message, payload });
        const returnValue = 'YOUR RETURN VALUE FOR THIS MESSAGE';
        return returnValue;
      },
      onReceivedAsynchronousMessage: (
        message: string,
        payload: string | undefined
      ) => {
        // This is called when a synchronous message is sent from the Player UI.
        // No return value is expected.
				console.log('Received asynchronous message', { message, payload });
      }
  	})
  ).current;

return (
  <View>
    <PlayerView
      player={player}
      customMessageHandler={customMessageHandler}
    />
    <Button
      title="Send custom message to Player UI"
      onPress={() => {
        // Send custom message to the Player UI using a message name and a serialized JSON payload
        // Receive these using:
        // window.bitmovin.customMessageHandler.on('customUiAction', (data?: string) => { /* action */ });
        customMessageHandler.sendMessage(
          'customUiAction',
          JSON.stringify({ customData: 'custom data' })
        );
      }}
    />
  </View>
)

A full example of this can be found here.

Custom CSS

Customization of the default built-in Bitmovin Player UI is possible via providing custom styling CSS by only configuring playerUiCss as shown in the following example:

const player = usePlayer({
  styleConfig: {
    playerUiCss: 'CUSTOM_UI_CSS_URL',
  },
});

Supplemental CSS

In case the usage of the default Bitmovin Player UI is sufficient with minor additional styling, it can be achieved via providing the URL to the additional CSS stylesheet via supplementalPlayerUiCss.

const player = usePlayer({
  styleConfig: {
    supplementalPlayerUiCss: 'SUPPLEMENTAL_UI_CSS_URL',
  },
});