video标签需同时添加autoplay和muted属性才能实现默认静音自动播放，仅autoplay会被浏览器拦截；二者均为布尔属性，须在html中显式声明，动态插入时需预先设置，且移动端有额外交互或属性（如playsinline）要求。
video 标签加 autoplay 和 muted 才能默认静音自动播放
浏览器（尤其是 Chrome、Safari、Edge）强制要求：自动播放必须静音，否则会被拦截。只写 autoplay 不加 muted，视频大概率卡在黑屏或显示暂停图标，控制台可能报错 DOMException: play() failed because user gesture is required。
正确写法是两者同时存在：
<video autoplay muted src="example.mp4"></video>
-
autoplay是布尔属性，无需赋值（autoplay=""或autoplay="autoplay"都行，但推荐无值写法） -
muted同样是布尔属性，必须显式声明，不能靠 JS 后续调用video.muted = true来绕过——浏览器检查的是初始 HTML 属性 - 如果用 JS 动态插入 video 元素，需在插入前就设置好这两个属性，而非插入后再 setAttribute
为什么加了 autoplay 和 muted 还不播？
常见原因不是代码写错，而是资源加载或上下文问题：
- 视频
src404 或跨域未配 CORS，浏览器加载失败后不会触发 autoplay 流程 - 页面未完成初始化就渲染 video（比如在 React/Vue 的首次 render 中），部分浏览器会忽略 autoplay
- 移动端 Safari 对
autoplay更严格：即使muted，也要求 video 在可视区且用户已与页面有过交互（如 scroll、tap），否则静默暂停 - 某些浏览器（如 Firefox）对
autoplay默认关闭，需用户手动开启“允许自动播放”设置
用 JavaScript 控制时，play() 被拒绝怎么办
即使 HTML 里写了 autoplay muted，有时仍需 JS 触发播放（比如切换 source 后）。此时直接调 video.play() 可能被拒绝，因为浏览器认为这不是用户手势驱动的。
- 确保调用
play()发生在用户事件回调中（如click、touchstart），哪怕只是绑定一个空点击也能解锁音频上下文 - 不要依赖
loadedmetadata或canplay等事件自动调play()，这些不是用户手势 - 可提前用
document.addEventListener('click', () => { video.play().catch(() => {}); }, { once: true });做一次性解锁
兼容性与移动端特别注意
桌面端主流浏览器基本支持 autoplay muted，但移动端差异大：
- iOS Safari：必须同时满足
muted+playsinline（否则强制全屏，且可能禁播） - Android Chrome：支持，但若页面从后台切回，video 可能被暂停，需监听
visibilitychange并手动恢复 - 避免使用
loop+autoplay组合，某些 Android 机型会因循环逻辑异常导致首帧不渲染 - 如果视频只是背景装饰，建议加
preload="metadata"减少初始加载压力
最稳妥的底线是：HTML 层面写死 autoplay muted playsinline，JS 层只做兜底和状态修复，别指望纯 JS 实现“无交互自动播”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
