企业官网建设流程全解析

简介：这份资源是一套用于滚动开始与停止视频的轻量级 JavaScript 实现，面向需要在网页中实现滚动触发视频播放控制的开发者，尤其适合前端初学者与需要快速集成滚动交互的页面制作者。包内共 3 个文件，以 js 脚本为核心，辅以 md 说明文档与 copying 授权文件，压缩包整体约 14KB，体积小巧、便于直接嵌入现有项目。使用前需先引入 jQuery 库，再加载视频控制脚本，并在页面中绑定 window 的 scroll 事件调用相应方法，即可实现滚动到指定区域自动播放、离开时暂停的效果。目前已有 252 人学习下载，说明该方案在滚动视频交互场景中具有一定参考价值。读者可获得可直接复用的脚本文件、清晰的引入与调用示例，以及基于 jQuery 的滚动事件处理思路，便于快速搭建滚动控制视频的页面逻辑，并在此基础上按需扩展播放阈值、动画过渡等细节。

1. 滚动即播、停滚即停：video-scroll 到底解决什么场景

信息流里塞视频，最怕两件事：用户滑过去了视频还在后台响，或者滑回来了视频不接着播。video-scroll这个标题指向的就是用原生 JavaScript 监听滚动，判断视频元素是否进入视口，进入就play()，离开就pause()。它不依赖任何框架，核心就是IntersectionObserver或scroll事件加getBoundingClientRect()两套方案。适合做短视频列表、课程章节预览、商品详情页嵌入视频的开发者。我最早在移动端 H5 列表页遇到这个问题：十几个<video>标签同时加载，用户滑到第三个，第一个还在出声，体验直接翻车。后来用滚动监听把播放状态和视口绑定，内存和流量都降下来了。这篇就把这套方案从选型到参数到踩坑讲透，让你能直接抄进项目。

2. 两种滚动检测方案：IntersectionObserver 与 scroll 事件怎么选

2.1 IntersectionObserver 的工作机制与适用边界

IntersectionObserver是浏览器原生提供的异步观察器，它不监听滚动事件本身，而是由浏览器在合成线程判断目标元素与视口（或指定根元素）的交叉状态，交叉比例越过阈值时回调。这意味着它不会因为滚动事件高频触发而阻塞主线程，在长列表里性能优势明显。它的回调里能拿到intersectionRatio（交叉比例）和isIntersecting（是否相交），判断视频该播还是该停非常直接。

但它的边界也要说清楚：第一，它只能告诉你“相交了多少”，不能告诉你滚动方向，如果你需要“向上滑才播、向下滑不播”这种逻辑，得自己记录上一次的boundingClientRect.top来推算方向。第二，rootMargin参数虽然能提前触发，但设置不当会导致视频还没进视口就开播，用户看到的是黑屏在响。第三，iOS 低版本 Safari 对rootMargin的百分比支持有差异，我一般用像素值而不是百分比。

// 用 IntersectionObserver 监听视频进入/离开视口 const observer = new IntersectionObserver( (entries) => { entries.forEach((entry) => { const video = entry.target; if (entry.isIntersecting && entry.intersectionRatio >= 0.6) { // 交叉比例达到 60% 才播放，避免刚露头就响 video.play().catch(() => { // 自动播放被浏览器策略拦截时静默失败，等用户手势 }); } else { video.pause(); } }); }, { root: null, // null 表示以视口为根 rootMargin: '0px', // 不提前触发，严格按视口判断 threshold: [0, 0.6, 1] // 在 0%、60%、100% 三个节点回调 } ); // 对页面上所有视频元素挂载观察 document.querySelectorAll('video[data-scroll-play]').forEach((v) => { observer.observe(v); });

这段代码的逻辑是：给每个带>// scroll 事件 + rAF 节流，兼容不支持 IntersectionObserver 的环境 let ticking = false; const videos = Array.from(document.querySelectorAll('video[data-scroll-play]')); function checkVideos() { const viewportHeight = window.innerHeight || document.documentElement.clientHeight; videos.forEach((video) => { const rect = video.getBoundingClientRect(); // 视频顶部进入视口底部，且底部未完全离开视口顶部 const inView = rect.top < viewportHeight * 0.8 && rect.bottom > viewportHeight * 0.2; if (inView && video.paused) { video.play().catch(() => {}); } else if (!inView && !video.paused) { video.pause(); } }); ticking = false; } window.addEventListener('scroll', () => { if (!ticking) { window.requestAnimationFrame(checkVideos); ticking = true; } }, { passive: true });

