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) 的 offsetWidth 产生了一个零值，这对确定视频当前时间的计算造成了严重破坏。您应该为您的#progress 和#buffer 元素添加绝对位置属性：

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

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

HTML5 视频进度擦除点击功能在 chrome 中不起作用

HTML5 Video Progress Scrubbing click Function not working in chrome

javascript

google-chrome

html5-video