autoplay+muted仅决定自动播放资格而非触发时机，视频在可视区播放需满足三前提：html含autoplay/muted/playsinline、用户已交互、视频元数据已加载；intersectionobserver触发play()前须校验readystate≥2且document.hasfocus()，ios还需避免transform/opacity遮盖、跨域头缺失、content-type错误及属性拼写错误。
autoplay + muted 为什么不能直接触发可视区播放
因为 autoplay 和 muted 是加载时的准入条件，不是“可见即播”的开关。浏览器只在解析 HTML 阶段检查这两个属性是否同时存在，用以决定是否授予该 video 元素“可自动播放”的资格；但是否真开始播，仍取决于 JS 调用 play() 的时机和上下文。滚动进入可视区本身不构成用户手势，所以即使写了 autoplay muted，仅靠 IntersectionObserver 触发 play() 仍会失败（报错 DOMException: play() failed because the user didn't interact with the document first）。
IntersectionObserver 触发 play() 前必须满足的三个硬性前提
想让视频在滑入可视区时自动播放，Observer 只是触发器，真正起作用的是它调用 play() 时所处的执行环境。必须提前铺好路：
-
video元素 HTML 中已写死autoplay、muted、playsinline（iOS 必须）、webkit-playsinline（兼容旧版 Safari） - 页面已获得一次用户交互授权——比如用户点过任意地方、滚动过、或 touchstart 过。没这一步，所有后续
play()都会被拒 -
video已加载元数据（canplay或loadedmetadata事件已触发），否则play()会立即 reject
正确监听可视区并安全调用 play() 的写法
不能在 intersectionRatio > 0 时直接 video.play()，要加状态守卫和错误捕获：
const video = document.querySelector('video');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting && !video.hasPlayed) {
// 确保已加载且有用户交互历史
if (video.readyState >= 2 && document.hasFocus()) {
video.play().catch(e => {
// 常见失败原因：未获用户交互、视频未就绪、iOS 未设 playsinline
console.warn("Play failed on intersect:", e.name);
});
video.hasPlayed = true;
}
}
});
}, { threshold: 0.1 });
observer.observe(video);
注意：video.hasPlayed 是手动标记，避免重复调用；readyState >= 2 对应 HAVE_ENOUGH_DATA，比 canplay 更稳；document.hasFocus() 是桌面端兜底判断，移动端意义不大但无害。
iOS Safari 滑动触发 autoplay 的额外雷区
即使上述全满足，iOS Safari 仍可能黑屏不动，常见原因不是代码问题，而是环境配置缺失：
-
video元素被transform: scale(0.99)、opacity: 0或visibility: hidden遮盖——部分 iOS 版本判定为“不可见”，拒绝激活静音策略 - 视频资源跨域但服务器没返回
Access-Control-Allow-Origin: *，网络面板里看响应头就能确认 - 服务端返回的
Content-Type不是video/mp4（比如错配成text/plain），iOS 会静默卡住 -
playsinline写成了playsInline或webkit-playsinline拼错，属性名必须全小写且无值
最易被忽略的是：iOS 上 IntersectionObserver 的回调可能发生在非主线程或异步微任务中，导致 play() 失去用户手势上下文——稳妥做法是把 play() 包进 setTimeout(() => {}, 0) 强制切回主任务队列，但前提是用户交互已发生。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
