1. 背景
2018.04，Chrome 66 采用 新的自动播放策略。即使 video 标签设置 autoplay，也无法自动播放视频。
2018.12，Chrome 71 对 Web Audio API 也采用了相同策略
2. Chrome 自动播放策略
（1）静音模式或者无音频的视频，总是允许自动播放
（2）带声音的自动播放，需要在播放前，用户主动和页面发生交互（点击，触摸等）
（3）带声音的自动播放，网站添加快捷方式到 Chrome 主页
（4）带声音的自动播放，安装了网站的 PWA 程序到桌面
（5）带声音的自动播放，网站被列入白名单，或浏览器判定用户经常与媒体互动
3. Firefox 自动播放策略
（1）静音模式或者无音频的视频，总是允许自动播放
（2）带声音的自动播放，需要在播放前，用户主动和页面发生交互（点击，触摸等）
（3）带声音的自动播放，网站被列入白名单，或浏览器判定用户经常与媒体互动
（4）FireFox 首选项可设置，白名单列表，单独的网站策略等
4. 知名网站分析
-
虎牙分析
a. 现状：
Chrome 带声音，自动播放
FireFox 用户点击，带声音自动播放
b. 猜测：
Chrome 把 www.huya.com 纳入白名单
FireFox 没有把 www.huya.com 纳入白名单
c. 验证
1. 创建 index.html<!doctype html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <video src="./1.7.mp4" autoplay controls></video> </body> </html>2. 下载 switchosts，添加 127.0.0.1 www.huya.com
127.0.0.1 www.huya.com3. 下载 nginx，配置 https
server { listen 443 ssl; server_name www.huya.com; ssl_certificate d:/nginx-1.21.3/rsa/server-cert.pem; ssl_certificate_key d:/nginx-1.21.3/rsa/server-key.pem; ssl_session_cache shared:SSL:1m; ssl_session_timeout 5m; ssl_ciphers HIGH:!aNULL:!MD5; ssl_prefer_server_ciphers on; location / { root e:/cywen-private/lib/autoplay-demo; index index.html index.htm; } }4. 访问 www.huya.com，可以自动播放视频
-
腾讯视频分析
a. 现状：
Chrome 带声音，自动播放
FireFox 静音，自动播放
b. 猜测：
Chrome 把 v.qq.com 纳入白名单
FireFox 没有把 v.qq.com 纳入白名单
c. 验证：
1. 修改 switchosts 配置
2. 重新生成证书
3. 修改 nginx.conf 配置，重启
4. 访问 v.qq.com，可以自动播放视频
5. 实现自动播放
5.1 静音播放
Chrome 和 FireFox 都支持
5.2 纳入白名单
FireFox 需要用户手动添加白名单
Chrome 自己维护了白名单，猜测需要网站/企业找 Chrome 认证
5.3 和页面交互
Chrome 和 FireFox 都支持
// 先静音自动播放，等发生下面的交互时，再开启声音
document.addEventListener("mousedown", () => { // 关掉静音模式，最好提醒下用户 } )
6. 参考
6.1 developer.chrome.com/blog/autopl…
6.2 developer.mozilla.org/zh-CN/docs/…
