Benutzerdefinierte HTML5-Video-Steuerelemente: So zeigen Sie den aktuellen Frame des Videos beim Ziehen der Suchleiste an

Question

Ich habe benutzerdefinierte Steuerelemente für ein Video.

See codepen.

Großen. Es funktioniert relativ gut. Allerdings vermisse ich eine Funktionalität. Wenn das Video pausiert ist und ich den Schieberegler auf die Suchleiste ziehe, werden die Videobilder erst dann in Echtzeit aktualisiert, wenn Sie den Schieberegler nach unten gedrückt haben (mousedown).

Wie Sie sehen können here, mit der nativen HTML5-Video-Funktionalität ist es so gemacht: Während Sie die Leiste ziehen, wird das Video auf den aktuellen Rahmen aktualisiert, auf dem sich der Cursor befindet. Für mich wäre das ziemlich wichtig.

Also, wie könnte ich das geschehen lassen? Das Problem liegt in der Art von .addEventListener ("change"), oder?

<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

habe ich es durch eine Änderung der .addEventListener („change“) zu .addEventListener („Input“) getan, aber vielleicht könnte diese Frage für jemanden nützlich sein, so habe ich es nicht löschen.