现代浏览器禁止无用户交互的视频自动播放，尤其有声视频；需静音+用户交互后JS调用play()并降级处理。
视频自动播放失败，不是代码写错了，而是浏览器主动拦截了——现代浏览器普遍禁止无用户交互前提下的 autoplay，尤其当视频带声音时。
为什么 autoplay 在 Chrome/Firefox/Safari 上经常不生效
主流浏览器从 2017 年起陆续启用严格 autoplay 策略：只有满足「静音 + 用户已与页面交互过」两个条件之一，autoplay 才可能成功。单纯加 autoplay 属性（甚至加上 muted）仍可能被拒绝，尤其在移动 Safari 或新版本 Chrome 中。
- 桌面 Chrome：允许
autoplay+muted，但首次访问未触发点击时仍可能延迟或跳过 - iOS Safari：必须显式调用
play()且发生在用户手势（如click、touchstart）回调内，autoplay属性完全被忽略 - Firefox：对
muted视频较宽松，但若页面处于后台标签页，也会暂停播放
如何让视频真正自动播放（含静音与有声场景）
核心思路是：先确保静音，再用 JS 主动触发播放，并捕获失败做降级处理。
- HTML 必须同时设置
muted和autoplay：<video muted autoplay playsinline><source src="video.mp4" type="video/mp4"></video>
-
playsinline是 iOS 必需属性，否则视频会全屏弹出 - 用 JS 显式调用
play()，并监听onerror和onpause判断是否被阻断 - 若
play()抛出DOMException（如"The request is not allowed by the user agent..."），说明被策略拦截，应降级为展示封面图+播放按钮
用户首次交互后补播视频的可靠写法
这是目前兼容性最强的做法：不依赖 autoplay 属性，而是在用户第一次点击/触摸后立即尝试播放。
dmap-jsapi-skill
下载
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
立即学习“前端免费学习笔记（深入）”；
- 给任意可交互元素（如
<div id="cover">）绑定一次click或touchstart - 回调中调用
video.play()，并移除监听器避免重复触发 - 注意：iOS 要求该调用必须在事件回调同步执行，不能包裹在
setTimeout或 Promise.then 中
const video = document.querySelector('video');
const cover = document.getElementById('cover');
function tryPlay() {
video.play().catch(e => {
console.warn('Autoplay prevented:', e.name);
// 此处可显示播放按钮或提示用户点击
});
}
cover.addEventListener('click', () => {
tryPlay();
cover.removeEventListener('click', tryPlay);
});
有声视频的现实选择：别强求自动播放
除非用户明确授权（如通过设置页开启“允许此网站播放声音”），否则带声音的 autoplay 在几乎所有环境下都会失败。强行绕过既不可靠，也违反 UX 准则。
- Chrome 会把反复尝试有声自动播放的站点标记为“高资源占用”，后续加载更易被限制
- 移动端用户普遍反感未经请求的声音，强制播放可能直接导致跳出
- 真正需要声音的场景（如教学引导），应改用「首帧静音自动播 + 用户点击后解除静音」模式
最常被忽略的一点：即使 video.play() 返回 Promise 并 resolve，也不代表音频已输出——iOS 上可能仍处于“静音锁定”状态，需检查 video.muted === false 后再设 volume = 1，且该操作仍需在用户手势上下文中完成。
