视频进入视口后自动播放需用IntersectionObserver检测可见性并调用play()，同时必须设置muted、autoplay和playsinline属性以满足浏览器策略。
视频进入视口后自动播放，关键在于用 IntersectionObserver 检测可见性，并在进入阈值时调用 play()。由于现代浏览器策略限制（如 Chrome 要求用户手势触发或静音播放），必须设置 muted 和 autoplay 属性，且建议添加 playsinline 适配 iOS。
1. HTML 结构需满足自动播放前提
确保视频标签包含必要属性：
-
autoplay：声明自动播放意图 -
muted：静音是大多数浏览器允许自动播放的硬性要求 -
playsinline：iOS Safari 必须，防止全屏播放 -
webkit-playsinline（可选）：旧版 iOS 兼容
示例：
2. 初始化 IntersectionObserver 并绑定回调
创建观察器，监听视频是否进入视口（推荐阈值设为 0 或 0.1），并在首次可见时尝试播放：
const observer = new IntersectionObserver(
(entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
video.play().catch(e => console.warn('自动播放被阻止：', e));
observer.unobserve(video); // 播放后停止监听，避免重复调用
}
});
},
{ threshold: 0.1 }
);
observer.observe(video);
3. 处理播放失败的常见原因
video.play() 可能返回 Promise 并被拒绝，常见原因包括：
- 用户未与页面交互（部分浏览器要求首次播放前有用户手势）
- 视频尚未加载完成（可监听
canplay或使用preload="auto"） - 音频上下文被挂起（尤其在 iOS 上，可尝试在用户点击后恢复）
增强健壮性的做法：
- 给
<video></video>添加preload="auto" - 监听
canplay事件，在就绪后再尝试播放 - 提供备用方案：例如显示“点击播放”按钮，用户点击后调用
play()并解除静音
4. 注意移动端兼容性与用户体验
iOS Safari 对自动播放限制更严格，即使静音也可能因页面未激活而失败。建议：
- 始终设置
muted和playsinline - 避免依赖首次进入即播放，可结合
visibilitychange或用户滚动后短暂延迟再尝试 - 添加加载状态提示（如占位图、spinner），提升感知性能
- 测试真机环境，模拟器可能行为不一致
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
