Tutorial: 自动播放受限处理建议

自动播放受限处理建议

简介

浏览器为了防止网页自动播放音视频对用户造成干扰,对音视频的自动播放功能做了限制:在用户与网页产生交互(例如点击、触摸页面等)之前,网页将被禁止播放带有声音的媒体。在 iOS 10+ 中,如果开启了省电模式,无声音的媒体也会被禁止播放

受上述浏览器自动播放策略影响,在使用 TRTC Web SDK 时,可能会出现播放无声的问题。最常见的场景是:您的产品设计中,支持用户刷新页面后,无需用户点击,可自动进房拉流播放。

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

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

默认情况下,当出现自动播放失败时,SDK 会弹窗引导用户与页面产生交互。当产生交互后,SDK 会主动调用接口恢复播放。

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

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

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

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

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

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

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

若方案一不符合您的产品设计要求,您也可以通过如下方式来解决自动播放问题。

  1. TRTC.enterRoom 接口中将 enableAutoPlayDialog 参数设置为 false,来关闭 SDK 的弹窗。

  2. 监听自动播放失败事件,此时引导用户点击页面即可,SDK 会在用户点击页面后,自动恢复播放。

     trtc.on(TRTC.EVENT.AUTOPLAY_FAILED, event => {
       // 引导用户点击页面,可以弹窗提示。
     });
    
  3. 在产品设计中,建议在用户进房前,提前引导用户与页面产生交互(例如点击进房按钮等),这样可以避免出现自动播放失败。

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

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

参考:

Webview 中关闭自动播放策略限制

在 Android 和 iOS Webview 中的默认自动播放策略可能和浏览器中的不一致,您可以参考如下文档,在您的 App 中关闭自动播放限制。