Kontrol khusus video HTML5: Cara menampilkan bingkai video saat ini sambil menyeret bilah pencarian

Saya memiliki kontrol khusus untuk video.

Lihat codepen.

Besar. Ini bekerja dengan relatif baik. Namun, saya kehilangan satu fungsi. Saat video dijeda dan saya menyeret penggeser di bilah pencarian, bingkai video tidak diperbarui secara real-time, hanya setelah Anda "meletakkan" penggeser ke bawah (mousedown).

Seperti yang Anda lihat di sini, dengan fungsi video html5 asli, semuanya sudah selesai seperti itu: saat Anda menyeret bilah, video diperbarui ke bingkai saat kursor Anda berada. Bagi saya ini akan menjadi hal yang cukup penting.

Jadi, bagaimana saya bisa mewujudkannya? Masalahnya terletak pada sifat .addEventListener("change"), bukan?

<div class="row">
  <div class="col-sm-4" id="video-container">
        <!-- Video -->
        <video id="video" muted>
          <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
          <p>
            Your browser doesn't support HTML5 video.
          </p>
        </video>
        <!-- Video Controls -->
        <div id="video-controls">
            <button type="button" id="play-pause" class="play"><img src="https://storage.googleapis.com/material-icons/external-assets/v4/icons/svg/ic_play_arrow_white_24px.svg"></button>
            <input type="range" id="seek-bar" value="0">
            <button type="button" id="full-screen"><img src=https://storage.googleapis.com/material-icons/external-assets/v4/icons/svg/ic_fullscreen_white_24px.svg></button>
        </div>
    </div>
</div>


<script type="text/javascript">
window.onload = function() {

    // Video
    var video = document.getElementById("video");

    // Buttons
    var playButton = document.getElementById("play-pause");
    var fullScreenButton = document.getElementById("full-screen");

    // Sliders
    var seekBar = document.getElementById("seek-bar");

    // Event listener for the play/pause button
    playButton.addEventListener("click", function() {
        if (video.paused == true) {
            // Play the video
            video.play();

            // Update the button text to 'Pause'
            $('img', playButton).attr("src","https://storage.googleapis.com/material-icons/external-assets/v4/icons/svg/ic_pause_white_24px.svg");
        } else {
            // Pause the video
            video.pause();

            // Update the button text to 'Play'
            $('img', playButton).attr("src","https://storage.googleapis.com/material-icons/external-assets/v4/icons/svg/ic_play_arrow_white_24px.svg");
        }
    });




    // 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 seek bar
    seekBar.addEventListener("change", function() {
        // Calculate the new time
        var time = video.duration * (seekBar.value / 100);

        // Update the video time
        video.currentTime = time;
    });


    // Update the seek bar 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 seek handle is being dragged
    seekBar.addEventListener("mousedown", function() {
        video.pause();
    });
  $('#video-controls').width($('video').width());
  $('#seek-bar').width($('video').width() -105);
}
</script>