JavaScript HTML DOM Dogodki: ratechange

Dogodek ratechange pomeni, da se je spremenila hitrost predvajanja (playbackRate). Primer: upočasni na 0.5× ali pospeši na 2×. Uporaben je za posodobitev UI, prikaz trenutne hitrosti ali shranjevanje izbire uporabnika. Opomba: negativne hitrosti večina brskalnikov ne podpira.

PRIMER

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>ratechange – sprememba hitrosti predvajanja</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;">Dogodek: ratechange</h2>
        
        <video id="vid" controls preload="metadata">
            <source src="/video/website.mp4" type="video/mp4">Vaš brskalnik ne podpira videa (MP4).
        </video>
        
        <p id="msg" class="status" aria-live="polite">Trenutna hitrost: 1×</p>
        
        <div class="row" role="group" aria-label="Nadzor hitrosti">
            <button id="slowerBtn" type="button">Počasneje (0.5×)</button>
            <button id="fasterBtn" type="button">Hitreje (1.5×)</button>
            <button id="normalBtn" type="button">Navadno (1×)</button>
            <label for="rateSel" style="display:inline-block; margin-left:8px;">Izberi hitrost:</label>
            <select id="rateSel" aria-label="Izberi hitrost predvajanja">
                <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× (navadno)</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){
                // Omeji na razumen razpon (0.25–4)
                var val = Math.min(4, Math.max(0.25, v));
                vid.playbackRate = val;
            }
            
            // ratechange: sproži se po spremembi playbackRate
            vid.addEventListener("ratechange", function(){
                var r = vid.playbackRate;
                msg.textContent = "Trenutna hitrost: " + r.toFixed(2) + "×";
                // Uskladi izbirnik, če je vrednost v seznamu; če ne, pusti custom
                var opt = Array.prototype.find.call(rateSel.options, function(o){ return Number(o.value) === r; });
                if (opt) rateSel.value = String(r);
            });
            
            // Gumbi
            slowerBtn.addEventListener("click", function(){ setRate(0.5); });
            fasterBtn.addEventListener("click", function(){ setRate(1.5); });
            normalBtn.addEventListener("click", function(){ setRate(1); });
            
            // Izbirnik
            rateSel.addEventListener("change", function(){
                setRate(Number(rateSel.value));
            });
            
            // Začetno stanje
            vid.playbackRate = 1;
            msg.textContent = "Trenutna hitrost: " + vid.playbackRate.toFixed(2) + "×";
        })();
    </script>
</body>
</html>

REZULTAT