onratechange

The onratechange event in HTML is triggered when the playback rate of an audio or video element is modified, enabling developers to react to changes in playback speed.

onratechange event

The onratechange event in HTML is fired when the playback rate of a media element, like <audio> or <video>, is adjusted. This lets developers perform actions or update the UI in response to the change in playback speed.

Syntax

In HTML

index.html

<element onratechange ="myScript">

In JS

script.js

object.onratechange  = function(){myScript};

In JavaScript, the `addEventListener()` function is used.

script.js

object.addEventListener("ratechange ", myScript);

Example

::event-onratechange ::

index.html

<!DOCTYPE html> 
<html> 
<body> 
<h1>HTML DOM Events</h1>
<h2>The onratechange Event</h2>

<p>Assign an "onratechange" event to a video element.</p>
<p>Use the playbackRate property to change the speed of the video:</p>

<video id="myVideo" width="320" height="240" autoplay controls onratechange="myFunction()">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video><br>

<button onclick="setPlaySpeed()" type="button">Set video to be play in slow motion</button>

<p id="demo"></p>

<script>
// Get the video element:
const video = document.getElementById("myVideo");

// Set the playback speed to 0.3 (slow motion)
function setPlaySpeed() { 
  video.playbackRate = 0.3;
} 

// Alert some text when the playing speed of the video is changed
function myFunction() { 
  document.getElementById("demo").innerHTML = "The playing speed of the video was changed.";
}
</script> 

</body> 
</html>

Values

<script>
- The name of the function to run when the event occurs.

Conclusion

The onratechange event allows developers to react to changes in the playback speed of media elements like <audio> and <video>. By using this event, you can perform actions or update the UI when the playback rate is modified. This enhances interactivity and control over media playback.

onprogress

The onprogress event in HTML takes place while resources are loading, providing updates on the progress of activities like downloading or uploading.

onseeked

The onseeked event in HTML is triggered when the playback position of a media element has been updated, enabling scripts to take action once the seeking process is finished.