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

【问题标题】：Why is HTML5 progress bar value jumping and lagging on update?为什么 HTML5 进度条值在更新时跳跃和滞后？
【发布时间】：2016-08-11 11:07:22
【问题描述】：

我使用 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 的原因）。

【问题讨论】：

你应该显示更多代码来解决这个问题..
我添加了元素本身。还有什么可以帮助解决的吗？

标签： javascript css html reactjs

【解决方案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>

【讨论】：