How to Change HTML Video Playback Speed

We can create our own HTML video player where can control the playback speed.

First, we create the video tag as follows:

<video src='https://file-examples.com/wp-content/uploads/2017/04/file_example_MP4_640_3MG.mp4' controls></video>

We have the controls attribute so that we can see the playback controls.

Then we can add buttons to let us adjust the speed of the playback:

<video src='https://file-examples.com/wp-content/uploads/2017/04/file_example_MP4_640_3MG.mp4' controls></video>

<button id='1x'>
  1x
</button>
<button id='15x'>
  1.5x
</button>
<button id='2x'>
  2x
</button>

Now we can move onto the JavaScript portion of our code.

We can use event delegation to get the ID of the button that’s clicked and then set the playbackRate property of the video element accordingly:

const video = document.querySelector('video');
document.onclick = (e) => {
  if (e.target.id === '1x') {
    video.playbackRate = 1;
  }
  if (e.target.id === '15x') {
    video.playbackRate = 1.5;
  }
  if (e.target.id === '2x') {
    video.playbackRate = 2;
  }
}

We get the video element with document.querySelector and then we set the playbackRate property of the video according to the ID of the button that’s clicked according to the value of e.target.id.

Now we can create our own video player where we can adjust the playback speed of the video.