/

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 WebRTC and HLS.

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)

Enabling the Controls

To turn on the custom Red5 Pro WebRTC SDK Playback Controls simply add the following to the target video or audio element that will play back the stream:

  • controls
  • class="red5pro-media"

Internally, the SDK will read these attributes and override the default browser controls, replacing them with the custom Red5 Pro SDK Playback Controls.

Example

<video id="red5pro-subscriber" controls class="red5pro-media"></video>

Playback Controls Dependencies

The following describes the resource dependencies required to properly display the controls and support fullscreen mode.

css

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">

screenfull

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 head tag - or before the declaration of the Red5 Pro SDK JavaScript dependency - add the following:

<script src="https://github.com/sindresorhus/screenfull.js/blob/gh-pages/dist/screenfull.min.js"></script>

If you do provide the red5pro-media class on the video or audio element, and still include the controls attribute, the SDK will allow for the default browser controls.

Autoplay

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 or audio element:

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

Auto Mute

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 or audio element:

<video id="red5pro-subscriber" class="red5pro-media" controls autoplay muted></video>

Additional Information

The controls, autoplay and muted attributes are not unique to the Red5 Pro SDK and Playback Controls API. They are browser-accepted attributes of HTMLMediaElement (e.g., <video> and <audio>). The Red5 Pro SDK reads these attributes in order to determine how you wish to present controls and play back the stream.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video