Javascript 退出视口时暂停html视频

我正在开发一个

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的东西

如果有人对这个问题的解决方案感兴趣，我设法使用一个定制的钩子让它工作起来。这有点难看，但它完成了任务

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);
    };
  }, []);
}

---

如果有人对这个问题的解决方案感兴趣，我设法使用一个定制的钩子让它工作。这有点难看，但它完成了任务

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);
    };
  }, []);
}