javascript - 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

进度条的 offsetWidth (this.offsetWidth) 导致零值，这会对确定视频 currentTime 的计算造成严重破坏。您应该向 #progress 和 #buffer 元素添加绝对位置属性:

#progress,
#buffer {
    position: absolute;
    left: 0;
    top: 0.2em;
}

请将其放在 css 中第一个 #progress 选择器上方，然后删除 top:0.2em;来自#buffer选择器。