使用 React，我如何在播放和暂停视频时保持状态？答案

【问题标题】：Using React, how can I maintain state while playing and pausing a video?使用 React，我如何在播放和暂停视频时保持状态？
【发布时间】：2020-10-24 16:43:33
【问题描述】：

我正在 React 中构建一个视频播放器，并试图跟踪视频是否正在播放。自然，我正在考虑使用 React 状态将布尔值设置为 true 或 false。

问题是每当我播放视频并尝试更新状态时，我的视频似乎被重新加载到 DOM 并且播放/暂停状态丢失了。

const refVideo = useRef();
const [isPlaying, setIsPlaying] = useState(false);

function playVideo() {
  if(refVideo && refVideo.current) {
    if(refVideo.current.paused) {
      setIsPlaying(true);
      refVideo.current.requestFullscreen();
      refVideo.current.play();
    } else {
      setIsPlaying(false);
      refVideo.current.pause();
    }
  }
  return false;
}

return (
  <section>
    <video src="video.mp4" ref={refVideo}></video>
    <Button onClick={(e) => playVideo(e)} text="Play / Pause />
  </section>
);

我的Button 组件处理playVideo() 功能，但setIsPlaying(true) 似乎重新渲染视频，阻止它播放。有更好的方法吗？

【问题讨论】：

标签： reactjs video html5-video state

【解决方案1】：

在重新渲染时维护状态的一个建议是使用状态管理器，例如 Redux。在播放器时间戳旁边创建暂停或播放可以确保播放器在任何 React 渲染更改时保持状态和位置。

【讨论】：

【解决方案2】：

您是否考虑过在 cookie 中使用该布尔值？这样您就不必更改状态并重新渲染。您查看 onClick 事件上的 cookie，然后更改布尔值并播放或停止视频。只是一个想法

【讨论】：

【解决方案3】：

我在我的 react 应用程序中使用默认的 html5 播放器，但我需要 UI 取决于视频是否正在播放。在我的 useEffect 函数中设置一个简单的事件监听器对我有用：

videoRef.current.addEventListener('play', () => {
 setVideoPlaying(true)
})
videoRef.current.addEventListener('pause', () => {
  setVideoPlaying(false)
})

【讨论】：