实时音视频
  • iOS
  • Android
  • macOS
  • Windows
  • HarmonyOS
  • Linux
  • Web : JavaScript
  • 小程序
  • Flutter
  • Electron
  • Unity3D
  • uni-app
  • React Native
  • Cocos Creator
  • 产品简介
  • 下载
  • 体验 App
  • 快速开始
    • 跑通示例源码
    • 集成 SDK
    • 实现视频通话
    • 场景化音视频配置
  • 基础功能
  • 进阶功能
  • 最佳实践
  • 常见错误码
  • 服务端 API
  • 客户端 API
  • 常见问题

浏览器自动播放策略(Web)

更新时间:2022-07-08 21:52

1 应用场景

为了避免网页自动播放音视频对用户造成干扰,浏览器加强了对自动播放策略(Autoplay)的限制:浏览器在没有交互操作之前不允许有声音的媒体文件自动播放

各个浏览器关于自动播放策略有不同的实现,详情请参考以下文章:

在使用 ZEGO Web SDK 拉流时,媒体流中包含音频且未静音会受到浏览器自动播放策略的限制,导致音频不能正常播放。本文主要介绍如何解决 SDK 因自动播放策略限制,导致播放失败的问题。

2 解决方案

为了解决上述播放失败的问题,本文介绍的以下两种解决方案:

  • 方案一:使用 SDK 提供的自动播放弹窗。
  • 方案二:业务应用层自行进行恢复播放处理。

2.1 使用 SDK 提供的自动播放弹窗

使用 SDK 提供的媒体流播放组件 ZegoStreamView 来播放媒体流,当自动播放失败时,SDK 会在界面上弹窗引导用户点击页面。产生交互后 SDK 主动恢复播放媒体流的音视频。

  • 优点:业务应用层无需再做任何处理,简单高效。

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

2.2 业务应用层实现恢复播放

  1. ZegoStreamView.play 接口中将第二个参数 options.enableAutoplayDialog 参数设置为 false,关闭 SDK 的自动弹窗。

  2. 监听自动播放失败错误事件,当自动播放失败时,显示弹窗或按钮引导用户与页面产生交互后,再调用 ZegoStreamView.resume 接口恢复播放。

// remoteStreamView 为远端媒体流播放组件实例对象。
remoteStreamView.play('remote-video', {
  enableAutoplayDialog: false
});
remoteStreamView.on("autoplayFailed",()=>{
    // 自动播放受限导致播放失败,在界面上显示自定义的按钮,引导用户点击按钮。
    // 在按钮的点击事件的回调函数中,执行 remoteStreamView.resume();
});
  1. (可选)在进入页面时提前引导用户与页面产生交互(例如点击、触摸等),后面再调用 ZegoStreamView.play 播放音视频。

在大多数浏览器进行如上操作可以避免出现自动播放失败。但是由于各浏览器厂商对于自动播放策略的实现存在差异,即使提前引导用户与页面产生交互或者设置静音,也不能确保不会出现自动播放失败错误,例如 iOS 的 Safari 浏览器、微信浏览器及其小程序的 Webview 中,自动播放限制较为严格,因此第二步的处理作为保底策略必须保留