HTML5視頻自定義控件：如何在拖動搜索欄的同時顯示視頻的當前幀

Question

我有視頻的自定義控件。

See codepen.

很好。它工作得比較好。但是，我錯過了一個功能。當視頻暫停並拖動搜索欄上的滑塊時，視頻幀不會實時更新，只有在您將滑塊向下「放置」（mousedown）之後。

正如你所看到的here，使用原生html5視頻功能，它可以這樣做：當你拖動欄時，視頻更新到光標所在的當前幀。對我來說這將是非常重要的。

那麼，我怎麼能做到這一點？問題在於.addEventListener（「更改」）的性質，不是嗎？

<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

我把它通過改變閱讀進度（「變」）來閱讀進度（「輸入」）來完成，但也許這個問題可能是一個人，所以我沒有刪除它的幫助。