HTML5视频进度清理单击功能在chrome中不起作用

Question

我已添加此点击功能，以更改点击视频进度条的时间。

这在Chrome中有效，直到我设置了进度条 - 现在它只适用于Firefox。因此缓冲条不会填充在Firefox中。

http://nathanworking.github.io/html-video-page/

// Update video based on click
function seek(e) {
    var percent = e.offsetX / this.offsetWidth;
    video.currentTime = percent * video.duration;
    progress.value = percent / 100;
    // Update the button icon to 'Pause'
    playButton.className = "pause-button";
}
  progress.addEventListener("click", seek);

还有其他更新方法吗？

Answer 1

进度条的偏移宽度（this.offsetWidth）导致零值，这会严重破坏计算以确定视频的当前时间。您应该为#progress和#buffer元素添加绝对位置属性：

Interventi.first.clientis.count

请将它放在你的第一个#progress选择器上方，然后删除top：0.2em;来自#buffer选择器。