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.