# UI Library: basic usage
Shaka Player has an optional UI library that provides a high-quality accessible
localized UI. It is an alternate bundle from the base
Shaka Player library, that adds additional UI-specific classes and a streamlined
declarative style of setup.
#### Setting up the UI library
Setting up a project with the UI library is even easier than setting one up without.
Set up controls with HTML data attributes:
```html
```
```js
// myapp.js
const manifestUri =
'https://storage.googleapis.com/shaka-demo-assets/angel-one/dash.mpd';
async function init() {
// When using the UI, the player is made automatically by the UI object.
const video = document.getElementById('video');
const ui = video['ui'];
const controls = ui.getControls();
const player = controls.getPlayer();
// Attach player and UI to the window to make it easy to access in the JS console.
window.player = player;
window.ui = ui;
// Listen for error events.
player.addEventListener('error', onPlayerErrorEvent);
controls.addEventListener('error', onUIErrorEvent);
// Try to load a manifest.
// This is an asynchronous process.
try {
await player.load(manifestUri);
// This runs if the asynchronous load is successful.
console.log('The video has now been loaded!');
} catch (error) {
onPlayerError(error);
}
}
function onPlayerErrorEvent(errorEvent) {
// Extract the shaka.util.Error object from the event.
onPlayerError(event.detail);
}
function onPlayerError(error) {
// Handle player error
console.error('Error code', error.code, 'object', error);
}
function onUIErrorEvent(errorEvent) {
// Extract the shaka.util.Error object from the event.
onPlayerError(event.detail);
}
function initFailed(errorEvent) {
// Handle the failure to load; errorEvent.detail.reasonCode has a
// shaka.ui.FailReasonCode describing why.
console.error('Unable to load the UI library!');
}
// Listen to the custom shaka-ui-loaded event, to wait until the UI is loaded.
document.addEventListener('shaka-ui-loaded', init);
// Listen to the custom shaka-ui-load-failed event, in case Shaka Player fails
// to load (e.g. due to lack of browser support).
document.addEventListener('shaka-ui-load-failed', initFailed);
```
#### Enabling VR
To enable the playback of VR content, there are two possibilities:
1. Enable via UI config:
```js
const config = {
'displayInVrMode': true
}
ui.configure(config);
```
2. Content is automatically treated as VR if it fits the following criteria:
- HLS or DASH manifest
- fMP4 segments
- Init segment contains `prji` and `hfov` boxes
If you want the VR to be rendered outside of the main container, add the
`data-shaka-player-vr-canvas` tag to a canvas element on the page.
Note: VR is only supported for clear streams or HLS-AES stream. DRM prevents
access to the video pixels for transformation.
#### Enabling Chromecast support
If you'd like to take advantage of Shaka's built-in Chromecast support,
you will need to provide us with your cast receiver application id.
If you want to track cast status changes, you should also
set up a listener for the 'caststatuschanged' events.
```html
```
With the UI library set up this way, it will provide a button for casting to a
ChromeCast when appropriate, without any extra code.
Next, let's add a listener to the 'caststatuschanged' event in myapp.js:
```js
controls.addEventListener('caststatuschanged', onCastStatusChanged);
function onCastStatusChanged(event) {
const newCastStatus = event['newStatus'];
// Handle cast status change
console.log('The new cast status is: ' + newCastStatus);
}
```
#### Enabling Android Receiver Apps
If you'd like to take advantage of Android Receiver App support,
you will need to provide a boolean flag to enable support for
casting to an Android receiver app.
```html
` element
or a `` tag inside it to enable auto loading of the specified content.
```html
```
or
```html
```
Use several `` tags to provide backup manifest urls in case the `load()`
call to the first one fails.
```html
```
NOTE: Please DO NOT specify both the `src` attribute on the `