JavaScript HTML DOM Dogodki: seeked

Dogodek seeked pomeni, da je premik na nov položaj v mediju zaključen. Pogosto ga spremlja seeking (začetek iskanja). Ob seeked lahko posodobiš UI, zabeležiš novi čas ali nadaljuješ predvajanje.

PRIMER

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>seeked – iskanje zaključeno</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;
        }
    </style>
</head>
<body>
    <div class="box">
        <h2 style="margin:0 0 8px 0;">Dogodek: seeked</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">
            Pripravljeno. Uporabi drsnik v kontrolah videa ali klikni gumbe.
        </p>
        
        <div class="row" role="group" aria-label="Skok na čas">
            <button type="button" data-t="0">Na 0s</button>
            <button type="button" data-t="5">Na 5s</button>
            <button type="button" data-t="10">Na 10s</button>
        </div>
    </div>
    
    <script>
        (function(){
            var vid = document.getElementById("vid");
            var msg = document.getElementById("msg");
            var lastFrom = null;
            
            // seeking: začetek iskanja (zapomnimo si od kod)
            vid.addEventListener("seeking", function(){
                lastFrom = vid.currentTime; // pozicija tik pred skokom
                msg.textContent = "Iskanje… (od " + lastFrom.toFixed(1) + "s)";
            });
            
            // seeked: konec iskanja
            vid.addEventListener("seeked", function(){
                var to = vid.currentTime;
                var fromTxt = (lastFrom != null) ? lastFrom.toFixed(1) + "s" : "neznano";
                msg.textContent = "Iskanje zaključeno: " + fromTxt + " → " + to.toFixed(1) + "s";
                lastFrom = null;
            });
            
            // informativno: playing/pause
            vid.addEventListener("playing", function(){
                msg.textContent = "Predvajanje v teku… (pri " + vid.currentTime.toFixed(1) + "s)";
            });
            vid.addEventListener("pause", function(){
                if (!vid.ended) msg.textContent = "Ustavljeno pri " + vid.currentTime.toFixed(1) + "s";
            });
            vid.addEventListener("ended", function(){
                msg.textContent = "Konec videa.";
            });
            
            // Gumbi za skok na točno določen čas
            document.querySelectorAll(".row [data-t]").forEach(function(btn){
                btn.addEventListener("click", function(){
                    var t = Number(btn.getAttribute("data-t"));
                    // Če duration ni znan ali je krajši, omejimo čas
                    var to = (Number.isFinite(vid.duration) && vid.duration > 0) ? 
                        Math.min(t, vid.duration - 0.01) : t;
                    vid.currentTime = Math.max(0, to);
                });
            });
        })();
    </script>
</body>
</html>

REZULTAT