How to display an error message articifially

Knowledge
1

The Bitmovin Web Player offers a big amount of flexibility when it comes to catching errors with event handlers, customizing the error message to the needs of your users etc.
Our Sample Apps are showing the possibilities quite extensively.

In some cases, you might want to use the player UI to display your own errors even without having the player actually firing an error. You can use the player UI for this.

Step by step guide

1- Instantiate the UI separately
The player comes with its own instance of the UI, but in our case, we want to instantiate the UI outside of the player

To instantiate the UI separately, you need to disable the default UI

        const config = {
            key: 'YOUR-PLAYER-LICENSE-KEY',
            // Disable built-in UI
            ui: false,
        };

And instantiate your own instance of the UI

let uiManager = new bitmovin.playerui.UIManager(player, createUIContainer());

2- Create your own error code and message and use your own logic

Example:

              player1 = uiManager.currentUi.playerWrapper.getPlayer();
                player1.on("error", console.log)
                player1.fireEventInUI("error", {
                    message: "Your account has been disabled",
                    code: 9999
                });

Note that when triggering an error manually in the UI, it doesn’t impact anything for the player instance, so you might need to be mindful of it in your logic

Examples of use case :
1- Display an error message related to the business logic (account disabled)
2- Receive errors from the Chromecast receiver and forward them to the player (sender)

Full example :

        const config = {
            key: 'YOUR-PLAYER-LICENSE-KEY',
            // Disable built-in UI
            ui: false,
        };
        let container = document.getElementById('player');
        let player = new bitmovin.player.Player(container, config);
        let source = {
           dash: 'https://bitdash-a.akamaihd.net/content/sintel/sintel.mpd',
        };
        // Create UI instance
        var uiManager = bitmovin.playerui.UIFactory.buildDefaultUI(player, {});
        // Setup the player
        player.load(source).then(function() {
                console.log('Load Success');

                // trigger an error and unload the source after 2000ms
                setTimeout(() => {
                    player1 = uiManager.currentUi.playerWrapper.getPlayer();
                    player1.on("error", console.log)
                    player1.fireEventInUI("error", {
                        message: "your account has been disabled",
                        name: "your account has been disabled",
                        code: 9999
                    })
                    player.unload()
                }, 2000);
            });