浏览器自动播放策略的注意事项
在实时音视频的场景中,我们希望实现加入房间之后进行自动的发布和订阅。其中自动订阅往往伴随者自动播放,在这时候我们就要格外注意「浏览器自动播放策略」,因为它很可能让你订阅下来的音频不能播放(没声音)。
浏览器自动播放策略的背景
浏览器为什要有自动播放策略呢?其实是为了改善用户体验,举个例子,如果没有安全控制策略,当你打开一个未知的网站(从其他网站跳转或手动输入地址),该网站可以全屏播放一个有声音的视频,这是完全出乎使用者意料的并且是不想要的。这种情况大多数是用户想屏蔽的广告,就算是正常的内容,用户也有权选择是否播放。
浏览器的自动播放策略
总的来说浏览器在没有交互操作之前不允许有声音的媒体自动播放,详细的「自动播放策略」如下:
- 始终允许静音(muted)的视频自动播放
- 以下情况允许带声音的自动播放
- 用户已经在访问的域名下有交互操作(点击、触摸等)。
- 顶级页面可以把 autoplay 权限委托给 iframe,从而允许自动播放声音。
关于各个浏览器也有不同的实现,详情可阅读以下文章:
- Chrome: Autoplay Policy Changes
- Safari: Auto-Play Policy Changes for macOS
- Firefox: Allow or block media autoplay in Firefox
解决方案
在实时音视频的场景中,我们推荐的处理方式是加入房间之前弹出对话框,给用户一个友好的提示,等用户点击确认之后再继续加入房间逻辑。确保在播放音频之前用户已经和我们的网站有了交互,声音也就能正常播放出来了。 如下图,在我们的 Demo 中也是这么做的。