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>

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

1 个答案: