必须同时声明 autoplay、muted 和 playsinline 属性于 html 标签中，且 muted 不可后期 js 设置；配合 loop 和 preload="metadata"，并捕获 play() 失败以降级。
可以，但不是“绕过”，而是**满足浏览器允许静音自动播放的硬性条件**。autoplay 和 muted 必须同时存在、初始声明、且配合移动端特定属性，否则 autoplay 会被静默拦截。
必须在 HTML 中同步声明 autoplay 和 muted
浏览器判断是否允许自动播放，依据是“加载时是否已明确为静音状态”，而非后期 JS 修改。仅写 <video autoplay></video> 一定失败；写 <video autoplay muted></video> 是最低门槛。
- 不能先渲染
<video autoplay></video>，再用 JS 执行video.muted = true—— Safari 17+ 会中断播放，Chrome 也不保证成功 - muted 必须作为 HTML 属性出现在初始标签中，浏览器才将其识别为“可信的静音上下文”
- 后续可用 JS 切换
video.muted = false，但必须在用户交互（如 click、touchstart）回调内执行
移动端必须加 playsinline，否则自动全屏
iOS Safari 默认将 <video></video> 视为全屏媒体，即使静音也会跳转全屏，破坏页面体验。playsinline 是强制内联播放的关键开关。
- 正确写法：
<video autoplay muted playsinline></video> - Android Chrome 大多不强制要求，但加上无副作用，iOS 则必须有
- 缺少 playsinline 时，autoplay+muted 可能“播了”，但立刻全屏，视觉上等于没播
搭配 loop 和 preload 提升背景视频体验
对于首页背景视频等场景，仅 autoplay+muted 不够，还需保障循环连贯与首帧快速就绪。
- loop 属性让视频自然循环，但前提是 autoplay 已生效 —— 没 muted，loop 根本不会触发
- preload="metadata" 推荐固定使用：只加载视频头信息（时长、编码、首帧位置），不下载画面数据，减少白屏等待
- 避免 preload="auto"，尤其视频较大时，可能浪费流量或延迟首帧
必须捕获 play() 失败并提供降级方案
即使写了所有正确属性，部分环境（如微信 Android X5 内核、后台标签页、弱网）仍可能静默失败。不能只依赖 HTML 属性。
- 调用
video.play()后必须用.catch()捕获 NotAllowedError - 检查状态比报错更可靠：
!video.paused && video.readyState >= 2或监听playing事件 - 失败时应显示清晰按钮，例如“点击播放”，而不是让用户猜测哪里可点
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
