You are given a skeleton for a frame-by-frame browser media player. Implement a JavaScript controller that: - Jumps to any frame by index. - Starts and pauses autoplay at a configurable frames-per-second (FPS). - Exposes methods: play(), pause(), seek(frameIndex), setFPS(fps), currentFrame(), isPlaying(). - Uses setTimeout or setInterval correctly to schedule frames, handles timer drift, and prevents overlapping timers. - Encapsulates internal state via closures and cleans up timers/listeners to avoid memory leaks. Explain your design and time-scheduling strategy, compare setTimeout vs setInterval (and optionally requestAnimationFrame) for this use case, and describe how you would handle edge cases (seeking while playing, invalid indices, reaching the last frame, resuming after pause). Provide pseudocode or tests showing expected behavior.

Implement a JavaScript frame player controller evaluates requirements, assumptions, structured reasoning, trade-offs, and verification in a realistic interview setting. A strong answer states assumptions, handles edge cases, explains trade-offs, and shows how to validate the result clearly.

How do I approach Software Engineering Fundamentals interview questions?

Software Engineering Fundamentals questions require understanding of core concepts and practice. PracHub provides solutions with explanations to help you master software engineering fundamentals interviews.

What difficulty level is this interview question?

This is a medium difficulty Software Engineering Fundamentals question, commonly asked during Technical Screen rounds at Verkada.

What role is this question designed for?

This question is commonly asked for Software Engineer candidates at Verkada during technical interviews.

Implement a JavaScript frame player controller

Implement a frame-by-frame browser media controller with drift-proof scheduling

Context

You are given a skeleton for a frame-by-frame browser media player. Assume you have:

A renderFrame(index) callback that draws frame index onto the UI (e.g., a canvas or an image element).
A known total number of frames: frameCount.

Your job is to implement a JavaScript controller that manages playback precisely by frames.

Requirements

Implement a controller that:

Jumps to any frame by index.
Starts and pauses autoplay at a configurable frames-per-second (FPS).
Exposes methods:
- play()
- pause()
- seek(frameIndex)
- setFPS(fps)
- currentFrame()
- isPlaying()
Uses setTimeout or setInterval correctly to schedule frames, handles timer drift, and prevents overlapping timers.
Encapsulates internal state via closures and cleans up timers/listeners to avoid memory leaks.

Deliverables

A working design and explanation of your time-scheduling strategy.
A comparison of setTimeout vs setInterval (and optionally requestAnimationFrame) for this use case.
Pseudocode or tests showing expected behavior and edge cases.

Constraints & Assumptions

Preserve the scope, facts, inputs, and requested outputs from the prompt above.
If the prompt leaves a detail unspecified, state a reasonable assumption before relying on it.
Keep the answer interview-ready: concise enough to present, but concrete enough to implement or evaluate.

Clarifying Questions to Ask Guidance

Clarify the goal, inputs, constraints, stakeholders, and success criteria.
State assumptions before using them.
Keep the answer grounded in the prompt rather than adding outside facts.

What a Strong Answer Covers Guidance

A structured framing of the problem and constraints.
A concrete approach with trade-offs and edge cases.
A way to validate the answer and communicate the recommendation.

Follow-up Questions Guidance

What assumption is most important to validate first?
What could make the answer fail in practice?
How would you explain the result to a non-technical stakeholder?