我使用

Question

。我该怎么办？

我尝试过的是： I尝试使用requestvereframback与getCurrentTime()reactplayer

相结合来计算播放时钟时间：

：

： getDuration()

nove，这种方法是不可靠的。显示的时间不一致，有时运行太快，有时会跳回几秒钟。
background：

视频源是通过RTSP进行的以太网摄像头流。 I使用MediamTx将RTSP

转换为ReactPlayer中的播放。

I使用了ReactPlayer提供的

const currentPlayingClockTime = Date.now() - (duration - currentTime) * 1000

和

onPlayerReady
• 事件处理程序来计算和显示当前的播放时钟时间。关键是使用
onProgress
• 事件获取最后一个片段的时间戳，然后根据玩家的当前时间计算当前时钟时间。 相关代码： Hls.Events.FRAG_CHANGED 解释

const hlsInstance = videoPlayerRef.current?.getInternalPlayer("hls");

const onPlayerReady = () => {
  // Set the last fragment date and current time when the fragment changes.
  // This is used to calculate the clock time.
    hlsInstance &&
    hlsInstance?.on(
      Hls.Events.FRAG_CHANGED,
      (_evt: Events.FRAG_CHANGED, data: FragChangedData) => {
        if (data.frag.rawProgramDateTime === null) return;

        setVideoState({
          ...videoState,
          lastFragmentDate: new Date(data.frag.rawProgramDateTime).getTime(),
          lastFragmentCurrentTime: hlsPlayerInstance?.currentTime,
        });
      }
    );
};

const progressHandler = (state: OnProgressProps) => {
  const { lastFragmentDate, lastFragmentCurrentTime } = videoState;
  const currentClockTime =
    lastFragmentDate +
    (hlsPlayerInstance?.currentTime - lastFragmentCurrentTime) * 1000;

  setVideoState((prev) => ({
    ...prev,
    currentClockTime,
  }));
};

Answer 1

onPlayerReady

事件设置了一个侦听器，每当加载新片段时，该事件就会触发。它在视频状态中更新了

Hls.Events.FRAG_CHANGED

和

lastFragmentDate

。 lastFragmentCurrentTime

：此事件处理程序被定期称为视频播放。它根据

progressHandler

和玩家的当前时间来计算

currentClockTime

lastFragmentDate。然后，它使用新的currentClockTime

.

更新视频状态。

源：

设置HLS实例来处理事件

。 确定每个框架的RTC时间戳。