Forward and backward HTML5 video player with left and right arrow key in JavaScript

You probably notice that you can backward and forward video on YouTube while watching it. You can do it just by pressing left and right arrow keys from your keyboard. In this post, I am going to tell you how you can add the same functionality to your HTML5 video player.

Here, I am going to show you how to forward and backward HTML5 video player with left and right arrow key in JavaScript.

Also, read:

• HTML5 Video/Audio player Volume Control With Key in JavaScript
• Play/Pause Button For HTML5 Video Using JavaScript

With an example, you can understand in a better way. So here, I am going to create an HTML5 video player and then write our own JavaScript code to forward and backward our video with arrow key pressed.

Let’s start…

At the very first, let’s create our HTML5 video player:

<video width="500" id="cspd_video" controls>
  <source src="myVideo.mp4" type="video/mp4">
</video>

Our Simple HTML5 video player is ready.

Now we are going to write our JavaScript code to forward and backward the video playing in our HTML5 video player just by pressing the left arrow key and the right arrow key.

Before I am going to describe below is the complete JavaScript code that will give the player forward and backward functionality:

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

In the above code, first, we take the HTML5 video element to a JavaScript variable by the ID so that we can work with it.

After that, we have used the onkeydown JavaScript event to perform our task when key pressed. Inside the event function, we have used the JavaScript switch case statement to detect which key pressed from the keyboard.

We are detecting our pressed key by its keyCode. Every key on the keyboard has a unique keyCode. Here we will use the left and right arrow key.

The right arrow key has the key code 37 which will forward the video. The left arrow key has the key code 39 which will be used to backward our HTML5 video.

Now we are going to do a trick to forward and backward our video. The currentTime property of HTML5 video DOM can retrieve the current play time.

In our code, we are taking the current play time using the currentTime property. After that, we add 5 seconds to it to forward 5 seconds when the right key pressed.

On the other hand, we subtract 5 seconds from the current play time of the video when left arrow key pressed to backward our video.

Now let’s test the complete code that you learn from this post on your browser.