how to add a code for farward/backward using numbers on a video

Question

this code is for left arrow and right arrow to farward/backward the video :

var theVideo = document.getElementById("cspd_video");
  document.onkeydown = function(event) {
      switch (event.keyCode) {
         case 37:
              event.preventDefault();
              
              vid_currentTime = theVideo.currentTime;
              theVideo.currentTime = vid_currentTime - 5;
            break;
         
         case 39:
              event.preventDefault();
              
              vid_currentTime = theVideo.currentTime;
              theVideo.currentTime = vid_currentTime + 5;
            break;
         
      }
  };

i want and try to farward the video by numbers on the keyboard (1 2 3 4 5 6 7 8 9) i try this :

case 1:
              event.preventDefault();
              
              vid_currentTime = theVideo.currentTime;
              theVideo.currentTime = vid_currentTime + 30;
            break;

but did not works .

how to do this ? you can see this feature on youtube video , clicking on numbers farward/backward the time of the video on youtube.

Answer 1

This can be done by assigning each number key (1-9) to a percentage duration of the video. When a number key is pressed, it will multiply the videos duration by that percentage, and assign that time to the video's current time.

I also noticed you used case 1, but the keycodes for the numbers on your keyboard are not 0 through 9, but rather 48 through 57 for the primary number keys and 96 through 105 for the numpad.

If you want to use the number keys to skip forward or backward from the current position by a certain amount, then instead of using theVideo.duration * 0.1; just use vid_currentTime + 10;

var theVideo = document.getElementById("cspd_video");

document.onkeydown = function(event) {
    let vid_currentTime = theVideo.currentTime;
    switch (event.keyCode) {
        case 37:
            event.preventDefault();
            theVideo.currentTime = vid_currentTime - 5;
            break;
        
        case 39:
            event.preventDefault();
            theVideo.currentTime = vid_currentTime + 5;
            break;
        
        case 49: // number 1
            event.preventDefault();
            theVideo.currentTime = theVideo.duration * 0.1; // 10% of video
            break;
        
        case 50: // number 2
            event.preventDefault();
            theVideo.currentTime = theVideo.duration * 0.2; // 20% of video
            break;
        
        case 51: // number 3
            event.preventDefault();
            theVideo.currentTime = theVideo.duration * 0.3; // etc.
            break;
        
        case 52: // number 4
            event.preventDefault();
            theVideo.currentTime = theVideo.duration * 0.4;
            break;
        
        case 53: // number 5
            event.preventDefault();
            theVideo.currentTime = theVideo.duration * 0.5;
            break;
        
        case 54: // number 6
            event.preventDefault();
            theVideo.currentTime = theVideo.duration * 0.6;
            break;
        
        case 55: // number 7
            event.preventDefault();
            theVideo.currentTime = theVideo.duration * 0.7;
            break;
        
        case 56: // number 8
            event.preventDefault();
            theVideo.currentTime = theVideo.duration * 0.8;
            break;
        
        case 57: // number 9
            event.preventDefault();
            theVideo.currentTime = theVideo.duration * 0.9;
            break;
    }
};