Time-lapse Viewer Frontend: Build a Frame-Scrubbing Time-Lapse Player Component

Question

## Problem

Build a browser-based time-lapse viewer. Given an ordered array of image URLs, render a player that lets the user scrub through frames via a range slider, auto-play at a configurable FPS, and jump to the first/last frame.

```js
// Vanilla JS / Web Components
class TimeLapseViewer extends HTMLElement {
  constructor() { super(); }

// Attributes: data-fps (default 10), data-frames (JSON array of URLs)
  connectedCallback() { ... }

play()  { ... }  // starts auto-advance at current FPS
  pause() { ... }
  seek(frameIndex) { ... }  // jump to specific frame
}
```

**Requirements:** Preload the next 5 frames ahead of the current position. Show current frame index and timestamp overlay. Slider updates in real time as frames advance.

## Follow-ups

1. How do you prevent memory leaks when preloaded Image objects are no longer needed?
2. How would you synchronize the slider position with auto-play without causing jank?
3. If frame URLs expire (signed S3 URLs), how would you refresh them without interrupting playback?
4. How would you test the seek function in a headless browser environment?

Time-lapse Viewer Frontend: Build a Frame-Scrubbing Time-Lapse Player Component

Question Details

Full Details

Topics

More from Verkada