由于浏览器自动播放策略限制的原因，部分浏览器对网页上的自动播放（Autoplay）功能做了限制。不同浏览器在不同场景下的自动播放表现会有不同。目前云手机客户端 Web SDK 提供了多个接口和配置来满足不同的业务场景需求。业务可选择自身最适合的处理方式，以达到最佳的用户体验。

Web SDK 相关能力

API

使用到的接口和说明如下：

错误码/告警码

需要监听的错误码和告警码说明如下：

有关以上接口和错误码的详细说明，参考 云手机 Web / H5 SDK 接口文档。

浏览器对站点的打分机制

通过浏览器的 Media Management（例如：chrome://media-engagement/），可查看不同浏览器对各站点的打分情况：

• 当分数达到 Is High 标准后，允许自动播放
• 浏览器的全局统计数据也会影响是否允许自动播放

最佳实践

初始化静音，用户首次点击时开启声音

描述：该场景比较通用，初始采用静音播放，当用户首次点击时自动开启声音。

参考示例：

const vePhone = new vePhoneSDK(config);

vePhone.start({
  ...otherStartConfig,
  audioAutoPlay: true,
  mute: true,
}).then(() => {
  console.log('start successfully');
});

初始化不静音，用户首次点击时开启声音

描述：该场景在某些能够支持音频自动播放的浏览器（满足浏览器打分条件、360极速浏览器）中，初始时即可播放音频。在某些不支持音频自动播放的浏览器中，会触发音频自动播放失败告警码，可提示用户首次点击时自动开启声音。

参考示例：

const vePhone = new vePhoneSDK(config);

vePhone.on('warning', (info) => {
  if (info.warningCode === 10022) {
     // 提示用户首次点击时自动播放声音或不处理（业务方可自行处理）
     showTipsUI();
  }
})

vePhone.start({
  ...otherStartConfig,
  audioAutoPlay: true,
  mute: false,
}).then(() => {
  console.log('start successfully');
});

初始化静音，通过 icon 提示当前音频状态，用户点击可开关声音

描述：该场景适合初始化为静音播放，用户界面音频 UI 显示为静音，用户可通过点击按钮开关声音。

参考示例：

const vePhone = new vePhoneSDK(config);

vePhone.start({
  ...otherStartConfig,
  mute: true,
}).then(() => {
  console.log('start successfully');
});

// audioBtn 为业务自定义音频开关按钮
// 初始 UI 为静音
audioBtn.addEventListener('click', () => {
  vePhone.setAudioMute(false);
  //vePhone.setAudioMute(true);
});

初始化不静音，通过 icon 提示当前音频状态，用户点击可开关声音

描述：该场景适合初始化为有声播放。当未触发音频自动播放失败告警码时，用户界面音频 UI 显示为有声。当触发音频自动播放失败告警码时，用户界面音频 UI 显示为静音，用户可通过点击按钮开关声音。

参考示例：

const vePhone = new vePhoneSDK(config);

vePhone.on('warning', (info) => {
  if (info.warningCode === 10022) {
     // 如果触发 warning，则修改当前音频 UI 为无声
     setAudioBtnUI();
  }
})

vePhone.start({
  ...otherStartConfig,
  mute: false,
}).then(() => {
  console.log('start successfully');
});

// audioBtn 为业务自定义音频开关按钮
// 初始 UI 为静音
audioBtn.addEventListener('click', () => {
  vePhone.setAudioMute(false);
  //vePhone.setAudioMute(true);
});

iOS 低电量模式以及部分 Webview 中的处理方法

描述：在低电量模式下的 iOS Safari 浏览器中以及部分 Webview 中，视频和音频的自动播放均会失败，需要用户主动点击才可继续。在该场景下，可使用 playByInteraction 方法提示和引导用户与页面进行交互来恢复播放。

参考示例：

const vePhone = new vePhoneSDK(config);

vePhone.start(startConfig).then(() => {
  console.log('start successfully');
}).catch(err => {
   if (e.errorCode === 10008) {
     // 弹出引导用户点击继续播放的 UI 界面提示
     showBtnUI();
  }
});

btn.addEventListener('click', () => {
  vePhone.playByInteraction();
});

补充说明：

在自研 APP 客户端内的 Webview 打开的场景下，可以通过开启自动播放的权限，来解决无法自动播放的问题。比如在 iOS 的 Webview 代码中，需要把 “手动播放” 参数设置为 “NO”，参考以下示例：