autoplay在移动端基本失效，必须配合muted属性及用户手势（如点击）才能触发播放；ios/android均限制静音自动播，且视频需h.264 baseline编码；webview场景需原生层配置，最稳妥方案是显式交互控件。
autoplay 属性在 iOS 和 Android 上基本失效
HTML5 video 标签加 autoplay 属性，在手机浏览器里大概率不自动播放——这不是你代码写错了，是平台策略限制。iOS Safari 和 Chrome for Android 都强制要求用户手势（比如点击）触发播放，否则静音也不行。
常见错误现象：video 元素加载完成但黑屏、控制台没报错、play() 调用直接被拒绝并抛出 NotAllowedError: play() can only be initiated by a user gesture。
- 必须设
muted才可能自动播放（iOS 10+ / Android Chrome 53+） - 不能依赖
DOMContentLoaded或load事件立即调用play() -
autoplay="true"和autoplay=""效果一样，但没muted就白搭
用 play() + 用户手势触发才可靠
真正能落地的做法，是把 play() 绑定到一次明确的用户操作上，比如按钮点击、touchstart、或首屏滚动后第一次点击区域。注意：不能用 hover（移动端没 hover），也不能用 scroll 自动触发（不算有效手势）。
示例场景：页面加载一个「点击播放」按钮，点击后调用 video.play()：
立即学习“前端免费学习笔记（深入）”；
<video id="myVideo" muted>
<source src="demo.mp4" type="video/mp4">
</video>
<button id="playBtn">点我播放</button>
<script>
const video = document.getElementById('myVideo');
const btn = document.getElementById('playBtn');
btn.addEventListener('click', () => {
video.play().catch(e => console.warn('自动播放被拒:', e));
});
</script>
- 务必加
.catch()捕获拒绝，避免未处理 promise rejection 报错 - iOS 中即使
muted，首次play()也必须由用户手势发起，后续可脚本调用 - 部分安卓 WebView（如微信内嵌）会进一步拦截，需检查
webview是否开启mediaPlaybackRequiresUserAction=false（仅限原生层配置）
MP4 编码参数影响能否静音自动播
不是所有 MP4 都能顺利自动播放，尤其在 iOS 上。如果加了 muted 还播不了，很可能是视频编码不兼容。
- 推荐用 H.264 Baseline Profile（非 High Profile）+ AAC 音频
- 分辨率别超 1920×1080，帧率建议 ≤30fps
- 用
ffmpeg重转时加参数：-profile:v baseline -level 3.0 -c:a aac - 避免使用 B-frame、 CABAC、或高 bit rate（iOS 对 buffer 填充敏感）
Webview 场景下更麻烦
App 内嵌的 Webview（比如微信、抖音、支付宝）对 autoplay 管得更死，很多连 muted + 手势都不认。
- 微信 iOS 客户端默认禁用所有自动播放，且不暴露配置开关
- Android 微信 WebView 可能允许静音自动播，但取决于 SDK 版本和 App 设置
- 若你是 App 开发者：Android 需在
WebView.getSettings().setMediaPlaybackRequiresUserGesture(false)；iOS WKWebView 需设allowsInlineMediaPlayback = true且mediaTypesRequiringUserActionForPlayback = []
最稳的路，还是别指望自动播，改成显式交互控件——用户点一下，再播，顺便还能做加载态、错误 fallback、格式降级（比如切到 GIF）。真要“看起来自动”，就用 poster 图 + 播放按钮覆盖，点下去才真正加载和播放视频。
