Once the UI has been customized to suit your requirements, the next step is to prepare it for production and ensure its seamless integration across various platforms.

Web

Depending on the structure of your build pipeline and workflow, you may integrate it directly within your App/Package or opt to independently host and include the UI javascript and CSS files.

After loading the UI Javascript and CSS files, you can utilize them by initializing the UIManager instance.

Mobile

For iOS and Android, it is necessary to use single Javascript and CSS files for the UI. While it is feasible to host these files on a server, we highly recommend bundling them directly into the application to ensure offline accessibility.

1. To create those Javascript and CSS files, run the following command from the root folder of the UI project.

npx gulp npm-prepare

2. After the command is finished, the generated files can be located in the dist/js and dist/css folders with minified and non-minified files. Although both versions are provided and supported, we highly recommend utilizing the minified version in production to optimize file size.
3. On mobile, add the JS and CSS files to your App Bundle
4. Configure the paths to the files so the Player/PlayerView can locate them

let playerConfig = PlayerConfig()

playerConfig.styleConfig.playerUiJs = Bundle.main.url(forResource: "bitmovinplayer-ui", withExtension: "js")!
playerConfig.styleConfig.playerUiCss = Bundle.main.url(forResource: "bitmovinplayer-ui", withExtension: "css")!

val viewConfig = PlayerViewConfig(
    uiConfig = UiConfig.WebUi(
        // Set URLs for the JavaScript and the CSS
		    jsLocation = "file:///android_asset/custom-bitmovinplayer-ui.min.js",
        cssLocation = "file:///android_asset/custom-bitmovinplayer-ui.min.css"
    )
)

const playerConfig = {
  location: {
    ui: '//domain.tld/path/to/bitmovinplayer-ui.js',
    ui_css: '//path/to/bitmovinplayer-ui.css',
  },
};

Please note that this approach necessitates the use of default initialization methods on the UIFactory namespace.

For iOS, the UI initialization method can be configured using uiManagerFactoryFunction, while for Web, we strongly recommend implementing the approach outlined in the Web section above.

5. Pass the config created above to the Player on Web and iOS and to the PlayerView on Android

let player = PlayerFactory.createPlayer(playerConfig: playerConfig)

// Create a PlayerView with our Player and PlayerViewConfig
val playerView = new PlayerView(this, player, viewConfig);

const player = new Player(document.getElementById('player'), playerConfig);