HTML5视频进度洗刷点击功能不能在镀铬

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; 
} 

请把你的第一个#progress选择上面在你的CSS，然后取下顶：0.2em;来自#buffer选择器。