为什么HTML5进度条值在更新时跳跃和滞后?

Question

我使用html元素作为视频的进度指示器。当点击进度元素时，我试图将视频和进度元素更新到特定时间，例如用户在0:10标记处单击，视频/指示器相应地更新。我的onclick处理程序看起来像这样:

<progress
    onClick={e => {
        const percent = e.nativeEvent.offsetX / progressEl.offsetWidth;
        progressEl.value = percent * 100;
        videoEl.currentTime = percent * videoEl.duration;
    }}
    value="0"
    min="0"></progress>

这是可行的，除了进度指示值在用户点击之前跳跃到正确的位置。我在一个reactjs组件内这样做(这就是为什么我使用nativeEvent)。

Answer 1

明白了。视频加载的进度指示器的最大值被设置为视频的总时间，而不是100，所以我必须调整代码以考虑这个总数，以便确定正确的值。正确的代码应该是:

<progress
    onClick={e => {
        const percent = e.nativeEvent.offsetX / progressEl.offsetWidth;
        progressEl.value = percent * videoEl.duration;
        videoEl.currentTime = percent * videoEl.duration;
    }}
    value="0"
    min="0"></progress>