javascript - 为什么 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>