Autoplay Restrictions

In an attempt to provide a more pleasing user experience and reduce data consumption on mobile devices, browsers are continuing to evolve their autoplay policies. While generally and attempt to keep websites (read: ads) from playing back unwanted and/or unsolicited video and audio, these policies also affect those sites in which the sole intent is to playback video and/or audio – such as from a conference web application built utilizing Red5 Pro.

Naturally, this can cause some confusion and frustration as autoplay may have worked as expected prior to the latest browser updates. Thankfully, you do have options when using the Red5 Pro WebRTC SDK to provide a better user experience.

It should be noted that the recent autoplay policies only affect the WebRTC and HLS subscribers from the Red5 Pro WebRTC SDK.

Using autoplay with the SDK

If supporting autoplay is a requirement for your web application integrating the Red5 Pro WebRTC SDK, you have three implementation choices to choose from:

1. Declaring the autoplay and muted attributes of the target video element in tandem.
2. Declaring the autoplay attribute of the target video element and setting the muteOnAutoplayRestriction initialization property to true.
3. Declaring the autoplay attribute of the target video element and setting the muteOnAutoplayRestriction initialization property to false.

Solution 1

Declaring the autoplay and muted attributes of the target video element in tandem.

By declaring the autoplay and muted attributes together for a video element, the autoplay functionality will work – the video will begin playback with muted audio.

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

This is the general recommendation to allow for auto-playback and allow the user to unmute the audio.

The controls and playsinline attributes have no correlation to the autoplay policy, but are included for better user experience.

Solution 2

Declaring the autoplay attribute of the target video element and setting the muteOnAutoplayRestriction initialization property to true.

By declaring only the autoplay attribute on the video element and setting the muteOnAutoplayRestriction initialization property to true in the configuration, you can instruct the WebRTC SDK to:

• first attempt autoplay unmuted
• subsequently attempt to autoplay muted, if the first attempt fails
• send event notification of Subscribe.Autoplay.Muted, if auto-playback is muted

Using this solution, autoplay can work as desired for browsers that do not enforce the policy (e.g., the policy may differ between desktop and mobile versions of the same browser). For those browsers that do enforce the policy, the Red5 Pro WebRTC SDK will attempt to autoplay the stream. If an exception is thrown on the play request of the video element, the SDK will then declare the muted attribute on the element on the video element and make a subsequent attempt to autoplay.

If the muted autoplay happens without exception, a Subscribe.Autoplay.Muted event is dispatched from the subscriber instance (refer to Common Events). As a developer, you can handle this method as per your specifications – such as displaying an alert notifying the user that audio has been muted and instructing them to unmute to hear audio.

declaration of video element in HTML:

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

usage of muteOnAutoplayRestriction in initialization:

const subscriber = new RTCSubscriber()
await subscriber.init({
  protocol: 'ws',
  port: 5080,
  host: 'localhost',
  app: 'live',
  streamName: 'mystream',
  muteOnAutoRestriction: true
})

subscriber.on(red5prosdk.SubscriberEventTypes.AUTO_PLAYBACK_MUTED, () => {
  alert('Audio has been muted.')
})

await subscriber.subscribe()

The muteOnAutoplayRestriction property is true by default.

Solution 3

Declaring the autoplay attribute of the target video element and setting the muteOnAutoplayRestriction initialization property to false.

By declaring only the autoplay attribute on the video element and setting the muteOnAutoplayRestriction initialization property to false in the configuration, you instruct the WebRTC SDK to not attempt to:

• first attempt autoplay unmuted
• send event notification of Subscribe.Autoplay.Failed, if the first attempt fails

Using this solution, autoplay can work as desired for browsers that do not enforce the policy (e.g., the policy may differ between desktop and mobile versions of the same browser). For those browsers that do enforce the policy, the Red5 Pro WebRTC SDK will dispatch a Subscribe.Autoplay.Failed event from the subscriber instance (refer to Common Events). As a developer, you can handle this method as per your specifications – such as displaying an alert notifying the user that autoplay did not occur and they will need to press the play button to begin playback.

declaration of video element in HTML:

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

usage of muteOnAutoplayRestriction in initialization:

const subscriber = new RTCSubscriber()
await subscriber.init({
  protocol: 'ws',
  port: 5080,
  host: 'localhost',
  app: 'live',
  streamName: 'mystream',
  muteOnAutoRestriction: false
})

subscriber.on(red5prosdk.SubscriberEventTypes.AUTO_PLAYBACK_MUTED, () => {
  alert('Audio has been muted.')
})

await subscriber.subscribe()