HTML onratechange Attribute

Last Updated : 19 Aug, 2022

The HTML onratechange Attribute is a event attribute which occurs if the playing speed of the audio/video is changed. The playbackRate property is used to sets or returns the current playback speed of an audio/video.

Syntax:

<element onratechange="myScript">

Attribute Value: This attribute contains single value script which works when onratechanged event attribute call. This attribute is supported by <audio> and <video> tags.

Example:

html

<!DOCTYPE html> 
<html> 
 
<head> 
    <title> 
        HTML onratechange Attribute 
    </title> 
</head> 
 
<body> 
    <center> 
        <h1 style="color:green"> 
        GeeksforGeks 
    </h1> 
        <h2>HTML onratechange Attribute</h2> 
 
        <video id="vidID"
            width="400" height="400"
            autoplay controls> 
            <source src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20190401140735/g4g2.mp4"
                    type="video/mp4"> 
        </video> 
        <br> 
 
        <button onclick="speed()" type="button"> 
        Slow motion 
    </button> 
 
        <script> 
            // Get the video element with id="myVideo" 
            var x = document.getElementById("vidID"); 
 
            function speed() { 
                x.playbackRate = 0.5; 
            } 
 
            x.addEventListener("ratechange", GFGfun); 
 
            function GFGfun() { 
                alert("Playing speed changed"); 
            } 
        </script> 
    </center> 
</body> 
 
</html>