HTML Audio/Video DOM ratechangeEvents

HTML Audio/Video DOM Reference Manual

Example

Change the video playback speed and pop up the changed speed:

// Get the <video> element with id="myVideo"
var vid = document.getElementById("myVideo");

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

// Add a ratechange event to <video> to execute a function when the video's playback speed changes. The function will pop up a prompt text message.
vid.onratechange = function() {myFunction()};

function myFunction() {
alert("Video playback speed has changed");
}

Try it Yourself »

Definition and Usage

The ratechange event is triggered when the playback speed of audio/video changes (for example, when the user switches to slow or fast playback mode).

This event is invoked through the audio/video'splaybackRateproperty, which is used to set or return the playback speed of the audio/video.


Browser Support

The numbers in the table indicate the version number of the first browser that supports this event.

Events
ratechange Yes 9.0 Yes Yes Yes


Syntax

In HTML:

<audio|video onratechange="myScript">Try it Yourself

In JavaScript:

audio|video.onratechange=function(){myScript};Try it Yourself

In JavaScript, using the addEventListener() method:

audio|video.addEventListener("ratechange", myScript);Try it Yourself

Note:Internet Explorer 8 and earlier IE versions do not supportaddEventListener()method.


Technical Details
Supported HTML tags: <audio> and <video>
Supported JavaScript objects: Audio, Video


HTML Audio/Video DOM Reference Manualother extensions