How to slide down the page after video ends 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 slide down the page after video ends using JavaScript ?

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. Syntax In HTML: <video onended="myScript">In JavaScript: 1. Using custom function: video.onended=function(){myScript};2. Using the addEventListener() method: video.addEventListener("ended", myScript

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 get Camera Resolution using JavaScript ?

In this article, we will learn to find the maximum resolution supported by the camera. We need to request camera access from the user and once access is given we can check the resolution of the video stream and find out the resolution given by the camera. The .getUserMedia() method asks the user for

How to create a moving div using JavaScript ?

In this article, we will learn to create a moving HTML div using JavaScript. The div will move left to right using HTML, CSS, and JavaScript. Approach: We have to create an HTML div and add some CSS to the div using a glass ball. In CSS, we add some background-color to the body and give some height,

How to change the width of an iframe to 100% using JavaScript ?

In this article, we are given an HTML document containing an <iframe> element and the task is to change the width of the <iframe> element to 100% with the help of JavaScript. There are two methods to change the width of the iframe which are discussed below: Method 1: This method uses the

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 t

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

How to Play Video on Mouse Hover and Pause on Mouseout using JavaScript?

In this article, we learn how to play a video when the mouse hovers over it and how to stop it when the mouse is removed from the video element. Sometimes, there is a need for a video on websites to automatically start playing when the user keeps the mouse over it because it reduces the number of cl

How to make animated counter using JavaScript ?

Creating an animated counter with JavaScript is an easy way to make your website more interactive. It smoothly increases or decreases numbers, which is great for displaying stats or other dynamic content. You can easily customize the speed and timing using HTML, CSS, and JavaScript. Approach :Making