在各大浏览器都不支持自动播放视频的情况下，开发如何应对？

主要背景：

桌面版的Safari 2017年的11版本也宣布禁掉带有声音的多媒体自动播放功能，紧接google发布的Chrome 66也正式关掉了声音自动播放，到现在基本上所有移动设备都关掉自动播放视频音频的功能。（以后也许会开放）

---

Chrome新的特性:

参考文章：chrome 66自动播放策略调整 - 云+社区 - 腾讯云

Chrome的自动播放政策很简单：

• 静音自动播放总是允许的。
• 在下列情况下允许使用声音自动播放：
  • 用户已经与域进行了交互（点击，tap等）。
  • 在桌面上，用户的媒体参与指数阈值(MEI)已被越过，这意味着用户以前播放带有声音的视频。
  • 在移动设备上，用户已将该网站添加到主屏幕。
  • 顶部框架可以将自动播放权限授予其iframe以允许自动播放声音。

尝试的方案：

• 首先对于PC端谷歌浏览器自动播放的可以设置muted属性，没音频轨道的视频就可以播放了，而且视频在视图里面必须要是是可见的，要插入到DOM里面并且不是display: none或者visibility: hidden的，没有滑出可视区域。（只支持在PC，测试有效，可以先播放视频后引导开声音）
• 对于手机微信端可以采用微信浏览器的接口WeixinJSBridgeReady来实现播放音频，配合上canvas的逐帧动画，可以实现播放视频的效果，需要另外的音轨文件容易造成无法同步，而且本方法仅仅只能在小程序上，不支持在手机、PC浏览器。
• 经过多次尝试，手机移动端建议还是采取引导式的方法来播放视频，开始可以用gif动画或者是逐帧的动画来引导操作，达到播放的效果最佳。pc端可以采取使用消音的视频，引导开启播放声音最佳。

---