THEOplayer 3.X Demo: Adding buttons and text to the default UI

This page demonstrates how you can set a default error message. For example, when you assign an unavailable stream to THEOplayer, you will see the following error message.

However, you might want to display another error to your viewers:

There are -generally speaking- two approaches to achieve this:

1. Localization
2. error event

1. Localization

The Localization approach is useful when you know which error message you want to map (or translate). Localization is also the fastest method to display custom error messages.

There's a Localization example at https://www.theoplayer.com/theoplayer-demo-language-localization so read up!
If you want to extend this localization example to also map errors, you need to provide the default THEOplayer error message as a key, and your custom error message as a value. For example:

    var player = new THEOplayer.Player(videoContainer, {
	libraryLocation: 'https://cdn.theoplayer.com/dash/theoplayer/',
	ui: {
		language: 'langCode',
		languages: { 'langCode':
			{
				"Could not load the manifest file. Make sure the source is set correctly and that CORS support is enabled.": "Your stream is currently unavailable. Please try again.",
				"Play": "Reproducir",
				"Pause": "Pausa",
				...
			}
		}
	}
});

This approach is advised when you want to map a specific set of common errors to custom messages.

2. error event

The error event allows you to catch errors. In the event-handler of an error, you can overlay custom elements on top of THEOplayer. For example:

player.addEventListener('error', function(e) {
    if (e.error === "Could not load the manifest file. Make sure the source is set correctly and that CORS support is enabled.") {
        // display custom error message
        // ...

        // or overwrite existing content
        var errorMessage = player.element.parentNode.querySelector('.vjs-error-display .vjs-modal-dialog-content');
        if (errorMessage) {
            errorMessage.innerText = "Your stream is currently unavailable. Please try again.";
        }
    }
});
    

This approach is advised if you want to create a truly custom experience, and you don't want to be limited by the THEOplayer API.