HTML5视频的自定义控件不起作用

Question

我正在自定义html和CSS中的视频。到目前为止，播放按钮有效，全屏模式也有效。但是，如果我尝试拖动滑块（“播放”按钮旁边的那个），则也意在更改视频中的位置。与“音量”按钮（“静音”按钮旁边）相同-如果我尝试滑动它，则无法使用。

我想知道我的代码有什么问题，因为我只是部分地遵循了一个教程，这就是他们用于教程的方式。

 <div id="video-container">
<!-- Video -->
<video id="video-container__video" width="640" height="365">
  <source src='_assets/media/big_buck_bunny.mp4' type='video/mp4'>
</video>
<!-- Video Controls -->
<div id="video-controls">
  <button type="button" id="video-controls__play-pause">Play</button>
  <input type="range" id="video-controls__seek-bar" value="0">
  <button type="button" id="video-controls__mute">Mute</button>
  <input type="range" id="video-controls__volume-bar" min="0" max="1" step="0.1" value="1">
  <button type="button" id="video-controls__full-screen">Full-Screen</button>
</div>

window.onload = function() {
//video
var video = document.getElementById("video-container__video");
//Buttons 
var playButton = document.getElementById("video-controls__play-pause");
var muteButton = document.getElementById("video-controls__mute");
var fullScreenButton = document.getElementById("video-controls__full-screen");

//sliders
var seekBar = document.getElementById("video-controls__seek-bar");
var volumeBar = document.getElementById("video-controls__volume-bar");

//event listener for the play and pause button

playButton.addEventListener("click", function() {
    if (video.paused == true) {
        video.play();

    //button text will change to Pause
    playButton.innerHTML = "Pause";
    } else {
    //pause the video

    video.pause();

    //button will update its text to play
    playButton.innerHTML = "Play";
    }
});

// Event listener for the full-screen button
fullScreenButton.addEventListener("click", function() {
    if (video.requestFullscreen) {
    video.requestFullscreen();
    } else if (video.mozRequestFullScreen) {
    video.mozRequestFullScreen(); // Firefox
    } else if (video.webkitRequestFullscreen) {
    video.webkitRequestFullscreen(); // Chrome and Safari
    }
});



//event listener for the change bar 
seekBar.addEventListener("change", function() {
    //calculate the new time 
    var time = video.duration * (seekBar.value / 100);

    //update the video time 
    video.currentTime = time;
});
//the change bar will move as the video plays
video.addEventListener("timeupdate", function() {
    //Calculate the slider value
    var value = (100 / video.duration) * video.currentTime;

    //Update the slider value
    seekBar.value = value;
})

//pause the video when the slider handle is being  dragged 
seekBar.addEventListener("mousedown", function() {
    video.pause();
});

//play the video when the 
seekBar.addEventListener("mouseup", function() {
    video.play();
});

volumeBar.addEventListener("change", function() {
    //update the video volume
    video.volume = volumeBar.value;
});

}