Блог

Я пытаюсь добиться функциональности, при которой при прокрутке видео приостанавливается, если оно воспроизводилось, и наоборот. В настоящее время я могу сделать это с помощью функции onClick, которая устанавливает состояние true / false. Но проблема в том, что видео продолжает воспроизводиться после прокрутки вниз, пока я не нажму на него, чтобы снова поставить на паузу. Я хочу сохранить функцию 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>
    );
}
  

Таким образом, это остановит воспроизведение вашего видео при любом событии прокрутки. Если вы хотите, чтобы оно прекратило воспроизведение, если оно покинуло область просмотра, вы можете изучить возможность использования чего-то вроде 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>
    );
}
  

Я сделал рабочий пример использования IntersectionObserver с ref-крючками React, которые можно найти здесь:

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

Пожалуйста, дайте мне знать, если у вас возникнут еще какие-либо вопросы.