在 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>

    );

}

我做了一个使用 React 的引用钩子的工作示例IntersectionObserver，可以在这里找到：

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

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