autoplay单独写无效，因现代浏览器默认禁止有声自动播放，必须同时声明autoplay和muted布尔属性，且muted须在html中原生存在、不可js后设；ios还需playsinline确保内联播放，否则强制全屏导致策略拦截。
为什么 autoplay 单独写没用，浏览器直接忽略？
现代浏览器（Chrome、Firefox、Safari）默认禁止有声音的自动播放，这是硬性策略，不是 bug。哪怕你写了 autoplay，只要没同时加 muted，视频大概率不会播，控制台可能连警告都不报——它就静默失效。
关键点：必须同时存在 autoplay 和 muted，且 muted 不能是 JS 后续设置的（比如 video.muted = true），得在 HTML 标签里原生声明。
-
<video autoplay muted></video>✅ 可行 -
<video autoplay></video>❌ 大概率不播 -
<video autoplay></video>+video.muted = true+video.play()❌ 在多数桌面 Chrome 中仍被阻止
autoplay 和 muted 的写法细节与兼容性差异
这两个属性都是布尔属性（boolean attribute），有就代表 true，不需要赋值。但有些写法容易踩坑：
- 别写成
autoplay="true"或muted="1"—— 虽然部分浏览器能容错，但语义错误，autoplay=""或直接autoplay才规范 - Safari 对
autoplay更严格：即使muted存在，如果视频未加载完成（比如没设preload="auto"），也可能延迟播放或失败 - 移动端 iOS Safari 要求用户首次交互后才能触发播放（哪怕已
muted），所以纯自动 + 静音在微信内嵌页或 iOS Safari 中仍可能卡住
推荐写法：
<video autoplay muted playsinline preload="auto"><source src="video.mp4" type="video/mp4"></source></video>
为什么加了 playsinline？它和自动播放什么关系？
在 iOS Safari 和部分安卓 WebView（如微信）中，不加 playsinline 会导致视频强制全屏播放，而全屏模式下自动播放策略更苛刻——即使 muted 也常被拦截。加上它，视频才允许在页面内联播放，从而提高 autoplay muted 的成功率。
-
playsinline是 iOS Safari 的私有属性，但已被广泛支持（Chrome for Android、Edge 等也认） - 它不解决“能不能播”，而是解决“在哪播”；没它，自动播成功了也会跳全屏，体验断裂
- 注意：仅对
<video></video>有效，<audio></audio>不需要
JS fallback 播放失败时怎么补救？
即便配置全了，仍可能因网络延迟、资源未就绪或 UA 策略变化导致 play() 抛错：DOMException: play() failed because the user didn't interact with the document first.
稳妥做法是监听 canplay 或 loadeddata，再调 play()，并捕获异常：
const video = document.querySelector('video');
video.addEventListener('canplay', () => {
video.play().catch(e => {
console.warn('Autoplay muted failed:', e.message);
// 可在此显示“点击播放”按钮
});
});
别依赖 setTimeout 等固定延迟——视频加载时间不可控，且现代浏览器对非用户触发的延迟播放同样限制。
真正难的不是写对那两个属性，而是理解它们背后是一套运行时策略，而不是静态开关。每次更新浏览器版本，规则都可能微调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
