自动播放受限应对建议

问题介绍

浏览器为了防止网页自动播放音视频对用户造成干扰，对音视频的自动播放功能做了限制：在用户没有与网页产生交互（例如点击、触摸页面等）之前，带有声音媒体元素的网页将被禁止自动播放（Chrome中的自动播放策略，Safari中的自动播放策略）。一般情况下纯视频的播放不会受到限制，但有些场景例如低电量模式下的 iOS Safari 浏览器以及开启限制的 iOS WKWebView 中（如 iOS 微信浏览器），纯视频的自动播放也会受到限制。

当受到策略影响时，如果在用户发生交互之前调用DingRTC Web SDK音视频轨道的play方法来播放音视频，可能会出现播放无声或看不到视频的问题。

应对方式

• 监听"autoplay-failed"事件，在媒体元素播放失败的时候给予提示引导用户与页面交互来恢复播放。

  // 其回调参数即为自动播放失败的音视频轨道
  DingRTC.on('autoplay-failed', (track) => {
    Modal.centerConfirm({
      content: '由于浏览器自动播放限制，点击确定后才会开始播放音频',
      onOk: () => {
        track.play();
      },
    });
  });
  

• 提前引导用户与页面交互（点击、触摸等），之后再调用play方法播放音视频轨道。

  大部分浏览器在用户交互后即可解决自动播放的限制，但由于各家厂商对自动播放失败的策略实现存在差异，即使之前用户已与页面进行交互，也有可能出现自动播放失败，例如iOS的微信浏览器及其小程序的Webview，这种情况建议可以增加引导用户点击/触摸的交互，在点击/触摸事件的回调中播放音视频轨道。