视频自动播放需同时设置autoplay和muted属性，并用intersectionobserver监听视口可见性，配合isplaying状态位防重复操作，移动端需额外处理safari策略及css尺寸兼容性。
视频元素默认静音属性必须显式设置
浏览器出于用户体验和自动播放策略限制，video 元素在未用户交互（如点击）前，不允许有声音的自动播放。即使你写了 autoplay，没加 muted 就大概率被静音或直接阻断播放。所以第一步不是监听滚动，而是确保视频本身具备“可静音自动播放”的基础条件。
正确写法示例：
<video autoplay muted loop playsinline><source src="clip.mp4" type="video/mp4"></source></video>
注意点：
-
autoplay和muted必须同时存在，缺一不可 -
playsinline在 iOS Safari 上必需，否则视频会全屏弹出 - 不要依赖 CSS 隐藏控件来“假装”静音——
muted是布尔属性，必须写在 HTML 里或用 JS 显式设为true
用 IntersectionObserver 判断视频是否进入视口
比监听 scroll 事件更轻量、更可靠。它不触发重排重绘，且能精准控制触发时机（比如只在视频完全可见时才开始播放）。
典型用法：
const video = document.querySelector('video');
const observer = new IntersectionObserver(
(entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
video.play().catch(e => console.warn('play failed:', e));
} else {
video.pause();
}
});
},
{ threshold: 0.1 } // 视口内占比 ≥10% 即触发
);
observer.observe(video);
关键参数说明：
-
threshold设为0表示只要有一像素进入就触发；设为1表示必须 100% 可见才触发 - 如果页面有多个视频，每个都要单独
observe()，不能复用同一个 observer 实例去观察多个目标 -
video.play()可能抛错（比如用户禁用了自动播放），务必用catch捕获，避免阻断后续逻辑
滚动中反复触发播放/暂停的防抖处理
IntersectionObserver 的回调可能高频触发（尤其在快速滚动时），而 video.play() 和 video.pause() 是异步操作，频繁调用容易导致状态混乱或报错。
简单但有效的防护方式：
let isPlaying = false;
observer.observe(video);
// …… 在回调中：
if (entry.isIntersecting && !isPlaying) {
video.play().then(() => isPlaying = true);
} else if (!entry.isIntersecting && isPlaying) {
video.pause();
isPlaying = false;
}
为什么需要这个标志位：
- 避免重复调用
play()导致DOMException: The element has no supported sources等误报 - 防止
pause()在视频本就没播时执行，引发无意义异常 - 不需要引入第三方防抖函数，原生状态标记足够稳定
移动端 Safari 的静音播放兼容性陷阱
iOS 16.4+ 对 autoplay + muted 的要求更严格：视频必须是“用户手势后首次触发”，否则仍可能被拦截。单纯靠 IntersectionObserver 进入视口并不算有效用户交互。
稳妥方案是加一层轻量级用户确认：
<button id="play-trigger" style="display:none">点击播放</button>
并在 observer 回调中显示该按钮（仅当视频未播放且处于视口时），用户点击后再调用 video.play() 并隐藏按钮。这样既满足 Safari 的策略，又不影响桌面端体验。
容易忽略的细节：
- 移动端
video默认尺寸可能为 0×0，需用 CSS 明确设宽高，否则 IntersectionObserver 认为它不可见 - 某些安卓 WebView（如微信内置浏览器）对
playsinline支持不一致，建议加x5-playsinline和webkit-playsinline兼容 - 静音状态下，
video.muted属性值不一定实时反映实际状态，应以video.paused和播放行为为准
真正卡住人的往往不是代码逻辑，而是浏览器策略变化和移动端碎片化行为。先保静音自动播通路，再叠加滚动控制，比反过来调试省一半时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
