The HTML onratechange attribute is an event handler used to specify a script that will run when the playback speed (playback rate) of an <audio> or <video> element changes.
Definition and Usage
➔ This happens when a user switches to slow-motion or fast-forward mode.
➔ This occurs when the user changes the playbackrate property of a media element either through a media control or programmatically.
Syntax
//In HTML
<video controls onratechange="myFunction()" id="sample">
<source src="myvideo.mp4" type="video/mp4">
</video>
//In javascript
document.getElementById("sample").onratechange=function() {myFunction();};
//OR
document.getElementById("sample").addEventListener("ratechange", myFunction);
//OR
document.getElementById("sample").addEventListener("ratechange", (event) => {
myFunction();
});
Example
<html>
<head>
<title>HTML onratechange attribute example</title>
</head>
<body>
<h3>HTML onratechange attribute example</h3>
<p>Set the src correctly and change the playback speed to faster or slower to trigger the event.</p>
<!-- "https://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/rabbit320.mp4" -->
<video controls onratechange="myFunction()" id="sample">
<source src="myvideo.mp4" type="video/mp4">
This browser does not support the video tag.
</video>
<script>
//In javascript
//document.getElementById("sample").onratechange=function() {myFunction();};
//OR
//document.getElementById("sample").addEventListener("ratechange", myFunction);
function myFunction() {
alert("The video playback rate has changed.");
}
</script>
</body>
</html>
Applies to
This attribute can be used on the following element.
| Attribute | Element |
|---|---|
| onratechange | <audio>, <video> |