浏览器的自动播放策略

序言：在页面中使用的video标签引入一个视频，当设置为autoplay的时候，打开页面发现并没有自动播放。

 

那如果通过js方法去进行自动播放：

 

这时看控制台：

  

 查了文档（UCloud文档中心）之后才知道播放视频时它受浏览器的自动播放策略的影响；

自动播放策略出现的原因是：为了改善用户体验。

自动播放策略的详情是：

1. 始终允许静音播放。

2.用户已经与当前区域进行了交互。

3.在桌面设备上用户的媒体参与度指数阀值已经超过。

4.顶部帧可以将自动播放权限委派给其iframe，以允许自动播放视频。

遇到自动播放策略时的解决办法：

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

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

2. 互动后播放：

如果自动播放失败，则通过用户与页面交互后进行播放，如鼠标点击，划入之类的。