Reactjs 中的滚动播放/暂停视频

Question

我正在尝试实现一种功能，在滚动视频时，如果正在播放视频，则视频会暂停，反之亦然。目前我可以使用设置状态 true/false 的 onClick 函数来完成此操作。但问题是，视频在向下滚动后继续播放，直到我不再点击它暂停为止。我想保留 onClick 功能，并且还想添加 onScroll 功能。尝试这样做onScroll但不起作用。

const [playing, setPlaying] = useState(false);
  const videoRef = useRef(null);

  const handleVideoPress = () => {
    if (playing) {
      videoRef.current.pause();
      setPlaying(false);
    } else {
      videoRef.current.play();
      setPlaying(true);
    }
  };
  return (
    <div className="video">
      <video
        onClick={handleVideoPress}
        className="video__player"
        loop
        ref={videoRef}
        src={url}
      ></video>
    );
}

Answer 1

因此，这将阻止您的视频在任何滚动事件上播放。如果您希望它在离开视口后停止播放，您可以考虑使用IntersectionObserver API之类的方法来执行某些操作（如果它位于视口内（播放视频）或在视口外（停止视频））。

注意：大多数现代浏览器不允许 Javascript 启动视频，除非已经有至少一些用户与页面交互。

  const [playing, setPlaying] = useState(false);
  const videoRef = useRef(null);

  useEffect(() => {
    window.addEventListener('scroll', debounce(handleScroll, 200))

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

  const startVideo = () => {
    videoRef.current.pause();
    setPlaying(false);
  }

  const pauseVideo = () => {
    videoRef.current.play();
    setPlaying(true);
  }

  const handleScroll = (e) => {
    if (playing) {
      pauseVideo();
    }
  }

  const handleVideoPress = () => {
    if (playing) {
      startVideo();
    } else {
      pauseVideo();
    }
  };

  return (
    <div className="video">
      <video
        onClick={handleVideoPress}
        className="video__player"
        loop
        ref={videoRef}
        src={url}
      ></video>
    );
}

我制作了一个使用IntersectionObserverReact 的 ref hooks 的工作示例，可以在这里找到：

https://codesandbox.io/s/strange-smoke-p9hmx

如果您还有其他问题，请告诉我。