大部分浏览器的自动播放策略（Autoplay policy），都要求用户至少进行一次交互操作才能播放带声音的视频。这是因为，用户通常不希望一个刚刚打开的网页毫无预警地发出声音。
此外，还有部分浏览器不允许纯视频自动播放。例如，低电量模式下的 iOS Safari 浏览器和 iOS 端的微信内嵌浏览器。详见浏览器厂商的自动播放策略。
这意味着，在用户交互前，自动播放或手动调用 play 接口播放音视频都可能失败，导致无声问题或看不到视频。
因此，在开发 Web 端 RTC 应用时，需要通过引导用户交互来处理浏览器的自动播放策略的限制，可采取如下其中一种方案：

• 监听播放失败回调，引导用户进行交互

• 引导用户在播放前进行交互

创建 RTC 引擎后，默认自动播放音视频，即，无需手动调用 play 接口，音视频可在解码成功后自动播放。当监听到 onAutoPlayFailed 回调时，表示有自动播放失败的流。此时，创建按钮提示和引导用户与页面发生交互来恢复播放。

engineInstance = VeRTC.createEngine()
...
engineInstance.onAutoplayFailed = () => {
  const button = document.createElement("button");
  button.innerText = "Click to play";
  button.onClick = () => {
    button.remove();
    engineInstance.play(userId);//不传 user ID 代表播放本地用户的媒体流
  };
  document.body.append(button);
}
javascript

大部分浏览器在用户交互后，可解除自动播放限制。但由于无法通过 JavaScript 感知浏览器是否已经解除自动播放限制。此方案中，需要在开始播放前，引导用户进行交互，保证媒体流成功自动播放。
根据所选择的 RTC 自动播放政策，进行 UI 交互设计：

调用 createEngine 接口创建引擎时，选择 RTC 应用的自动播放策略。

• VIDEO_ONLY 只自动播放视频，不播放音频：例如 Chrome 浏览器，允许无声视频自动播放。交互按钮名称举例：“解除静音”。
• PLAY_MANUALLY 关闭自动播放：例如 iOS 端的 Safari 浏览器、微信浏览器和微信小程序的 Webview 这类对自动播放限制较为严格的浏览器，要求用户交互后才放音视频播放。交互按钮名称举例：“开始播放”。

各浏览器厂商对于自动播放策略的实现存在差异，即使提前引导用户与页面产生交互，也不能确保不会出现自动播放失败错误。因此，监听播放失败回调后的处理也是不可缺少的。

对于部分自动播放策略更为严格的浏览器，例如，iOS Safari 不会在用户交互后就解除自动播放限制，需要用户手动开启媒体播放。

说明：请根据需要适配的浏览器厂商的自动播放策略，选择是否需要处理视频播放。

1. 调用 createEngine 接口创建引擎时，根据需要适配的浏览器，修改自动播放策略:

   1. VIDEO_ONLY 只自动播放视频，不播放音频：例如 Chrome 浏览器，允许无声视频自动播放。

   2. PLAY_MANUALLY 关闭自动播放：例如 iOS 端的 Safari 浏览器、微信浏览器和微信小程序的 Webview 这类对自动播放限制较为严格的浏览器，要求用户交互后才能播放音视频。

2. 在远端用户图标上显示静音或暂停提示。

<div id="user1" data-user-id="{userId}">已静音</div>
html

3. 当用户点击某个远端用户的图标时，在按钮的点击/触摸事件的回调中播放这个用户的媒体流，并更改提示。

engineInstance = VeRTC.createEngine(appId, { 
    autoPlayPolicy: RTCAutoPlayPolicy.PLAY_MANUALLY 
});
let playing = false;
...
//播放音频流
document.getElementById("user1").onClick = (e) => {
    if (playing) {
        return;
    }
    const userId = e.target.getAttribute('data-user-id')
    engineInstance.play(userId);
    playing = true;
    e.target.innerHTML = "播放中";
}
javascript

浏览器的自动播放策略

• Chrome

• Safari

• Firefox