Playback Controls UI

The Red5 Pro WebRTC 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 WebRTC 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 WebRTC SDK has the following declarations:

Declaration	Related Control	Description
`red5pro-media-container`	Parent container element for the `video` or `audio` element.	Assigned to the class list of parent container of media.
`red5pro-media`	The `video` or `audio` element.	Used to designate the media element as being eligible for Red5 Pro Playback Controls.
`red5pro-media-background`	The background for the `video` or `audio` element.	Sets the background style properties for the media element.
`red5pro-media-container-full-screen`	The media element container.	The style properties to assign for the media element container to be presented when in full screen mode.
`red5pro-media-control-bar`	The control bar container for the Red5 Pro Playback Controls.	Layout and parent style assignment for the control bar.
`red5pro-media-control-bar-show`	The control bar container.	This is as a dispaly flag on the control bar to reveal it upon roll-over.
`red5pro-media-control-element`	Top-level style declaration for all elements within the control bar.	Base style assignments for all immediate children of the control bar.
`red5pro-media-time-field`	The time display.	During playback, the playhead time is shown.
`red5pro-media-slider`	Top-level style declaration for slider control.	Slider controls are used in the seek control and the volume control.
`red5pro-media-slider-track`	Top-level style declaration for the backing track element of a slider control.	Used for all slider controls.
`red5pro-media-slider-progress`	Tpop-level style declaration for the progress element that overlays the track element of a slider control.	Used for all slider controls.
`red5pro-media-slider-button`	Top-level style declaration for the button element of a slider control.	Used for all slider controls. Defaulted to rounded element.
`red5pro-media-volume-slider`	Volume slider control.	A slider control with a button and track.
`red5pro-media-seektime-slider`	Seek time slider control.	A slider control with a button and track.
`red5pro-media-element-button`	Top-level style declaration for the button elements for play/pause, mute/unmute, and fullscreen toggle.
`red5pro-media-element-button-disabled`	Top-level style declaration for button element in disabled state.
`red5pro-media-play-button`	Play/Pause button.	The display while in the `Paused` and `Idle` state of the stream.
`red5pro-media-pause-button`	Play/Pause button.	The display while in the `P;aying` state of the stream.
`red5pro-media-unmute-button`	Mute/Unmute button.	The display while the stream is muted.
`red5pro-media-mute-button`	Mute/Unmute button.	The display while the stream is not muted.
`red5pro-media-fullscreen-button`	Fullscreen toggle button.	The display while the stream is not presented in fullscreen mode.
`red5pro-media-exit-fullscreen-button`	Fullscreen 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.