JavaScript HTML DOM Events: ratechange

The ratechange event means the playback speed (playbackRate) has changed. Example: slow down to 0.5× or speed up to 2×. Useful for updating the UI, displaying the current speed, or persisting the user’s choice. Note: most browsers do not support negative speeds.

EXAMPLE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ratechange – playback speed change</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <style>
        body { 
            font-family: Arial, sans-serif;
            padding: 16px;
        }
        
        .box { 
            max-width: 640px;
            margin: 0 auto;
        }
        
        video {
            width: 100%;
            height: auto;
            background: #000;
            border-radius: 8px;
        }
        
        .row { 
            display: flex;
            gap: 8px;
            margin: 10px 0;
            flex-wrap: wrap;
        }
        
        button { 
            padding: 6px 12px;
            border: 1px solid #ccc;
            border-radius: 6px;
            cursor: pointer;
        }
        
        button:disabled { 
            opacity: 0.6;
            cursor: not-allowed;
        }
        
        .status { 
            margin: 8px 0;
            font-size: 14px;
        }
        select {
            padding: 6px 8px;
            border: 1px solid #ccc;
            border-radius: 6px;
            background: #fff;
        }
    </style>
</head>
<body>
    <div class="box">
        <h2 style="margin:0 0 8px 0;">Event: ratechange</h2>
        
        <video id="vid" controls preload="metadata">
            <source src="/video/website.mp4" type="video/mp4">Your browser does not support the video (MP4).
        </video>
        
        <p id="msg" class="status" aria-live="polite">Current speed: 1×</p>
        
        <div class="row" role="group" aria-label="Speed control">
            <button id="slowerBtn" type="button">Slower (0.5×)</button>
            <button id="fasterBtn" type="button">Faster (1.5×)</button>
            <button id="normalBtn" type="button">Normal (1×)</button>
            <label for="rateSel" style="display:inline-block; margin-left:8px;">Choose speed:</label>
            <select id="rateSel" aria-label="Select playback speed">
                <option value="0.25">0.25×</option>
                <option value="0.5">0.5×</option>
                <option value="0.75">0.75×</option>
                <option value="1" selected>1× (normal)</option>
                <option value="1.25">1.25×</option>
                <option value="1.5">1.5×</option>
                <option value="2">2×</option>
            </select>
        </div>
    </div>
    
    <script>
        (function(){
            var vid = document.getElementById("vid");
            var msg = document.getElementById("msg");
            var slowerBtn = document.getElementById("slowerBtn");
            var fasterBtn = document.getElementById("fasterBtn");
            var normalBtn = document.getElementById("normalBtn");
            var rateSel = document.getElementById("rateSel");
            
            function setRate(v){
                // Clamp to a sensible range (0.25–4)
                var val = Math.min(4, Math.max(0.25, v));
                vid.playbackRate = val;
            }
            
            // ratechange: fires after playbackRate changes
            vid.addEventListener("ratechange", function(){
                var r = vid.playbackRate;
                msg.textContent = "Current speed: " + r.toFixed(2) + "×";
                // Sync selector if the value exists in the list; otherwise keep custom
                var opt = Array.prototype.find.call(rateSel.options, function(o){ return Number(o.value) === r; });
                if (opt) rateSel.value = String(r);
            });
            
            // Buttons
            slowerBtn.addEventListener("click", function(){ setRate(0.5); });
            fasterBtn.addEventListener("click", function(){ setRate(1.5); });
            normalBtn.addEventListener("click", function(){ setRate(1); });
            
            // Selector
            rateSel.addEventListener("change", function(){
                setRate(Number(rateSel.value));
            });
            
            // Initial state
            vid.playbackRate = 1;
            msg.textContent = "Current speed: " + vid.playbackRate.toFixed(2) + "×";
        })();
    </script>
</body>
</html>

RESULT