走出视口reactjs时暂停html视频答案

【问题标题】：Pause html video when going out of viewport reactjs走出视口reactjs时暂停html视频
【发布时间】：2019-10-11 07:59:39
【问题描述】：

我正在开发一个ReactJs 应用程序，我在其中使用 html 视频播放器来播放视频。我有一个要求，当视频离开视口或另一个视频进入视口并开始播放时，需要暂停视频。我提到了很多例子，但大多数都说如何使用外部库或使用jQuery。

<video controls autoPlay loop muted controlsList='nodownload' poster={this.props.postData.media[0].thumbnail}>
    <source src={this.props.postData.media[0].sourcePath} type='video/mp4' />
</video>

这是我的视频播放器代码。我在某处读到onBlur 事件可用于实现这一点。但不幸的是，这并没有奏效。可能是因为我做得不对。我想要类似于 Twitter 和 LinkedIn 的东西。

【问题讨论】：

标签： javascript reactjs html5-video

【解决方案1】：

如果有人对此解决方案感兴趣，我设法使用自定义挂钩使其工作。这有点难看，但它可以完成工作。

export function useVideoAutoplay({ threshold = 0.8 } = {}) {
  function checkScroll() {
    const videos = document.getElementsByTagName('video');

    for (let i = 0; i < videos.length; i++) {
      const video = videos[i];

      const x = video.offsetLeft;
      const y = video.offsetTop;
      const w = video.offsetWidth;
      const h = video.offsetHeight;
      const r = x + w; // right
      const b = y + h; // bottom

      const visibleX = Math.max(
        0,
        Math.min(
          w,
          window.pageXOffset + window.innerWidth - x,
          r - window.pageXOffset,
        ),
      );
      const visibleY = Math.max(
        0,
        Math.min(
          h,
          window.pageYOffset + window.innerHeight - y,
          b - window.pageYOffset,
        ),
      );

      const visible = (visibleX * visibleY) / (w * h);

      if (visible > threshold) {
        video.play();
      } else {
        video.pause();
      }
    }
  }

  useEffect(() => {
    window.addEventListener('scroll', checkScroll, false);
    window.addEventListener('resize', checkScroll, false);
    return () => {
      window.removeEventListener('scroll', checkScroll);
      window.removeEventListener('resize', checkScroll);
    };
  }, []);
}

然后在 App.js 中：

useVideoAutoplay();

【讨论】：