Chrome等现代浏览器要求视频自动播放必须同时满足autoplay、muted和playsinline属性，否则因策略限制无法播放；用户手势是解除静音的唯一合规时机。
Chrome 浏览器里 autoplay 必须配合 muted 才生效
现代浏览器（尤其是 Chrome 70+）默认禁止有声自动播放，哪怕写了 autoplay，只要没加 muted，视频会静音卡在第一帧或直接不触发播放。这不是 bug，是策略性限制。
实操要点：
-
<video>标签必须同时包含autoplay、muted和playsinline（iOS Safari 需要） - 不要依赖 JS 后续调用
play()再取消静音——用户手势未触发前，volume = 1会被浏览器忽略或抛NotAllowedError - 如果服务器返回的视频响应头缺少
Accept-Ranges: bytes，部分浏览器可能拒绝自动播放（尤其 MP4）
<video autoplay muted playsinline controls> <source src="demo.mp4" type="video/mp4"> </video>
play() 调用失败报 NotAllowedError 怎么办
这个错误几乎总是因为：播放操作没绑定在用户真实交互（如 click、touchstart）回调内，或者 muted 属性被 JS 动态移除过早。
常见陷阱：
立即学习“前端免费学习笔记（深入）”；
- 用
window.onload或DOMContentLoaded触发play()→ 不合法，无用户手势上下文 - 先
video.muted = false再play()→ 即使之前是muted，取消静音后首次播放仍需手势 - 用
setTimeout延迟播放 → 时间再短也不行，必须是事件回调的直接同步调用链
正确做法：只在按钮点击里尝试播放，并捕获异常备用降级
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
document.getElementById('playBtn').addEventListener('click', () => {
const video = document.querySelector('video');
video.play().catch(e => console.warn('Auto-play prevented:', e));
});
移动端 Safari 对 autoplay 的额外限制
iOS 10+ 的 Safari 要求更严：除了 muted 和 playsinline，还必须满足「视频尺寸不大于屏幕尺寸」且「不处于 iframe 中」，否则即使静音也不会自动播。
关键检查项：
-
<video>父容器不能设overflow: hidden或裁剪类样式，否则 Safari 可能判定为“不可见” - 避免用
transform: scale()缩放视频，它会影响 Safari 对“是否在视口内”的判断 - 如果嵌在 PWA 或 WebView 中，确认 WebKit 配置开启了
allowsInlineMediaPlayback
想自动播放但又需要后期开声音？只能靠用户第一次交互
没有绕过策略的 hack。唯一合规路径是：初始用 muted autoplay 播起来，等用户主动点一次屏幕（任意位置都可），再执行 video.muted = false + video.volume = 1。
注意细节：
- 必须在用户事件回调中设置
muted = false，不能在play()的then()里直接设（时机不对） - 设完
volume后无需再调play()，音频会自动恢复 - 建议加个视觉提示（比如浮层文字：“轻触开启声音”），否则用户不知道该干嘛
静音自动播放这事，核心不是代码写得够不够全，而是始终对齐浏览器的权限模型——它只信任用户那一刻的手势，别的都是徒劳。
