javascript - HTML5 视频自定义控件 : How to show the current frame of the video while dragging the seekbar

Question

我有视频的自定义控件。

See codepen.

太棒了。它工作得比较好。但是，我错过了一个功能。当视频暂停并且我在搜索栏上拖动 slider 时，视频帧不会实时更新，只有在您“放下” slider (鼠标按下)之后。

如你所见here ，使用 native html5 视频功能，它是这样完成的:当您拖动栏时，视频会更新到光标所在的当前帧。对我来说，这非常重要。

那么，我该如何实现呢？问题在于 .addEventListener("change") 的性质，不是吗？

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

Answer 1

我通过将 .addEventListener("change") 更改为 .addEventListener("input") 来完成它，但也许这个问题可能对某人有帮助，所以我没有删除它。