简介：这份资源是一套用于滚动开始与停止视频播放的轻量级 JavaScript 实现，面向需要为网页添加滚动触发视频控制逻辑的前端开发者，尤其适合刚接触 jQuery 与 DOM 事件、希望快速上手交互效果的入门与中级学习者。压缩包共 3 个文件，包含 1 个 js 脚本、1 个 md 说明文档和 1 个 copying 授权文件，整体约 14KB，体积小巧便于直接引入项目。核心脚本通过监听 window 的 scroll 事件，在页面滚动到指定位置时自动控制视频的播放与暂停，使用前只需在页面中引入 jQuery 库并加载该脚本，再按说明添加调用代码即可完成集成。目前已有 252 人学习下载，说明其在滚动交互场景中具有一定参考价值。读者可从中获得可直接复用的脚本文件、清晰的用法说明与授权信息，快速理解滚动驱动视频控制的实现思路，并在此基础上按需调整触发条件与播放行为。
1. 滚动即播、停滚即停：video-scroll 到底解决了什么
页面里嵌一段自动播放的视频，本身不难。难的是让它“懂事”——用户往下滚，视频开始播；用户停下来看别的，视频暂停。这个交互在营销落地页、产品介绍长页、教程文档里非常常见，但真去写，很多人第一版都会写成“监听 scroll 事件然后 play/pause”，结果要么疯狂报The play() request was interrupted，要么在移动端被浏览器拦下来，要么滚动停止后视频还在后台空转耗电。video-scroll 就是冲着这个场景来的：一个用原生 JavaScript 写的轻量脚本，核心逻辑是判断视频元素是否进入视口，进入就播、离开就停，把“滚动开始/停止视频”这件事封装成一个可以直接引入的模块。它不依赖任何框架，不需要你装构建工具，适合做静态页、活动页、文档站的前端同学，也适合刚学 JavaScript 事件和 IntersectionObserver、想找一个真实小项目练手的人。下面我按“它怎么判断、怎么接进你的页面、哪里会翻车”的顺序拆一遍。
2. 拆开 video-scroll：视口判断与播放控制的实现逻辑
2.1 为什么不用 scroll 事件硬算位置
最直觉的写法是监听window的scroll，每次触发时用getBoundingClientRect()拿视频的top和bottom，跟视口高度比一下，在范围内就video.play()，否则video.pause()。这个思路没错，但直接这么写有两个现实问题。第一，scroll事件触发频率极高，滚动一下能触发几十上百次，每次都去读写布局属性会强制浏览器重排，页面一卡，用户体感就是“这页怎么这么顿”。第二，play()返回的是 Promise，如果你在视频还没准备好、或者上一次play()还没 resolve 的时候又调一次，控制台就会刷AbortError: The play() request was interrupted by a call to pause()，这是新手最容易踩的玄学报错。
video-scroll 这类脚本通常会用IntersectionObserver来做视口判断，它是浏览器原生的观察器，回调只在元素“进入/离开”阈值时触发，不用你自己算坐标，也不吃滚动性能。判断逻辑大致是：给每个视频挂一个 observer，当交叉比例超过某个阈值（比如 0.5，即一半以上可见）就认为“该播了”，低于阈值就暂停。这样滚动过程中不会疯狂触发，只有状态真正翻转时才执行播放控制。
2.2 核心判断与播放控制的代码骨架
下面这段是我按 video-scroll 的思路还原的最小可用版本，你可以直接放进页面里跑。它做了三件事：收集页面上所有带特定标记的视频、用 IntersectionObserver 观察它们、在状态翻转时安全地播放或暂停。
// 选择页面上所有需要滚动控制的视频 // 约定：给视频加><!-- 视频必须带 muted，否则移动端和多数桌面浏览器会拦截自动播放 --> <video>// video-scroll.module.js export function initVideoScroll(selector = 'video[data-scroll-video]', threshold = 0.5) { const videos = document.querySelectorAll(selector); if (!videos.length) return null; const observer = new IntersectionObserver((entries) => { entries.forEach((entry) => { const video = entry.target; if (entry.isIntersecting) { const p = video.play(); if (p !== undefined) p.catch(() => {}); } else { video.pause(); } }); }, { threshold }); videos.forEach((v) => observer.observe(v)); return observer; // 返回实例，方便页面卸载时 disconnect }逻辑说明：把选择器和阈值做成参数，是为了同一个页面里不同区域能用不同策略，比如首屏大视频用0.5，侧边小视频用0.2。返回 observer 实例很重要，单页应用切换路由时如果不disconnect()，旧的观察器会一直挂着，造成内存泄漏和重复播放。
参数说明：selector默认值就是属性选择器，调用时传空字符串会选中所有视频，不建议。threshold传数字即可，传数组时回调触发更频繁，注意配合节流思路使用。
3. 避坑排查：滚动视频最常见的五类翻车
3.1 视频根本不播，控制台报 NotAllowedError
现象：脚本加载了，滚动到视频位置，画面不动，控制台出现NotAllowedError: play() failed because the user didn't interact with the document first。
原因：浏览器的自动播放策略。没有用户交互、视频又没静音时，play()会被直接拒绝。这不是脚本的 bug，是策略限制。
解决：给视频加muted属性，这是最稳的做法。如果业务必须带声音，就得等用户第一次点击或触摸页面后再初始化 observer，常见做法是监听一次click或touchstart，在回调里再调用initVideoScroll。
3.2 滚动时视频反复播放暂停，像抽搐
现象：慢慢滚动，视频在播和停之间高频切换，声音断断续续。
原因：threshold设得太靠近边界，或者视频刚好卡在阈值线上，滚动时的微小抖动让isIntersecting反复翻转。
解决：把阈值调到一个“有缓冲”的值，比如0.5而不是0.01；如果视频高度接近视口，可以改用rootMargin给判断区域加一点余量，例如rootMargin: '0px 0px -10% 0px'，让视频要再往上一点才触发暂停，减少边界抖动。
3.3 移动端滚动时视频卡顿、掉帧
现象：桌面正常，手机上一滚就卡，视频解码跟不上。
原因：移动端同时解码多个视频会抢资源，加上滚动本身要合成图层，压力很大。
解决：同一时间只允许一个视频播放。可以在 observer 回调里维护一个“当前播放中”的引用，新视频要播时先把上一个pause()。另外给视频加preload="metadata"，别让所有视频一上来就预加载整个文件。
3.4 单页应用切走页面后视频还在后台响
现象：路由跳到别的页面，原页面的视频还在播，或者切回来时播放状态错乱。
原因：observer 没有随组件销毁而断开，DOM 虽然移除了，但观察器还持有引用。
解决：在组件卸载的生命周期里调用observer.disconnect()，并把返回的实例存好。用框架的话，React 放useEffect的清理函数，Vue 放onUnmounted。
3.5 视频进入视口但一直停在第一帧
现象：isIntersecting是true，play()也调了，但画面不动。
原因：视频源还没加载，或者src是空的、路径写错，play()的 Promise 被 reject 但被你的空catch吞掉了。
解决：调试阶段先把catch里的错误打出来，确认是网络问题还是路径问题。生产环境再决定是否静默。另外检查视频格式，部分浏览器对某些编码支持不好，换成 H.264 的 mp4 最稳。
4. 进阶：用 rootMargin 做预加载与多视频节流
4.1 用 rootMargin 让视频提前就位
基础版是“进入视口才播”，但网络慢的时候，用户滚到了视频还在缓冲，体验很差。rootMargin可以扩大或缩小观察区域，把它设成正的底部边距，就能让视频在真正进入视口前就开始加载甚至播放。
const observer = new IntersectionObserver((entries) => { entries.forEach((entry) => { const video = entry.target; if (entry.isIntersecting) { const p = video.play(); if (p !== undefined) p.catch(() => {}); } else { video.pause(); } }); }, { threshold: 0.25, // 底部提前 200px 触发，相当于视频还没露头就开始准备 rootMargin: '0px 0px 200px 0px' });逻辑说明：rootMargin的四个值顺序是上、右、下、左，跟 CSS margin 一致。底部给正值，等于把观察区域的底边往下扩，视频在距离视口底部还有 200px 时就算“进入”了。参数说明：这个值别设太大，否则页面刚打开，下面好几个视频同时开始加载，带宽被抢光，首屏反而更慢。我一般按视频文件大小来估，1MB 左右的给 100 到 200px，大文件给 50px 就够。
4.2 多视频节流：同一时刻只留一个在播
长页面里视频多，必须做节流。思路是维护一个当前播放的引用，新视频要播时先暂停旧的。
let currentPlaying = null; const observer = new IntersectionObserver((entries) => { entries.forEach((entry) => { const video = entry.target; if (entry.isIntersecting) { // 先停掉上一个，再播当前，避免多个同时解码 if (currentPlaying && currentPlaying !== video) { currentPlaying.pause(); } const p = video.play(); if (p !== undefined) p.catch(() => {}); currentPlaying = video; } else if (video === currentPlaying) { video.pause(); currentPlaying = null; } }); }, { threshold: 0.5 });逻辑说明：currentPlaying记录当前在播的视频，进入新视频时先暂停旧的，离开时只有确认是当前播放的才暂停并清空引用，避免误停别的视频。参数说明：这个方案假设同一时间只有一个视频该播，如果你的设计是允许两个小视频并排同时播，就不能用这个节流，得改成按区域分组管理。
4.3 验证脚本是否真的生效
改完别只看“感觉”，用几个具体动作验证。打开开发者工具的 Performance 面板录一段滚动，看有没有长任务和强制重排；在 Elements 里选中视频，滚动时观察paused属性是否跟着变；把网络限速调到 Slow 3G，确认预加载的rootMargin是否让视频在到达前就绪。我自己的习惯是每次改完阈值或边距，都强制在手机和桌面各滚一遍，因为这两个环境的视口高度和滚动惯性差别很大，桌面调好的参数到手机上经常要再动一次。从那以后我每次接滚动视频的需求，都先把muted、playsinline、preload这三个属性写死在模板里，再谈阈值和边距，省得回头返工。希望帮到你。
本文还有配套的精品资源，点击获取
