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">
<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>
<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.com
3. 下载 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/…