Understanding the MediaController component

The interface for the MediaController component depends on its Media.controllerPolicy and Media.backgroundStyle properties. The Media.controllerPolicy property determines if the media control set is always visible, collapsed, or only visible when the mouse hovers over the control portion of the component. When collapsed, the controller draws a modified progress bar, which is a combination of the loadbar and the playbar. It shows the progress of the bytes being loaded at the bottom of the bar, and the progress of the playhead just above it. When expanded, the controller draws an enhanced version of the playbar/loadbar, which contains the following items:

Text labels on the left that indicate the playback state (streaming or paused), and on the right that indicate playhead location, in seconds
A playhead location indicator
A slider, which users can drag to navigate through the media

The MediaController component also provides the following items:

A Play/Pause button
Go to Beginning and Go to End buttons, which navigate to the beginning and end of the media, respectively
A volume control that consists of a slider, a mute button, and a maximum volume button

Both the collapsed and expanded states of the MediaController component use the Media.backgroundStyle property. This property determines whether the controller draws a chrome background (the default) or allows the media background to display from behind the controls.

The MediaController component has an orientation setting, Media.horizontal, which you can use to draw the component with a horizontal orientation (the default) or a vertical one. With a horizontal orientation, the playbar tracks playing media from left to right. With a vertical orientation, the playbar tracks media from bottom to top.

You can associate the MediaDisplay and MediaController components with each other by using the Media.associateDisplay() and Media.associateController() methods. These methods allow the MediaController instance to update its controls based on events broadcast from the MediaDisplay instance, and allow the MediaDisplay component to react to user settings in the MediaController.

View comments on LiveDocs