Javascript 创建一个类似Seekbar的vimeo视频播放器（HTML5）

我尝试从头开始创建HTML5视频播放器。但我无法创建一个像vimeo（或youtube）一样滑动良好的seekbar

我所做的是在seekbar中添加了一个额外的div/span（突出显示总查看时间）。然后我添加了mousedown和mousemove事件。 当mousedown事件被调用时，我将var（Boolean）设为true。这是真的，我根据mousemove位置更改div/span的宽度

它可以工作，但没有响应。我无法无缝滑动它。所以我想知道如何构建像vimeo这样的响应性seekbar（youtube是一样的，但youtube播放器有一个点像一个范围滑块，但我不想要它）。我更喜欢没有任何框架软件或API的纯JavaScript

我的代码：

HTML

JavaScript

var video = document.querySelector("video");
var playButton = document.querySelector(".play");
var elapsed = document.querySelector(".elapsed");
var line = document.querySelector(".line");

var duration = video.duration;
var playing = false;
var mouseDown = false;

// the play/pause button
playButton.addEventListener("click", function() {
    if (playing) video.pause();
    else video.play();

    playing = !playing;
});

// click on the video to play/pause
video.addEventListener("click", function() {
    if (playing) video.pause();
    else video.play();

    playing = !playing;
});

// seekbar
line.addEventListener("mousedown", function(e) {
    // set current time according to mousedown position
    video.currentTime = Number(
        e.layerX / (line.clientWidth / 100) * (duration / 100)
    ).toFixed(1);
    // change the width of elapsed bar.
    elapsed.style.width = video.currentTime / (duration / 100) + "%";
    mouseDown = true;
});

line.addEventListener("mousemove", function(e) {
    if (mouseDown) {
        video.currentTime = Number(
            e.layerX / (line.clientWidth / 100) * (duration / 100)
        ).toFixed(1);
    }
});

line.addEventListener("mouseup", () => (mouseDown = false));

// to let the metadata loaded
var dt = setInterval(function() {
    if (video.readyState > 0) {
        duration = Number(video.duration).toFixed(2);
        clearTimeout(dt);
    }
}, 50);

// highgligh the amount of played time. via a elapse bar
setInterval(function() {
    elapsed.style.width = video.currentTime / (duration / 100) + "%";
}, 1000);

---

我正在根据mousemove更改当前时间

line.addEventListener("mousemove", function(e) {
    if (mouseDown) {
        video.currentTime = Number(
            e.layerX / (line.clientWidth / 100) * (duration / 100)
        ).toFixed(1);
    }
});

并将消失条的宽度保留为当前时间。但我每1秒读一次currentTime

setInterval(function() {
    elapsed.style.width = video.currentTime / (duration / 100) + "%";
}, 1000);

这就是为什么它没有反应。即使我快速滑动，消失条的宽度也只会在另一秒后移动

line.addEventListener("mousemove", function(e) {
    if (mouseDown) {
        video.currentTime = Number(
            e.layerX / (line.clientWidth / 100) * (duration / 100)
        ).toFixed(1);
    }
});

setInterval(function() {
    elapsed.style.width = video.currentTime / (duration / 100) + "%";
}, 1000);