浏览器的自动播放策略

为防止网页自动播放音视频对用户造成干扰，浏览器对视频的自动播放做了限制，在没有用户交互之前，浏览器对 audio 或 video 标签的自动播放 autoplay 功能做了限制，不允许有声音的媒体播放。

本文介绍 Chrome 和 Safari 浏览器的自动播放限制策略。

不同浏览器告警或报错信息不同，基本可以归纳为两类：

• 调用 audio 或 video 的 play 方法时，会报类似于 DOMException: play() failed because the user didn’t interact with the document first. 的错误信息
• 开启 audio 或 video 的 autoplay 时，即标签上填有 autoplay 属性，如 <audio autoplay/>，浏览器控制台会有类似于 The AudioContext was not allowed to start 的告警信息，此时，如果页面中使用的是 video 标签，一般会处于 白屏 状态

Chrome 浏览器限制策略

Chrome 浏览器自动播放策略：

• 允许网页自动播放静音媒体
• 以下情况允许网页自动播放有声媒体
  • 用户已经与同域名下的网页进行了交互（点击，tap 等）
  • 在 PC 上，用户在该网页中的的媒体参与指数足够高
  • 在移动设备上，用户将该网页添加到了主屏幕
  • 页面可以授予自动播放权限给它嵌套的 iframe 以允许自动播放声音

Chrome 浏览器计算用户在各个网页的媒体参与指数，该指数与用户在网页中播放媒体的次数成正相关。当用户对网页的媒体参与指数足够高时，该网页将在 PC 上获得自动播放有声媒体的权限。（用户的MEI值可以通过 chrome://media-engagement/ 查看）

更多 Chrome 自动播放策略信息，请查看 Chrome 自动播放限制策略。

Safari 浏览器限制策略

Safari 浏览器使用自动推理引擎来阻止绝大多数网站自动播放媒体元素。

更多 Safari 自动播放策略信息，请查看 Safari 自动播放限制策略。

解决方法

方法一：调用 play 方法播放失败时，绕开 autoplay 的限制 此时可引导用户点击页面上的某个位置，譬如模态框上的确定按钮，再在该 click 事件的监听函数里调用 resume 方法。

示例代码：

client.play({
  streamId: 'xxxxxx',
  containerId: 'xxxxxx',
}, (err) => {
  if (err) {
    console.log('播放失败.', err);
    client.resume('xxxxxx', (err) => {
      if (err) {
        console.log('恢复播放.', err);
      }
    });
  }
});

方法二：直接绕开 autoplay 的限制 由于浏览器限制的是声音的自动播放，在以静音状态进行播放时，是不受 autoplay 的限制的。 此时可在调用 play 方法时，传的参数中携带 mute: true，并在页面中提示用户，由用户来决定是否与页面进行交互并调用 resume 方法来恢复播放声音。

示例代码：

<!--Html部分-->
<span id="unmuteButton" class="unmute-button"></span> 

// js部分
let unmuteButton = document.querySelector('#unmuteButton'); 
client.play({
  streamId: 'xxxxxx',
  container: 'xxxxxx',
  mute: true
}, (err) => {
  if (err) {
    console.log('播放失败.', err);
  }
});
unmuteButton.onclick = function() {
  client.resume('xxxxxx', (err) => {
    if (err) {
      console.log('恢复播放失败.', err);
    }
  });
}

自动播放解决方法总结

• 部分浏览器会有自动播放的限制（如 Chrome 70 及以上和 Safari 浏览器）
• 因为页面不是 100% 被 autoplay 限制，随着用户使用这个页面的次数增加，部分浏览器会把这个页面加入自己的 autoplay 白名单列表中
• 在同时推、拉流时，若客户端先推流（读取麦克风设备），再拉流，可以绕开 'autoplay' 的限制
• 大部分的浏览器在用户交互之后就放开了 autoplay 限制，使用【提前引导用户与页面产生交互】的方式可以有效规避桌面端以及安卓设备上的自动播放错误