Tutorial: Handle Autoplay Restriction

Handle Autoplay Restriction

Introduction

In order to prevent web pages from automatically playing audio and video and causing interference to users, browsers have restricted the automatic playback function of audio and video: before the user interacts with the web page (such as clicking, touching the page, etc.), the web page will be prohibited from playing media with sound.

Affected by the above browser autoplay policy, when using the TRTC Web SDK, there may be problems with playing silently. The most common scenario is: in your product design, support users to automatically enter the room and pull the stream for playback without the need for users to click after refreshing the page.

This article mainly introduces how to solve the problem of playback failure caused by the restriction of autoplay policy.

Solution 1: Use the SDK's autoplay popup window

By default, when autoplay fails, the SDK will pop up to guide the user to interact with the page. After the interaction occurs, the SDK will actively call the interface to resume playback.

  • Advantages: The business side does not need to do anything, simple and efficient.

  • Disadvantages: The popup window provided by the SDK may not meet the design requirements of the business product. At this time, you can consider using Solution 2.

The popup window provided by the SDK is adapted to desktop and mobile browser, and the style is as follows:

  • The SDK will switch the Chinese and English popup prompts according to the value of navigator.language.

  • When the user clicks "OK", the SDK automatically calls the relevant interface to resume playback.

  • In order to ensure that the popup window is displayed on the top layer as much as possible, its z-index value is 1500.

Solution 2: Business side provides popup window processing

If Solution 1 does not meet your product design requirements, you can also solve the autoplay problem in the following ways.

  1. Set the enableAutoPlayDialog parameter in the TRTC.enterRoom interface to false to turn off the SDK's popup window.

  2. Listen to the autoplay failure event, and guide the user to click the page at this time. After the user clicks the page, the SDK will automatically resume playback.

     trtc.on(TRTC.EVENT.AUTOPLAY_FAILED, event => {
   // Guide the user to click the page, you can pop up a prompt.
 });

  3. In product design, it is recommended to guide users to interact with the page before entering the room (such as clicking the enter room button), which can avoid autoplay failure.

    Most browsers release the AutoPlay restriction after user interaction, and this step can effectively avoid the error of autoplay failure. However, due to the differences in the implementation of autoplay policies by various browser manufacturers, even if users are guided to interact with the page in advance, autoplay failure errors may still occur. Therefore, the processing of the second step must be retained.

    For example: In the iOS WeChat browser and its mini-program webview, when playing a remote stream for the first time on the page, you must call the playback interface in the callback function of the user click event, otherwise playback will fail. If you use setTimeout and other interfaces to asynchronously call the playback interface in the callback of the user click event, you will also encounter autoplay failure errors.

Reference: