2

快速总结

我希望能够观看视频，并在视频中的给定时间戳创建一些注释。我目前正在使用react-player库来流式传输视频，以及使用 CRA 创建的 react/redux 项目。我发现在创建笔记时很难获得视频的最新时间戳。

细节

感兴趣的主要组件是两个兄弟组件。为简化起见，假设我们有一个App.js文件，其中包含VideoPlayer组件和AddNoteButton组件。

这是每个组件中正在发生的事情，非常简化

视频播放器

export function VideoPlayer() {
  const player = useRef(null);
  const playing = useSelector(selectPlaying);
  const dispatch = useDispatch();

  return (
    <ReactPlayer
      ref={player}
      onPause={() => {
        dispatch(setPlaying(false));
      }}
      onPlay={() => {
        dispatch(setPlaying(true));
      }}
      onProgress={(progress) => dispatch(setProgress(progress))}
      playing={playing}
    />
  );
}
  • playing并且progress都保存为 redux 状态。

添加注释按钮

export function AddNoteButton() {
  const [visible, setVisible] = useState(false);
  const [start, setStart] = useState();
  const progress = useSelector(selectProgress);
  const dispatch = useDispatch();

  const showModal = () => {
    dispatch(setPlaying(false)); // dispatches action to stop playing player
    setStart(progress.playedSeconds);
    setVisible(true);
  };

  return (
    <>
      <Button onClick={showModal} />
      <Modal title="Add Note" visible={visible}>
        <div>{pauseStart}</div>
      </Modal>
    </>
  );
}

问题

当用户单击 AddNoteButton 中的按钮时，会发生以下情况：

  1. 它分派setPlaying(false)，将playingredux 中的状态更改为 false
  2. 使用播放器的当前时间戳显示模式
  3. 看到 的更新值后playing，ReactPlayer停止运行

请注意，在 2、3 之间有一小段时间玩家没有停下来。因此，我们看到的是在创建函数时从 redux 状态检索到的注释中的时间戳showModal，这不一定是实际ReactPlayer停止的位置（它总是更早）理想情况下，我们希望在它player.current.getCurrentTime() 之后创建一个注释已经停止。有没有办法继续实现这一目标？任何帮助表示赞赏！

4

1 回答 1

0

你能把showModal调用放在onPausereact-player 的回调属性中吗？我认为这会颠倒第 2 步和第 3 步的顺序，因此模式会在播放器暂停后显示，并希望具有正确的时间戳

于 2020-07-02T06:43:46.557 回答