HTML onratechange Attribute

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>

Output:

Supported Browsers:

Google Chrome 3
Edge 12
Internet Explorer 9
Firefox 3.5
Apple Safari 3.1
Opera 10.5

Article Tags :

HTML

Web Technologies

HTML-Attributes