Browser Autoplay Policy (Web)

Application Scenarios

To avoid automatic audio/video playback on web pages from disturbing users, browsers have strengthened restrictions on autoplay policies: browsers do not allow media files with sound to autoplay before user interaction.

Different browsers have different implementations of autoplay policies. For details, please refer to the following articles:

Chrome: Autoplay Policy Changes.
Safari: Auto-Play Policy Changes for macOS.
Firefox: Allow or block media autoplay in Firefox.

When using ZEGO Web SDK to play streams, if the media stream contains audio and is not muted, it will be restricted by the browser autoplay policy, causing the audio to fail to play normally. This article mainly introduces how to solve the problem of playback failure caused by SDK autoplay policy restrictions.

Solutions

To solve the above playback failure problem, this article introduces the following two solutions:

Solution 1: Use the autoplay dialog provided by SDK.
Solution 2: Business application layer handles playback recovery by itself.

Use SDK-provided Autoplay Dialog

Use the media stream playback component ZegoStreamView provided by SDK to play media streams. When autoplay fails, SDK will pop up a dialog on the interface to guide the user to click the page. After interaction occurs, SDK proactively resumes playback of the media stream's audio and video.

Advantage: The business application layer does not need to do any additional processing, which is simple and efficient.
Disadvantage: The dialog provided by SDK may not meet the business product design requirements. In this case, consider using Solution 2.

Business Application Layer Implements Playback Recovery

In the ZegoStreamView.play interface, set the second parameter options.enableAutoplayDialog parameter to false to disable SDK's automatic dialog.
Listen for the autoplay failure error event. When autoplay fails, display a dialog or button to guide the user to interact with the page, then call the ZegoStreamView.resume interface to resume playback.

Warning

Performing the above operations in most browsers can avoid autoplay failures. However, since there are differences in autoplay policy implementations among browser vendors, even if users are guided to interact with the page in advance or set mute, autoplay failure errors cannot be completely avoided. For example, in iOS Safari browser, WeChat browser and its mini program's Webview, autoplay restrictions are relatively strict, so the handling in step 2 as a fallback strategy must be retained.

(Optional) When entering the page, guide the user to interact with the page in advance (e.g., clicking, touching, etc.), then call ZegoStreamView.play to play audio and video.

// remoteStreamView is the remote media stream playback component instance object.
remoteStreamView.play('remote-video', {
  enableAutoplayDialog: false
});
remoteStreamView.on("autoplayFailed",()=>{
    // Autoplay is restricted causing playback failure. Display a custom button on the interface to guide the user to click the button.
    // In the button's click event callback, execute remoteStreamView.resume();
});

// remoteStreamView is the remote media stream playback component instance object.
remoteStreamView.play('remote-video', {
  enableAutoplayDialog: false
});
remoteStreamView.on("autoplayFailed",()=>{
    // Autoplay is restricted causing playback failure. Display a custom button on the interface to guide the user to click the button.
    // In the button's click event callback, execute remoteStreamView.resume();
});