React Web滚动到视频位置触发播放的优化实现方案

需求：页面滚动到视频所在位置时自动启动播放，离开视口时暂停。

原有实现的问题 #

原有方案通过监听滚动获取页面偏移量，用硬编码的固定数值2450判断是否加载播放视频，代码如下：

原有 Script 代码 #

const [currentPosition, setCurrentPosition] = useState(0)

useEffect(() => {
  window.addEventListener('scroll', () => {
    setCurrentPosition(window.pageYOffset)
  })
}, [])

原有 JSX 代码 #

<div className={styles.image__wrapper}>
  <img src={VideoAsset} alt="video" />
  <Fragment>
    {currentPosition > 2450 && (
      <video autoplay controls src={Video} type="video/mp4" />
    )}
  </Fragment>
</div>

这种方式完全绑定初始页面布局，一旦窗口尺寸变化、页面有动态内容加载（比如异步渲染组件），固定偏移量就会失效，健壮性极差。

优化后的健壮方案 #

核心思路是通过元素可视区域判定，直接判断视频是否进入视口，完全不依赖固定偏移量。

核心逻辑代码 #

const handleVideoViewport = () => {
  const video = document.querySelector('video')
  if (!video) return // 避免未找到元素抛出错误

  const videoRect = video.getBoundingClientRect()
  // 获取当前视口尺寸，兼容不同浏览器
  const viewportHeight = window.innerHeight || document.documentElement.clientHeight
  const viewportWidth = window.innerWidth || document.documentElement.clientWidth

  // 判断视频是否完全进入视口（可根据需求调整为部分进入）
  const isInViewport = 
    videoRect.top >= 0 &&
    videoRect.left >= 0 &&
    videoRect.bottom <= viewportHeight &&
    videoRect.right <= viewportWidth

  if (isInViewport) {
    // 捕获自动播放权限错误，比如浏览器禁止未交互的有声自动播放
    video.play().catch(err => console.error('视频播放失败:', err))
  } else {
    video.pause()
  }
}

对应的 JSX 代码 #

<Fragment>
  <video
    className={styles.video__content}
    muted
    loop
    controls
    src={Video}
  />
</Fragment>

补充：绑定/解绑滚动监听 #

需要在组件挂载时绑定滚动事件，卸载时移除，避免内存泄漏：

useEffect(() => {
  window.addEventListener('scroll', handleVideoViewport)
  // 初始化时检查一次视频是否在视口内
  handleVideoViewport()

  return () => {
    window.removeEventListener('scroll', handleVideoViewport)
  }
}, [])

关键注意事项 #

1. 自动播放权限：现代浏览器要求视频必须muted才能自动播放，若需要有声播放，必须先让用户和页面产生交互（比如点击按钮）。
2. 可视区域判断灵活调整：如果不需要视频完全进入视口才播放，可修改isInViewport的条件，比如只要视频有部分进入视口就触发播放：

const isInViewport = 
  videoRect.bottom > 0 &&
  videoRect.top < viewportHeight &&
  videoRect.right > 0 &&
  videoRect.left < viewportWidth

内容的提问来源于stack exchange，提问作者Enes Burak Elmal