自动播放受限处理建议

自动播放受限处理建议

简介

浏览器为了防止网页自动播放音视频对用户造成干扰，对音视频的自动播放功能做了限制：在用户与网页产生交互（例如点击、触摸页面等）之前，网页将被禁止播放带有声音的媒体。

受上述浏览器自动播放策略影响，在使用 TRTC Web SDK 时，如果在发生交互之前调用 Stream.play 播放音视频，可能会出现播放无声的问题。

本文主要介绍如何解决因自动播放策略限制，导致播放失败的问题。

方案一：使用 SDK 提供的自动播放弹窗

v4.11.9+ 版本的 SDK，当出现自动播放失败时，SDK 会弹窗引导用户与页面产生交互。当产生交互后，SDK 会主动调用接口恢复播放。

  • 优点：业务侧无需做任何处理，简单高效。

  • 缺点：SDK 提供的弹窗不一定符合业务产品设计要求，此时可考虑使用方案二。

SDK 提供的弹窗适配桌面端和移动端浏览器，样式如下：

  • SDK 会根据 navigator.language 的值来切换中英文弹窗提示。

  • 当用户点击“确认”时，SDK 自动调用相关接口来恢复播放。

  • 为尽可能保证弹窗处于最上层展示，其 z-index 值为 1500。

方案二：业务侧自行提供弹窗处理

若方案一不符合您的产品设计要求，您可以自行实现弹窗来解决自动播放问题。

  1. 升级 SDK 版本至 v4.11.10+，并在 TRTC.createClient 接口中将 enableAutoPlayDialog 参数设置为 false，来关闭 SDK 的弹窗。

  2. 监听自动播放失败错误，当自动播放失败时，弹窗引导用户与页面产生交互后，再调用接口恢复播放。

    // 可在 play 接口的 catch 中捕获自动播放失败错误。
try {
  await stream.play('remote');
} catch(error) {
  if (error.getCode() === 0x4043) {
    // 自动播放受限导致播放失败，此时引导用户点击页面。
    // 在点击事件的回调函数中，执行 stream.resume();
  }
}
// v4.8.4+ 建议通过 stream.on('error') 捕获自动播放失败错误。
stream.on('error', error => {
  if (error.getCode() === 0x4043) {
    // 自动播放受限导致播放失败，此时引导用户点击页面。
    // 在点击事件的回调函数中，执行 stream.resume();
  }
})
stream.play('remote').catch(error => {});

  3. 在产品设计中，提前引导用户与页面产生交互（例如点击、触摸等），当产生交互后再调用 Stream.play 播放音视频。

    大部分的浏览器在用户交互之后就放开了 AutoPlay 限制，该步骤可有效避免出现自动播放失败的错误。但是，由于各浏览器厂商对于自动播放策略的实现存在差异，即使提前引导用户与页面产生交互，也不能确保不会出现自动播放失败错误。因此第二步的处理是必须要保留的。

    例如：在 iOS 微信浏览器及其小程序的 webview 中，页面首次播放远端流时，必须在用户点击事件的回调函数中调用播放接口，否则播放会失败。倘若您在用户点击事件的回调中，使用了 setTimeout 等接口来异步调用播放接口，亦会出现自动播放失败错误。

参考：

版权声明：本作品采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可。知识共享许可协议