HTML Reference Manual

HTML Tag Reference

HTML Audio/Video DOM ratechange event

A ratechange event is triggered after changing the playback rate.

Online Example

Change the video playback speed and prompt that the speed has changed:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Audio/Video onratechange event usage-Basic Tutorial(oldtoolbag.com)</title>
</head>
<body>
<p>In this example, we used the HTML DOM to add the "onratechange" event to the video element. The playbackRate attribute is used to modify the video playback speed.</p>
<video id="myVideo" width="320" height="176" autoplay controls>
　　<source src="mov_bbb.mp4" type="video/mp4">
　　<source src="mov_bbb.ogg" type="video/ogg">
　　Your browser does not support HTML5　video tag.
</video>
<br>
<button onclick="setPlaySpeed()" type="button">Set video slow playback</button>
<script>
//　Get the <video> element with id="myVideo"
var vid = document.getElementById("myVideo");
//　Set the video playback speed to 0.3　(Slow)
function setPlaySpeed()　
{　
　　　　vid.playbackRate = 0.3;
}　
//　Add a ratechange event to <video>, and execute the function when the video playback speed changes, which will pop up a prompt text message.
vid.onratechange = function()　
{
　　　　myFunction()
};
function myFunction()　
{
　　　　alert("onratechange event triggered　-　The video playback speed has changed");
}
</script>　
</body>
</html>

Test to see ‹/›

Definition and usage

When changing audio/The playback speed of the video changes when (for example, when the user switches to slow motion or fast forward mode), a ratechange event occurs.
This event is triggered by the "Audio"/video object'splaybackRateProperty call, this property sets or returns the audio/The current playback speed of the video.

Browser Compatibility

IEFirefoxOperaChromeSafari

Syntax

In HTML:

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

In JavaScript:

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

In JavaScript, use the addEventListener() method:

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

Note: Internet Explorer 8 and earlier IE versions do not support addEventListener() Methods.

Technical Details

Supported HTML Tags:	<audio> and <video>
Supported JavaScript Objects:	Audio, Video

HTML Audio/Video DOM Reference Manual

HTML: <template> tag