/

Playback Controls API


Playback Controls API

The Red5 Pro HTML SDK Subscriber(s) have been updated to provide an API that interacts with stream playback. With the default Red5 Pro SDK Playback Controls enabled - as described in the previous section - the controls interact with this API internally.

The API is available to be interacted with as seen fit by the developer - and in the case if you, as a developer, want to create your own custom controls.

Method NameArgumentsDescription
playnoneRequest to start playing the stream.
pausenoneRequest to pause the current playback stream.
resumenoneRequest to resume the paused playback stream.
stopnoneRequest to stop the current playback stream.
mutenoneRequest to mute the audio of the current playback stream.
unmutenoneRequest to unmute the audio of the current playback stream.
setVolumeNumberRequest to set volume, between 0 and 1.
seekToNumberRequest to seek to (in seconds) in VOD playback.
toggleFullScreennoneRequest to toggle fullscreen mode. Requires screenfull.js library as a script dependency on page.

Playback Events API

The following events pertain to the playback of a stream through a Subscriber and are accessible from the SDK from SubscriberEventTypes.

AccessNameMeaning
VOLUME_CHANGE'Subscribe.Volume.Change'Invoked when a change to volume is detected during playback. From 0 to 1.
PLAYBACKTIMEUPDATE'Subscribe.Time.Update'Invoked when a change in playhead time is detected during playback. In seconds.
PLAYBACKSTATECHANGE'Subscribe.Playback.Change'Invoked when a change in playback state has occured, such as when going from a Playback.PAUSED state to Playback.PLAYING state.
FULLSCREENSTATE_CHANGE'Subscribe.FullScreen.Change'Invoked when a change in fullscreen state occurs during playback.

VOLUME_CHANGE

The VOLUME_CHANGE event occurs upon:

  • Initial start of playback
  • Response to mute and unmute
  • Response to setVolume

The event data is as shown:

{
  volume: <Number, value 0 - 1>
}

PLAYBACKTIMEUPDATE

The PLAYBACK_TIME_UPDATE event occurs in change to playhead time.

The event data is as shown:

{
  time: <Number, in seconds>,
  duration: <Number, in seconds>
}

The duration value is the known duration of the stream, and is only available during Video On Demand (VOD) playback.

PLAYBACKSTATECHANGE

The PLAYBACK_STATE_CHANGE event occurs upon change to playback state of the Subscriber.

the event data is as shown:

{
  code: <Int, see chart below>,
  state: <String, human readable form of code value>
}

The following code and corresponding states are dispatched with this event:

CodeStateNotes
0Playback.AVAILABLEListen for this state in order to recognize when the Subscriber has loaded enough of the stream or made an available connection to begin playback requests (such as play).
1Playback.IDLEListen for this state in order to recognize when the stream playback has become "idle" from previous playback.
2Playback.PLAYINGListen for this state in order to recognize when stream playback has started or resumed.
3Playback.PAUSEDListen for this state in order to recognize when the stream playback has been paused.

Custom Playback Example

Please refer to section Creating Custom Playback Controls to view an example of utilizing the Playback Controls API and Playback Events API to provide custom playback controls.