Browser Autoplay Policy (Web)

---

Application Scenarios

In order to improve the user experience, the browser has strengthened the restrictions on the autoplay policy (Autoplay): The browser does not allow the automatic playback of media with sound before there is no interactive operation.

Each browser has different implementations of the autoplay policy. For details, please refer to the following article:

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

When using the ZEGO Web SDK to pull the stream, the media stream containing audio and not muted will be restricted by the browser's auto-play policy, resulting in the audio not playing normally.

Bypass Autoplay Restrictions When Playback Fails

In actual use, the page is not totally restricted by Autoplay. As the number of times users use this page increases, the browser will add this page to its Autoplay whitelist. According to this principle, the developer can guide the user to click a certain position on the page to resume playback when it detects that the playback fails.

// myVideo: The developer's own rendering tag, the tag adds the autoplay attribute, and there is no muted attribute or muted=true
let autoPlay = false;
myVideo.oncanplay = ()=>{
    setTimeOut(()=>{
        autoPlay = !myVideo.paused
    },1000)
}

Bypass Autoplay Restrictions Directly

You can directly bypass Autoplay restrictions through the following two solutions:

Solution 1: Set the "muted" attribute to "true"

Set the "muted" attribute of the <video> or <audio> tag to true, and the media will be automatically played by muting first, and then automatically cut to audio media playback when there is any interactive operation on the page.

1. Register a global event.

   // Monitor touch operation
   document.body.addEventListener("touchstart",function(){
         // todo
   })

   or

   // Monitor click operation
   document.body.addEventListener("mousedown",function(){
         // todo
   })

2. Obtain the remote stream through the startPlayingStream interface, assign the media stream to the "srcObject" property of the media tag, and set the "muted" property of the corresponding media tag to true.

   const remoteStream = await zg.startPlayingStream(streamID);
   
   // video is a local <video> or <audio> object
   video.srcObject = remoteStream;
   video.muted = true;

3. In the event callback registered in the first step, set the "muted" property of the media tag to false, and the page will automatically switch to audio media for playback when it detects interactive operations.

   video.muted = false;

Solution 2: Generate interactive behavior in advance

Make sure that the user interacts with the page before setting the media stream to the media label to bypass Autoplay restrictions.

For desktop browsers, this solution can bypass most Autoplay restrictions, but on Safari/Webview, the autoplay policy will be more strict. If you need to be compatible with Safari/WebView, the following special treatment is recommended.

1. When the media stream is playing automatically, set "muted" to true.

   <video id="video" autoplay muted playsinline></video>

2. When each media stream is playing, specify the corresponding HTMLElement container to bind the interaction event (click or touch).

   const play = document.getElementById('play');
   play.addEventListener('click', () => {
   
   });

3. On the playback interface, the icon shows that the current media stream is muted and guides the user to click.

   <div id="play">Play</div>

4. When the user clicks on the playback interface of a media stream (the container just bound), play the stream again in the event callback, set "muted" to false, and change the mute icon.

   video.muted = false;