为了防止网页在用户非自愿的情况下自动播放声音，通常情况下浏览器会闲置自动播放功能（Autoplay），在没有用户交互操作之前，不允许播放有声媒体。为解决浏览器限制导致的自动播放问题，本文为您介绍处理自动播放受限的方案。

网易云信推荐以下方式处理浏览器自动播放受限问题：

• 播放失败时引导用户手动恢复播放
• 直接解除自动播放受限

注意事项

• 由于 iOS Safari/WebView 只允许通过用户交互来触发有声媒体的播放，对于 iOS Safari/WebView，推荐参考播放失败时手动恢复处理自动播放受限问题。
• 使用 Android 端微信浏览器先入会的用户可能无法正常播放其他后入会用户的音视频， 推荐参考直接解除自动播放受限处理自动播放受限问题。

播放失败时手动恢复

在使用 stream.play 接口播放视频时，如果出现浏览器自动播放策略导致的音视频播放失败，可以使用 client.on 监听 41030 错误。在 Web SDK 中，41030 表示。

监听到 41030 错误之后，您可以引导用户进行手势交互，调用 stream.resume 恢复音视频正常播放。

//若您已集成 4.6.10 及之后版本的 SDK，可以参考如下代码快速实现：
stream.play('remoteElement').catch(error => {});
stream.on('notAllowedError', error => {
    const errorCode = error.getCode();
    if(errorCode === 41030) {
        // AUTO_PLAY_NOT_ALLOWED, 引导用户进行手势交互
        // 调用 stream.resume() 恢复音视频正常播放
    }
});

//以下为各版本 SDK 通用的实现方法：
stream.play('remoteElement').catch(error => {});
client.on('NotAllowedError', error => {
    const errorCode = error.getCode();
    if(errorCode === 41030) {
        // AUTO_PLAY_NOT_ALLOWED, 引导用户进行手势交互
        // 调用 stream.resume() 恢复音视频正常播放
    }
});

直接解除自动播放受限

大部分浏览器在用户交互之后就放开了 AutoPlay 限制，通过提前引导用户和页面产生交互行为的方式，可以有效的规避桌面端以及安卓设备上的自动播放受限问题。此时确保在调用 stream.play 之前，通过弹窗指引或者按钮点击等方式，要求用户和页面发生交互行为即可。

也可以通过 audio: false 直接解除自动播放限制，先静音播放远端视频流，等到用户与页面发生交互后再解除静音。操作流程如下：

1. 在代码开始处，为页面添加交互监听事件。例如监听点击操作或监听触摸操作。

   • 监听点击操作

     document.addEventListener('mousedown', replay) // 监听点击操作
     

   • 监听触摸操作

     document.addEventListener('touchstart', replay) // 监听触摸操作
     

2. 获取远端流，在调用 stream.play 接口时，通过 audio 参数设置静音播放视频。

   stream.play('remoteElement', playOptions:{audio: false})
   

3. 当页面监听到 mousedown 或者 touchstart 事件后，执行回调函数。

   let replay = () => {
       stream.stop();
       stream.play('remoteElement', playOptions:{audio: true};
       // 移除鼠标/触屏监听事件
       // document.removeEventListener('mousedown', replay);
       // document.removeEventListener('touchstart', replay)
   }