HTML | DOM onratechange Event

HTML | DOM onratechange Event

Last Updated : 15 Jun, 2023

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

HTML | DOM onratechange Event

V

Vijay Sirra

Improve

Article Tags :

Similar Reads

HTML DOM onchange Event

The HTML DOM onchange event occurs when the value of an element has been changed. It also works with radio buttons and checkboxes when the checked state has been changed. Note: This event is similar to the oninput event but the only difference is that the oninput event occurs immediately after the v

HTML | DOM onvolumechange Event

The onvolumechange event in HTML DOM occurs when the media volume is changed. Use volume property to set/return the volume of the media.This event is invoked by: Volume increasing/decreasingMuting/unmuting the media player Supported Tags <audio><video> Syntax: In HTML: <element onvolu

HTML DOM ondragenter Event

The HTML DOM ondragenter Event occurs when a draggable element enter in valid drop target. The ondragenter and ondragleave events can help the user to understand the dropzone. There are some events that are used and occurred in the different stages of a drag and drop operation: ondragstart: occurs w

HTML | DOM Storage Event

The Storage Event in HTML DOM is used to make change in the storage area in the context of another document. When there is modification in the storage area of the window, a storage event is sent to that window. Syntax: window.addEventListener("storage", script) Example: html <!DOCTYPE html>

HTML DOM onpaste Event

The HTML DOM onpaste event occurs when some content is pasted in an element. this event works on every element like in <p> element if contenteditable set is true then we can paste content in <p> element. The HTML DOM onpaste event is mostly used in input element type="text". Supported Ta

HTML | DOM onmessage Event

The onmessage Event in HTML DOM used when an object has received some message through an event source. The event object for onmessage Event supports the following schemes: data: It contains the actual message present inside it.origin: It contains the URL of the document that invoked the event.lastEv

HTML DOM onreset Event

The onreset event in HTML DOM occurs when a form is reset. Only the <form> tag is supported in this event. Supported Tags <form> Syntax: In HTML: <element onreset="myScript">In JavaScript: object.onreset = function(){myScript};In JavaScript, using the addEventListener() method: obj

HTML DOM ondragend Event

The HTML DOM ondragend event occurs when a draggable element finishes dragging. There are some events that are used and occurred in the different stages of a drag-and-drop operation: ondragstart: occurs when dragging of an element started.ondrag: occurs while an element is dragging.ondragend: occurs

HTML | DOM onwaiting event

The onwaiting event in HTML DOM occurs when the video stops for buffer the next frame. Supported tags: audio video Syntax: In HTML: <element onwaiting="Script"> In JavaScript: object.onwaiting = function(){Script}; In JavaScript, using the addEventListener() method: object.addEventListener("wa