JavaScript HTML DOM Events: seeked

The seeked event means the jump to a new media position has finished. It is often preceded by seeking (the start of the jump). On seeked you can update the UI, record the new time, or resume playback.
EXAMPLE
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>seeked – seeking completed</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;">Event: seeked</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">
            Ready. Use the video scrubber or click the buttons.
        </p>
        
        <div class="row" role="group" aria-label="Jump to time">
            <button type="button" data-t="0">Go to 0s</button>
            <button type="button" data-t="5">Go to 5s</button>
            <button type="button" data-t="10">Go to 10s</button>
        </div>
    </div>
    
    <script>
        (function(){
            var vid = document.getElementById("vid");
            var msg = document.getElementById("msg");
            var lastFrom = null;
            
            // seeking: start of the jump (remember where we came from)
            vid.addEventListener("seeking", function(){
                lastFrom = vid.currentTime; // position right before the jump
                msg.textContent = "Seeking… (from " + lastFrom.toFixed(1) + "s)";
            });
            
            // seeked: jump finished
            vid.addEventListener("seeked", function(){
                var to = vid.currentTime;
                var fromTxt = (lastFrom != null) ? lastFrom.toFixed(1) + "s" : "unknown";
                msg.textContent = "Seek completed: " + fromTxt + " → " + to.toFixed(1) + "s";
                lastFrom = null;
            });
            
            // informational: playing / pause
            vid.addEventListener("playing", function(){
                msg.textContent = "Playing… (at " + vid.currentTime.toFixed(1) + "s)";
            });
            vid.addEventListener("pause", function(){
                if (!vid.ended) msg.textContent = "Paused at " + vid.currentTime.toFixed(1) + "s";
            });
            vid.addEventListener("ended", function(){
                msg.textContent = "End of video.";
            });
            
            // Buttons for jumping to exact times
            document.querySelectorAll(".row [data-t]").forEach(function(btn){
                btn.addEventListener("click", function(){
                    var t = Number(btn.getAttribute("data-t"));
                    // If duration is unknown or shorter, clamp the time
                    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>
RESULT