Playback Controls - Overview
The Playback Controls of the Red5 Pro WebRTC SDK provide a cross-browser and unified look-and-feel for playback of streams across the supported platforms of
By enabling the Red5 Pro WebRTC SDK Playback Controls, users have the ability to due the following during stream playback:
- Pause and Resume the Stream
- Mute and Unmute the Audio of the Stream
- Control the Volume of the Audio of the Stream when unmuted
- Toggle FullScreen mode (using the screenfull library dependency)
- Seek to Timeframe on VOD (Video on Demand)
To turn on the custom Red5 Pro WebRTC SDK Playback Controls simply add the following to the target
audio element that will play back the stream:
Internally, the SDK will read these attributes and override the default browser controls, replacing them with the custom Red5 Pro SDK Playback Controls.
<video id="red5pro-subscriber" controls class="red5pro-media"></video>
The following describes the resource dependencies required to properly display the controls and support fullscreen mode.
In order to view the controls, the
red5pro-media.css file included in the Red5 Pro WebRTC SDK distribution needs to be added as a resource to the page.
Somewhere in the
head tag, add the following:
<link href="lib/red5pro/red5pro-media.css" rel="sylesheet">
The full screen functionality utilized the Open Source screenfull library. You will need to include that as a script depencency on the page as well if you intend to support full screen mode (by default the Red5 Pro Playback Controls show fullscreen toggle buttons).
Somewhere in the
If you do provide the
red5pro-mediaclass on the
audioelement, and still include the
controlsattribute, the SDK will allow for the default browser controls.
You can enable the ability to automatically start playback of the stream once it has been loaded by providing the
autoplay attribute on the
<video id="red5pro-subscriber" class="red5pro-media" controls autoplay></video>
You can set the playback to be automatically muted upon initial load and playback of the stream by providing the
muted attribute on the
<video id="red5pro-subscriber" class="red5pro-media" controls autoplay muted></video>
muted attributes are not unique to the Red5 Pro SDK and Playback Controls API. They are browser-accepted attributes of HTMLMediaElement (e.g.,
<audio>). The Red5 Pro SDK reads these attributes in order to determine how you wish to present controls and play back the stream.