How to change video playing speed using JavaScript ?

How to change video playing speed using JavaScript ?

Last Updated : 18 Apr, 2025

In this article, we will see how we can change the playback speed of videos embedded in an HTML document using an HTML5 video tag.

We can set the new playing speed using the playbackRate attribute. It has the following syntax.

Syntax:

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

We can also set the default playing speed using the defaultPlaybackRate attribute. It has the following syntax.

Syntax:

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

Example: This example shows changing of playback speed using JavaScript.

HTML

<!DOCTYPE html>
<html>
<head>
    <style>
body {
    text-align: center;
    margin-top: 2%;
}
h1 {
    color: green;
}
p {
    margin-top: 2%;
}
button {
    margin-right: 20px;
}
</style>
</head>
<body>
    <h1>GeeksforGeeks</h1>

    <video width="890" height="500" controls loop>
        <source src="sample.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>

    <p>
        <button onclick="increase()">Increase Speed</button>
        <button onclick="decrease()">Decrease Speed</button>
    </p>
    <script>
    let video = document.querySelector('video');
    video.defaultPlaybackRate = 0.5
    video.load();
    function increase() {
        video.playbackRate += 1;
    }
    function decrease() {
        if (video.playbackRate > 1)
            video.playbackRate -= 1;
    }
</script>
</body>
</html>

Output:

How to change video playing speed using JavaScript ?

C

chetankhanna767

Improve

Article Tags :

Similar Reads

How to slide down the page after video ends using JavaScript ?

Given a web page, the task is to initiate the slider only after the video ends with JavaScript.SyntaxIn HTML:<video onended="myScript">In JavaScript:1. Using custom function:video.onended=function(){myScript};2. Using the addEventListener() method:video.addEventListener("ended", myScript);Algo

How to Detect Network Speed using JavaScript?

Network speed detection in JavaScript involves measuring the time it takes to download a known file or resource and calculating the download speed. To calculate the speed of the network a file of known size is chosen from a server to download. The time taken to start and complete the download is rec

Custom Video Player using HTML, CSS and JavaScript

In this article, we are going to implement a Custom Video Player using HTML CSS JavaScript. We will be using HTML to structure our project, CSS for designing purpose and JavaScript will be used to provide the required functionality.Preview of final Output: Let us have a look at how the final output

How to play/pause video using jQuery ?

To play or pause a video using jQuery, select the video element and use the play() method to play it and the pause() method to pause it. Toggle between these methods based on the video's current state to control playback interactively.Method 1: Using trigger() method: The trigger() method is used to

How to Configure Mouse Wheel Speed Across Browsers using JavaScript ?

The mouse wheel's scrolling speed varies with the choice of the web browser, even the DOM events and methods to change the scrolling speed are not the same. To provide zoom and animation on a web page, it is generally required to configure mouse speed. The speed of the wheel can be controlled by nor