How to change video playing speed using JavaScript?

Javascript Web Development Front End Technology

In this article let us understand how to use an HTML5 video tag to alter the playing speed of videos that are embedded in an HTML document.

A number less than 1 slows down the video, a number greater than 1 accelerates the video, and then a number of 1 returns the video to its original pace. Also take note that playbackRate is a property and not an HTML attribute.

Although you wouldn't want to change the playback rate for every video site, you can do this if you think your visitors will prefer it. This only takes one HTML element setting!

PlaybackRate property allows us to change the playing speed. These are the syntax rules for it.

Syntax

let video = document.querySelector('video')
video.playbackRate = newPlaybackRate

By using the defaultPlaybackRate parameter, users can easily modify the default playing speed. It uses the syntax listed below.

Syntax

let video = document.querySelector('video')
video.defaultPlaybackRate = 4
video.load()

Example 1

<!DOCTYPE html>
<html>
<title>How to change video playing speed using JavaScript - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
   <style>
      body {
         text-align: center;
         margin-top: 5%;
      }
      h1 {
         color: rgb(3, 95, 121);
      }
      p {
         margin-top: 5%;
      }
      button {
         margin-right: 20px;
      }
   </style>
</head>
<body>
   <h1>TutorialsPoint Sample Video</h1><br>
   <video width="420" height="240" controls loop>
      <source src="https://www.tutorialspoint.com/videos/sample720.mp4" type="video/mp4">
      The video tag is incompatible with your browser.
   </video>
   <p>
      <button type="button" class="btn btn-primary" onclick="speedUp()"> Speed Up</button>
      <button type="button" class="btn btn-primary" onclick="speedDown()"> Speed Down</button>
   </p>
   <script>
      let video = document.querySelector('video');
      
      // Make the playing speed the default
      video.defaultPlaybackRate = 0.5
      
      // The video is loaded after setting
      video.load();
      function speedUp() {
         
         // The playback speed has been increased by 1
         video.playbackRate += 1;
      }
      function speedDown() {
         
         // The playback speed has been decreased by 1
         if (video.playbackRate > 1)
            video.playbackRate -= 1;
      }
   </script>
</body>
</html>

Example 2

The playback speed of the audio or video is set or returned through the playbackRate property.

The Values of the property

The Value	The Description
playbackspeed	Shows how quickly the audio or video is currently playing back. Type of situation values − A usual speed is 1.0. Half speed is 0.5. (slower) 2.0 is twice as fast (faster) Backwards is -1.0 and regular speed Half speed of backwards is -0.5.

The Value

The Description

playbackspeed

Shows how quickly the audio or video is currently playing back.

Type of situation values −

A usual speed is 1.0.
Half speed is 0.5. (slower)
2.0 is twice as fast (faster)
Backwards is -1.0 and regular speed
Half speed of backwards is -0.5.

playbackRate Property for HTML Audio/Video DOM

What is the speed of playback?

The media is played back at a defined rate according to the playbackRate property. With this, user controls for fast forward, slow motion, and other features are implemented. A value of 1.0 signifies standard speed and is calculated by multiplying the current rate by the usual playback rate.

What playback speed is perfect?

The majority of browsers pause audio outside of playback Rate limits of 0.5 and 4 result in the video playing without sound. You should keep the range between 0.5 and 4 for the majority of the applications.

<!DOCTYPE html>
<html>
<title>How to change video playing speed using JavaScript - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
   <style>
      body {
         text-align: center;
         margin-top: 5%;
      }
      h1 {
         color: rgb(3, 95, 121);
      }
      button {
         margin-top: 20px;
      }
   </style>
</head>
<body>
   <h1>TutorialsPoint Sample Video</h1><br>
   <video id="myVideo" width="420" height="240" controls>
      <source src="https://www.tutorialspoint.com/videos/sample720.mp4" type="video/mp4">
      HTML5 video is not compatible with your browser.
   </video>
   <br>
   <button type="button" class="btn btn-primary" onclick="getSpeed()" type="button">Get Frequency of playback</button>
   <button type="button" class="btn btn-primary" onclick="setSpeed()" type="button">Slow motion video</button><br>
   <script>
      let demoVideo = document.getElementById("myVideo");

      function getSpeed() {
         alert(demoVideo.playbackRate);
      }
      function setSpeed() {
         demoVideo.playbackRate = 0.5;
      }
   </script>
</body>
</html>

You will see the below screen after clicking on “Get Frequency of playback” button.

Further, you will see he below screen after clicking the “Slow motion video” button and then “Get Frequency of playback” button.

In Brief

In the example above, the variable (demoVideo in this case) was used to change the playing pace (or whatever else we desired to do). For example, simply enter demoVideo and change playbackRate to 2 to run at twice the pace. playbackRate equals 2.

The conclusion of all that. When you press "play," that video will start to play twice as quickly as usual. Do you prefer it to operate at half speed? Instead, set playbackRate to 0.5. Want it to resume operating at its regular speed? Basically, set playbackRate to 1.