时间戳

首页 > 解决方案 > 走出视口reactjs时暂停html视频

javascript - 走出视口reactjs时暂停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 的东西。

标签： javascriptreactjshtml5-video

解决方案

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

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();

推荐阅读