视频进入视口时自动播放需用IntersectionObserver监听可见性并调用play()，必须设muted和playsinline属性、处理错误，移动端需用户手势才能取消静音，可加防抖与离开暂停优化体验。
让 video 标签在进入视口时自动播放，核心是用 IntersectionObserver 监听可见性，并在元素可见时调用 play()。关键不在“加个属性”，而在绕过浏览器自动播放限制、处理静音、兼容移动端，同时避免资源浪费。
基础实现：监听进入视口并触发播放
IntersectionObserver 是现代标准方案，比 scroll + getBoundingClientRect 更轻量、不卡顿、原生异步。
- 创建观察器，监听
isIntersecting === true（即元素至少部分出现在视口中） - 进入时调用
video.play()，失败时捕获错误（如被浏览器阻止） - 推荐为所有需控制的 video 添加统一标识，例如
data-autoplay
示例代码：
<video muted autoplay playsinline data-autoplay src="hero.mp4"></video>
立即学习“前端免费学习笔记（深入）”；
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.play().catch(e => console.log("播放被阻止", e));
}
});
}, { threshold: 0 });
document.querySelectorAll('video[data-autoplay]').forEach(v => observer.observe(v));
必须处理的三大限制条件
直接写 video.play() 很容易失败——不是代码问题，而是浏览器策略强制干预。
-
静音是前提：带声音的视频在多数浏览器（Chrome/Firefox/Safari/微信）中禁止自动播放。必须设
muted属性，且 JS 中也建议显式赋值video.muted = true -
移动端需内联播放：iOS Safari 和微信内置浏览器默认全屏播放。必须加
playsinline属性，否则play()会静默失败 -
用户手势后才可取消静音：如果想在用户点击后恢复声音，必须在 click/touchend 等用户交互事件中调用
video.muted = false，否则会被拒绝
增强体验：避免突兀开始与残留音频
纯“一进就播”可能造成视觉或听觉干扰，尤其多个视频紧邻滚动时。
- 可加简单防抖：进入视口后延迟 100–200ms 再调用
play()，给用户一点反应时间 - 离开视口时，先 fade-out 或加过渡类，动画结束再
pause()，防止音频突然中断或残留 - 对首屏视频，可预设
preload="metadata"加速首帧渲染；非首屏保持preload="none"节省初始流量
兼容性兜底：老环境也能工作
虽然 IntersectionObserver 在 Chrome 51+/Firefox 55+/Safari 12.1+ 都已支持，但部分安卓 WebView 或旧版 UC 浏览器仍不兼容。
- 用
if ('IntersectionObserver' in window)判断是否可用 - 不可用时降级为 scroll +
getBoundingClientRect()手动检测，性能稍差但逻辑一致 - 所有 video 建议统一加
preload="metadata"，既保障封面快速显示，又避免加载整段视频