这里用viewportHeight * 0.8和* 0.2划了一个中间区域，只有视频进入这个区域才播，避免在视口边缘反复触发。passive: true告诉浏览器这个监听器不会调preventDefault()，滚动性能会好很多。ticking标志位保证一帧内只执行一次checkVideos。注意video.paused判断，避免对已经在播的视频重复调play()，那会打断播放进度。

2.3 两套方案的参数对照与选型建议

选型上我的习惯是：新项目一律IntersectionObserver，代码少、性能好、不用管节流。只有遇到必须兼容 IE 或者需要根据滚动方向做差异化播放的场景，才退回scroll方案。两套方案不要混用，否则同一个视频可能被两个逻辑同时控制，播放状态会打架。

3. 把 video-scroll 接进真实列表：最小可运行实现

3.1 HTML 结构与视频属性配置

先看结构。每个视频外层包一个容器，容器负责占位和布局，视频本身用><div class="video-list"> <div class="video-item"> <video >function initVideoScroll(options = {}) { const { selector = 'video[data-scroll-play]', threshold = 0.6, rootMargin = '0px' } = options; const videos = document.querySelectorAll(selector); if (!videos.length) return null; // 记录用户手动暂停的视频，避免滚动逻辑覆盖用户意图 const userPausedSet = new WeakSet(); videos.forEach((video) => { video.addEventListener('pause', () => { // 只有非滚动触发的暂停才标记为用户操作 if (!video.dataset.scrollPausing) { userPausedSet.add(video); } }); video.addEventListener('play', () => { userPausedSet.delete(video); }); }); const observer = new IntersectionObserver( (entries) => { entries.forEach((entry) => { const video = entry.target; if (userPausedSet.has(video)) return; // 用户暂停过，跳过自动控制 if (entry.isIntersecting && entry.intersectionRatio >= threshold) { video.play().catch(() => {}); } else { video.dataset.scrollPausing = '1'; video.pause(); delete video.dataset.scrollPausing; } }); }, { root: null, rootMargin, threshold: [0, threshold, 1] } ); videos.forEach((v) => observer.observe(v)); return observer; } // 调用 initVideoScroll({ threshold: 0.6 });

WeakSet存用户暂停过的视频，不增加引用计数，视频被移除后自动回收。dataset.scrollPausing是个临时标记，用来区分“滚动导致的暂停”和“用户手动暂停”，避免把滚动暂停误判成用户意图。threshold传 0.6，观察器内部会展开成[0, 0.6, 1]，保证在进入和离开时都有回调。这个封装返回 observer 实例，方便在组件销毁时调observer.disconnect()清理。

3.3 播放失败与自动播放策略的处理

自动播放被拦截是最高频的问题。浏览器的策略是：没有用户手势交互之前，带声音的视频不允许自动播放。muted能绕过大部分限制，但有些浏览器连静音自动播放也要求用户先点过页面。我的处理方式是：play()失败时不报错，而是给视频加一个点击播放的遮罩，用户点一下再播。同时监听canplay事件，确保视频数据够了再调play()，否则可能因为数据没加载完而失败。

// 处理自动播放被拦截：失败时显示点击播放按钮 function safePlay(video) { const playPromise = video.play(); if (playPromise !== undefined) { playPromise.catch(() => { // 自动播放被拒，显示播放按钮 const btn = document.createElement('button'); btn.className = 'video-play-btn'; btn.textContent = '点击播放'; btn.onclick = () => { video.play(); btn.remove(); }; video.parentElement.appendChild(btn); }); } }

safePlay把play()的 Promise 接住，失败就动态插一个按钮。按钮点击后再播，这次有用户手势，不会被拦。按钮要定位在视频容器上，样式自己写。这个兜底逻辑在移动端 Safari 和部分安卓浏览器上是必须的，否则用户看到的就是一个永远不动的封面。

4. 避坑与排查：video-scroll 落地时最容易翻车的 5 个点

4.1 视频刚露头就播放，用户听到声音但看不到画面

现象：列表快速滚动时，视频在视口边缘刚出现就开播，声音先出来，画面还在下面。原因：threshold设得太低，或者rootMargin设了正值提前触发。解决：把threshold提到 0.5 以上，rootMargin保持0px，确保视频主体进入视口再播。如果确实需要预加载，用preload="metadata"而不是提前play()。

4.2 多个视频同时播放，声音叠在一起

现象：快速滚动时，前一个视频还没暂停，后一个已经开始播，两个声音重叠。原因：IntersectionObserver回调是异步的，两个视频的交叉状态在同一帧变化时，回调可能都判定为“进入”。解决：在播放前检查当前是否有其他视频在播，有就先暂停。或者维护一个“当前播放视频”的引用，每次只允许一个播。

let currentPlaying = null; // 在播放逻辑里加： if (currentPlaying && currentPlaying !== video) { currentPlaying.pause(); } currentPlaying = video; video.play().catch(() => {});

4.3 iOS 上视频无法自动播放，控制台报 NotAllowedError

现象：安卓正常，iOS 上play()直接抛NotAllowedError。原因：iOS 的自动播放策略更严，即使muted也要求视频有playsinline属性，且部分版本要求用户有过交互。解决：确保<video>同时有muted和playsinline，并且在用户首次触摸页面后初始化滚动逻辑。如果还不行，用 3.3 的safePlay兜底。

4.4 滚动时页面卡顿，帧率掉到 20 以下

现象：列表长了以后滚动明显掉帧。原因：用了scroll事件方案但没节流，或者IntersectionObserver的threshold数组太长导致回调过于频繁。解决：scroll方案必须加requestAnimationFrame节流；IntersectionObserver的threshold控制在 3 个值以内，不要写十几个。另外检查回调里有没有强制重排的操作，比如读offsetHeight。

4.5 视频暂停后进度丢失，再播从头开始

现象：滑出去暂停，滑回来播放时视频从头开始。原因：某些浏览器在pause()后如果视频被移出 DOM 或src被重置，currentTime会归零。解决：不要动态改src，暂停时只调pause()不碰其他属性。如果必须复用视频元素，在暂停前记录currentTime，播放前恢复。

// 暂停前记录进度 const time = video.currentTime; video.pause(); // 恢复播放前 video.currentTime = time; video.play().catch(() => {});

5. 进阶：用滚动方向做差异化播放与性能验证

基础版只判断“在不在视口”，但真实产品里经常有更细的需求：向上滑（回看）时自动播，向下滑（浏览）时不播，只显示封面。这需要记录滚动方向。做法是在IntersectionObserver回调里对比上一次的boundingClientRect.top，如果这次比上次大，说明元素在往下移动，用户是在向上滑。

const lastTopMap = new WeakMap(); const observer = new IntersectionObserver((entries) => { entries.forEach((entry) => { const video = entry.target; const lastTop = lastTopMap.get(video) ?? entry.boundingClientRect.top; const currentTop = entry.boundingClientRect.top; const scrollingUp = currentTop > lastTop; // top 变大 = 元素下移 = 用户上滑 lastTopMap.set(video, currentTop); if (entry.isIntersecting && entry.intersectionRatio >= 0.6) { if (scrollingUp) { video.play().catch(() => {}); } else { video.pause(); } } else { video.pause(); } }); }, { threshold: [0, 0.6, 1] });

WeakMap存每个视频上一次的top值，不干扰 DOM。scrollingUp为真时播放，否则暂停。这个逻辑适合“回看才播”的场景，比如教程列表，用户往回滑说明想重看，往前滑说明在找下一个。

性能验证方面，我一般用 Chrome DevTools 的 Performance 面板录一段滚动，看 FPS 曲线和主线程活动。如果IntersectionObserver方案下 FPS 稳定在 55 以上，说明没问题。如果掉帧，检查回调里有没有同步布局操作。另一个指标是内存，用 Memory 面板看视频元素增多时堆内存是否线性增长，如果增长过快，可能是观察器没断开或者视频没释放。

最后说一个我自己的习惯：上线前一定在真机上滑十分钟，安卓和 iOS 各一台。模拟器上跑得再顺，真机的滚动惯性和自动播放策略都可能不一样。我吃过一次亏，模拟器全绿，真机上一半视频不播，查了半天是playsinline漏了一个。希望帮到你。

本文还有配套的精品资源，点击获取