HTML | DOM onratechange Event

The DOM onratechange event 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.

Supported Tags:

<audio>
<video>

Syntax:

In HTML:

<element onratechange="myScript">

In JavaScript:

object.onratechange = function(){myScript};

In JavaScript, using the addEventListener() method:

object.addEventListener("ratechange", myScript);

Example: Using the addEventListener() method

HTML

<!DOCTYPE html>

<html>

<head>

    <title>

        HTML DOM onratechange Event

    </title>

</head>
 
<body>

    <h1 style="color:green">

        GeeksforGeks

    </h1>

    <h2>HTML DOM onratechange Event</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"

        let x = document.getElementById("vidID");

        function speed() {

            x.playbackRate = 0.5;

        }

        x.addEventListener("ratechange", GFGfun);

        function GFGfun() {

            alert("Playing speed changed");

        }

    </script>

</body>
 
</html>

Output:

Supported Browsers: The browsers supported by DOM onratechange Event are listed below:

Google Chrome 3.0
Edge 12.0
Internet Explorer 9.0
Firefox 3.5
Apple Safari 3.1
Opera 10.5

Article Tags :

HTML

Web Technologies

HTML-DOM

Web technologies