如何实现视频播放结束后自动滚动到页面指定位置

本文详解如何通过 javascript 监听 html5 视频播放结束事件，并触发平滑滚动至页面下方目标区域，解决因事件未绑定或逻辑错误导致的滚动失效问题。

在网页中实现“视频播放完毕后自动滚动”是一个常见但易出错的交互需求。你当前代码的核心问题在于：ended() 函数从未被调用，且其内部逻辑与 scrollPlay() 的执行时机存在冲突。此外，直接依赖 vid.currentTime >= vid.duration 判断结束状态在部分浏览器中可能因精度或缓冲问题而不可靠；更健壮的方式是监听原生的 ended 事件。

✅ 正确做法：使用原生 ended 事件监听器

html5

const vid = document.getElementById('v0');  // 确保视频加载完成后再绑定事件（推荐在 loadeddata 或 canplaythrough 后） vid.addEventListener('canplaythrough', () => {   vid.addEventListener('ended', () => {     // ✅ 推荐：平滑滚动到页面底部或指定元素     document.querySelector('.section3').scrollIntoView({       behavior: 'smooth',       block: 'start'     });      // 或滚动到固定像素位置（如 1000px）     // window.scrollTo({ top: 1000, behavior: 'smooth' });   }); });

? 提示：canplaythrough 比 loadedmetadata 更稳妥，它表示浏览器认为视频可连续播放而无需中途缓冲，此时绑定 ended 事件更安全。

⚠️ 为什么你原来的代码不工作？

• ended() 函数定义了但从未被调用，也没有绑定到任何事件；
• vid.currentTime >= vid.duration 在 ended 事件触发前就可能为 true（如拖拽、网络延迟），导致误判；
• setInterval 轮询方案（如答案中建议）虽能“兜底”，但属于低效且非标准做法，会持续占用 CPU，且增加代码复杂度；
• scrollPlay() 是一个递归调用 requestAnimationFrame 的函数，用于实现“滚动驱动视频”效果（即滚动控制播放进度），但它与“视频结束滚动”是两个独立需求，混用会导致逻辑混乱和潜在冲突。

✅ 完整修复建议（整合进你的 app.js）

document.addEventListener('DOMContentLoaded', () => {   const vid = document.getElementById('v0');   const setHeight = document.getElementById('set-height');    // 1. 动态设置容器高度（保持原有逻辑）   vid.addEventListener('loadedmetadata', () => {     const playbackConst = 1000;     setHeight.style.height = Math.floor(vid.duration) * playbackConst + 'px';   });    // 2. 启动滚动驱动播放（scrollPlay）——仅当需要“滚动控制视频”时启用   function scrollPlay() {     const frameNumber = window.scrollY / 1000;     if (vid.readyState >= 2) { // 确保有足够数据解码       vid.currentTime = Math.min(frameNumber, vid.duration);     }     requestAnimationFrame(scrollPlay);   }    // 3. 视频播放结束后，停止 scrollPlay 并滚动到下一区域   let scrollPlayActive = false;   vid.addEventListener('play', () => {     if (!scrollPlayActive) {       scrollPlayActive = true;       scrollPlay();     }   });    vid.addEventListener('ended', () => {     scrollPlayActive = false; // 停止驱动逻辑     document.querySelector('.section3').scrollIntoView({       behavior: 'smooth',       block: 'start'     });   }); });

? 注意事项

• 不要混用 autoplay 和用户交互限制：现代浏览器（chrome、safari 等）要求视频静音（muted）才能自动播放，你已添加 muted，这点正确 ✅；
• 确保目标元素存在：.section3 必须在 dom 中可访问，否则 scrollIntoView() 会静默失败；
• 避免重复绑定：将事件监听器放在 DOMContentLoaded 内，防止脚本多次执行导致重复监听；
• 移动端兼容性：scrollIntoView({ behavior: ‘smooth’ }) 在所有现代浏览器中均支持；若需兼容旧版 Safari，可降级为 window.scrollTo(0, target.offsetTop)。

✅ 总结

实现“视频结束自动滚动”的关键不是轮询或手动比对时间，而是信任并正确使用 html5 视频的原生事件系统。只需监听 ended 事件，在回调中调用 scrollIntoView() 或 scrollTo() 即可。同时注意分离不同功能逻辑（如“滚动驱动播放”与“结束跳转”），保持代码清晰、可维护、高性能。