我正在播放 Youtube 视频。一旦输入某些内容，API 服务器将回复一个 URL，该 URL 与 Youtube 的播放器在同一播放器中播放。API 的视频结束后，如何回传 YT 视频？

播放器视频代码 (Typescript) 看起来像这样，它由videoUrlProp处理来自父组件的 URL 回应的状态提供。

const Player: React.FC<IProps> = ({
  onProgress,
  videoUrlProp,
}:
IProps) => {

// Don't mind this segment.
  const { playerRef, isPlaying } = useStore(
    (state) => ({ playerRef: state.playerRef, isPlaying: state.isPlaying }),
    shallow
  );

  // We check if the source is the original. This is used to resize the player.
  const isOriginalVideo = videoUrlProp.includes("youtube");

  return (
    <div className="player">
      <ReactPlayer
        url={videoUrlProp}
        controls={true}
        onProgress={onProgress}
        width={isOriginalVideo ? "100%" : "70%"}
        height={isOriginalVideo ? "100%" : "100%"}
        className="react-player"
        ref={playerRef}
        playing={isPlaying}
      />
    </div>
  );
};

export default Player;

我正在react-player为播放器使用；这是在父组件中宣告状态的方式：

const [videoUrl, setVideoUrl] = useState(
    "https://www.youtube.com/watch?v=something"
  );

欢迎任何帮助。谢谢！

*编辑：我对在 stackoverflow 上提问还是有点陌生??，如果我遗漏了一些资料，或者我是否应该以不同的方式写下来，请告诉我！泰！:)

uj5u.com热心网友回复：

状态没有“重置”功能。但是很容易模拟它。

如果您设定您的状态并公开默认/初始值，那么您将拥有以下内容：

const defaultVideoUrl = "https://www.youtube.com/watch?v=something"

然后在你的组件中的某个地方，宣告状态：

const [videoUrl, setVideoUrl] = useState(defaultVideoUrl);

然后在视频结束时设定回该默认值，根据档案，这是使用onEnded道具：

<ReactPlayer
  ...otherProps
  onEnded={() => setVideoUrl(defaultVideoUrl)}
/>

uj5u.com热心网友回复：

您可以将一个函式 props 传递给您的子组件，在视频结束时呼叫它并使用 useEffect 触发父组件中的重置。

useEffect(()=> { 
   if (isVideoFinished) props.reset(true)
}, [isVideoFinished])

并在您的父组件中简单地做

const reset = (shouldReset) => {
  if (shouldReset) {
    setVideoUrl('reset to whatever you want')
  }
}