Javascript 在Reactjs中滚动播放/暂停视频

我试图实现一种功能，在滚动视频时，如果它正在播放，就会暂停，反之亦然。目前，我可以使用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>
    );
}

const[playing，setPlaying]=useState（false）；
const videoRef=useRef（空）；
const handleVideoPress=（）=>{
如果（玩）{
videoRef.current.pause（）；
布景播放（假）；
}否则{
videoRef.current.play（）；
布景播放（真实）；
}
};
返回(
);
}

因此这将阻止您的视频在任何滚动事件上播放。如果您希望它在离开视口时停止播放，则可以使用类似的方法进行查看，以在视口内（播放视频）或视口外（停止视频）时执行操作

注意：大多数现代浏览器不允许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>
    );
}

const[playing，setPlaying]=useState（false）；
const videoRef=useRef（空）；
useffect（（）=>{
window.addEventListener（“滚动”，去盎司（handleScroll，200））
return（）=>{
window.removeEventListener（'scroll'，handleScroll）；
};
}, []}
常量startVideo=（）=>{
videoRef.current.pause（）；
布景播放（假）；
}
const pauseVideo=（）=>{
videoRef.current.play（）；
布景播放（真实）；
}
常量handleScroll=（e）=>{
如果（玩）{
pauseVideo（）；
}
}
const handleVideoPress=（）=>{
如果（玩）{
startVideo（）；
}否则{
pauseVideo（）；
}
};
返回(
);
}

我制作了一个将

IntersectionObserver

与React的ref挂钩一起使用的工作示例，可以在这里找到：

---

如果您还有任何问题，请告诉我。

这将阻止您的视频在任何滚动事件上播放。如果您想让它在离开视口时停止播放，您可以使用类似的方法来做一些事情，如果它在视口内（播放视频）或在视口外（停止视频）

注意：大多数现代浏览器不允许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>
    );
}

const[playing，setPlaying]=useState（false）；
const videoRef=useRef（空）；
useffect（（）=>{
window.addEventListener（“滚动”，去盎司（handleScroll，200））
return（）=>{
window.removeEventListener（'scroll'，handleScroll）；
};
}, []}
常量startVideo=（）=>{
videoRef.current.pause（）；
布景播放（假）；
}
const pauseVideo=（）=>{
videoRef.current.play（）；
布景播放（真实）；
}
常量handleScroll=（e）=>{
如果（玩）{
pauseVideo（）；
}
}
const handleVideoPress=（）=>{
如果（玩）{
startVideo（）；
}否则{
pauseVideo（）；
}
};
返回(
);
}

我制作了一个将

IntersectionObserver

与React的ref挂钩一起使用的工作示例，可以在这里找到：

---

如果您还有任何问题，请告诉我。

说debouce未定义。尝试使用交叉点观察者，我想知道哪里出了问题useEffect（（）=>{let video=document.getElementById（“video\u player”）；let observer=new IntersectionObserver（（条目）=>{if（entry.intersectionRatio！=1&&！playing）{videoRef.current.pause（）；setPlaying（true）；}否则如果（playing）{videoRef.current.play（）；setPlaying（false）；}，{阈值：1}）；observer.observe（视频）；observe.unobserve（视频）；}，[播放]）；Debounce是一个您可以自己编写的函数，也可以使用lodash库。让我完成一些工作，然后我将为您提供一个IntersectionObserver API的工作示例。我使用一个代码沙盒的链接更新了我的答案，其中包含一个使用IntersectionObserver的工作示例。另请参阅我关于javascript处理视频/音频的播放/暂停功能。您的代码沙盒代码完美无瑕。谢谢！但现在播放/暂停视频的单击功能不再起作用。我想保留这两个功能。您能帮我吗？说debouce未定义。尝试使用交叉点观察者，我想知道哪里出了问题useEffect（（）=>{let video=document.getElementById（“video_uplayer”）；let observer=new IntersectionObserver（（entry）=>{if（entry.intersectionRatio！=1&&！playing）{videoRef.current.pause（）；setPlaying（true）；}else if（playing）{videoRef.current.play（）；setPlaying（false）}}，{阈值：1}）；observer.observe（视频）；observer.unobserve（视频）；}，[播放]）；Debounce是一个您可以自己编写的函数，也可以使用lodash库。让我完成一些工作，然后我将为您提供一个IntersectionObserver API的工作示例。我使用一个代码沙盒的链接更新了我的答案，其中包含一个使用IntersectionObserver的工作示例。另请参阅我关于javascript处理视频/音频的播放/暂停功能。您的代码沙盒代码工作完美。谢谢！但现在播放/暂停视频的单击功能不再工作。我想保留这两个功能。您能帮我吗？？