/

Playback Controls UI


Playback Controls UI

The Red5 Pro HTML SDK Playback Controls are styled based on the provided red5pro-media.css file of the distribution.

Red5 Pro Media Container

The video (or audio) declaration for a Red5 Pro Subscriber cannot have the Playback Controls UI placed within it. As such, the Red5 Pro HTML SDK detects if the video or audio element is wrapped by a container with a class declaration of red5pro-media-container and if non-existant, creates one and adds the video or audio element as a child.

By having a red5pro-media-container element, the SDK can then add the Player Controls UI overlay on the video or audio element. If you would like to provide your own container:

<div class="red5pro-media-container">
  <video id="red5pro-subscriber" class="red5pro-media red5pro-media-background" controls autoplay>
</div>

Playback Controls Style Declarations

The CSS Style Declaration from the red5pro-media.css file delivered with the Red5 Pro HTML SDK has the following declarations:

DeclarationRelated ControlDescription
red5pro-media-containerParent container element for the video or audio element.Assigned to the class list of parent container of media.
red5pro-mediaThe video or audio element.Used to designate the media element as being eligible for Red5 Pro Playback Controls.
red5pro-media-backgroundThe background for the video or audio element.Sets the background style properties for the media element.
red5pro-media-container-full-screenThe media element container.The style properties to assign for the media element container to be presented when in full screen mode.
red5pro-media-control-barThe control bar container for the Red5 Pro Playback Controls.Layout and parent style assignment for the control bar.
red5pro-media-control-bar-showThe control bar container.This is as a dispaly flag on the control bar to reveal it upon roll-over.
red5pro-media-control-elementTop-level style declaration for all elements within the control bar.Base style assignments for all immediate children of the control bar.
red5pro-media-time-fieldThe time display.During playback, the playhead time is shown.
red5pro-media-sliderTop-level style declaration for slider control.Slider controls are used in the seek control and the volume control.
red5pro-media-slider-trackTop-level style declaration for the backing track element of a slider control.Used for all slider controls.
red5pro-media-slider-progressTpop-level style declaration for the progress element that overlays the track element of a slider control.Used for all slider controls.
red5pro-media-slider-buttonTop-level style declaration for the button element of a slider control.Used for all slider controls. Defaulted to rounded element.
red5pro-media-volume-sliderVolume slider control.A slider control with a button and track.
red5pro-media-seektime-sliderSeek time slider control.A slider control with a button and track.
red5pro-media-element-buttonTop-level style declaration for the button elements for play/pause, mute/unmute, and fullscreen toggle.
red5pro-media-element-button-disabledTop-level style declaration for button element in disabled state.
red5pro-media-play-buttonPlay/Pause button.The display while in the Paused and Idle state of the stream.
red5pro-media-pause-buttonPlay/Pause button.The display while in the P;aying state of the stream.
red5pro-media-unmute-buttonMute/Unmute button.The display while the stream is muted.
red5pro-media-mute-buttonMute/Unmute button.The display while the stream is not muted.
red5pro-media-fullscreen-buttonFullscreen toggle button.The display while the stream is not presented in fullscreen mode.
red5pro-media-exit-fullscreen-buttonFullscreen toggle button.The display while the stream is presented in fullscreen mode.

These declarations can be changed with any other styling to match the look-and-feel of your brand. Please refer to Creating Custom Controls UI for an example.