React 中视频自动播放的页面重新加载和重定向之间的区别

Question

问题： 我正在开发一个 React 应用程序，其中使用 React-player 库实现了视频自动播放功能。当页面重定向（例如，从 localhost:5173/ 到 localhost:5173/home）时，视频会正确自动播放，因为涉及用户交互。但是，当页面重新加载时（例如，从 localhost:5173/home 到 localhost:5173/home），我遇到了问题。

视频会在页面重定向时自动播放，但不会在页面重新加载时自动播放。 出于用户体验的考虑，我不想将视频静音以便自动播放。

问题：

如何在 React 应用程序中可靠地区分页面重新加载和页面重定向？ 有没有办法在页面重新加载时处理视频自动播放而不将视频静音？

代码：

const VideoPlayer = ({ url, cb, videopause, setVideoPause, index }) => {
  const [isPlaying, setIsPlaying] = useState(false);

  const handlePlay = () => {
    setIsPlaying(true);
  };

  useEffect(() => {
    if (![-1].includes(index)) {
      setIsPlaying(true);
      setVideoPause(false);
    }
  }, [index, setVideoPause]);

  return (
    <>
      <div
        className={`${videopause
          ? "h-[15vh] md:h-[25vh]"
          : "h-[50vh] md:h-[60vh] md:min-w-fit"
          } rounded-lg relative flex`}
      >
        <ReactPlayer
          className="react-player"
          url={url}
          playsinline={true}
          autoPlay={true}
          width="100%"
          height="100%"
          controls={false}
          playing={isPlaying && !videopause}
          onEnded={cb}
        />
        {!isPlaying && (
          <button
            onClick={handlePlay}
            className="absolute w-20 h-20 text-white bg-black bg-opacity-50 rounded-full"
            style={{
              top: "50%",
              left: "50%",
              transform: "translate(-50%, -50%)",
            }}
          >
            Play
          </button>
        )}
        {videopause && (
          <>
            <div className="absolute top-0 left-0 w-full h-full bg-black opacity-30 rounded-3xl"></div>
            <img
              src={replay_icon}
              alt="Replay"
              className="absolute w-8"
              style={{
                top: "50%",
                left: "50%",
                transform: "translate(-50%, -50%)",
              }}
              onClick={() => {
                setVideoPause(false);
                setIsPlaying(true);
              }}
            />
          </>
        )}
      </div>
    </>
  );
};

export default VideoPlayer;

我尝试使用标志来跟踪视频播放状态，但即使在暂停时，它们也会显示视频正在播放。我也尝试过这个：

const navigationType = performance.navigation.type;
    if (navigationType === 1) {
      console.log("Page is being reloaded");
      // Reset playback state as needed on reload
      setIsPlaying(false); // Example: reset to false on reload
      localStorage.removeItem("videoPlaybackState"); // Clear stored state on reload
    }
  }, []);

但即使页面重定向它也能工作。任何见解或建议将不胜感激。谢谢！

Answer 1

React Player的文档提到将

playing

设置为

true

来播放视频。您可以在页面重新加载时将状态设置为默认

true

。

const [isPlaying, setIsPlaying] = useState(true);

<ReactPlayer 
  playing={isPlaying && !videopause}
  onPlay={() => setIsPlaying(true)}
  onPause={() => setIsPlaying(false)}
/>