TL;DR
VAM Seek is a lightweight JavaScript library that replaces a linear seek bar with a 2D thumbnail grid generated entirely in the browser. It extracts frames via the Canvas API, caches them in memory, and aims to eliminate server-side thumbnail processing and storage.
What happened
A new open-source project called VAM Seek provides a compact (~15KB) client-side library for visual video navigation. Instead of pre-generating thumbnails on a server, VAM Seek builds a two-dimensional grid of frame previews by extracting frames inside the user's browser using a hidden HTMLVideoElement and the Canvas API. The library ships as a single distributable file and includes examples for vanilla JavaScript, React, and Vue. It implements an LRU in-memory cache (default 200 frames), a VAM-based timestamp calculation for smooth X-continuous marker movement, and requestAnimationFrame-driven marker animation at 60fps. The repository also contains a demo backend built with FastAPI and FFmpeg for development purposes, plus integration docs and keyboard shortcuts. The project is released under terms that allow free use for personal, educational, and research scenarios, while commercial use requires a paid license.
Why it matters
- Reduces infrastructure costs by avoiding server-side thumbnail generation and CDN bandwidth for preview images.
- Keeps video content local to the browser during frame extraction, which limits server-side exposure of source media.
- Offers a visual navigation alternative to blind scrubbing, potentially improving discoverability of scenes.
- Simple integration: library is available via CDN or npm and provides examples for common frameworks.
Key facts
- Library distributed as a single file (vam-seek.js) of roughly 15KB in the dist directory.
- Frame extraction is performed client-side using an offscreen/hidden video element and the Canvas API.
- Default LRU cache size is 200 frames; frames are stored in memory and removed when the page closes.
- Marker animation targets 60fps and uses requestAnimationFrame for smooth movement.
- Configurable grid: columns and seconds-per-cell parameters control layout and timestamp mapping.
- Provides a public API with methods such as seekTo, moveToCell, configure, and destroy.
- Includes integration examples for vanilla JS, React, and Vue; npm and CDN installation options are available.
- Repository contains a demo FastAPI backend (requires Python 3.9+ and FFmpeg) used for local testing.
- Browser compatibility notes list Chrome 80+, Firefox 75+, Safari 14+, Edge 80+, and mobile browsers.
What to watch next
- Adoption and integration at scale in production streaming platforms — not confirmed in the source
- Details and pricing of the commercial license for businesses — not confirmed in the source
- Performance and memory behavior on long-form or very high-resolution videos across mobile devices — not confirmed in the source
Quick glossary
- Canvas API: A browser API that allows scripts to draw and export rendered images; used here to capture video frames.
- LRU cache: A least-recently-used cache strategy that evicts the oldest unused items to limit memory usage.
- VAM algorithm: A timestamp calculation approach originating from VAM desktop tools for mapping 2D grid positions to video times.
- FFmpeg: A command-line toolset for processing video and audio; used in the repository's demo backend (not required for client-side use).
Reader FAQ
How do I add VAM Seek to a page?
Include the distributed script from the CDN or install via npm, then call VAMSeek.init with the target video element and a container for the grid.
Does the library upload my video to a server?
No. Frame extraction is performed in the browser and the project states that video data is not sent to any server.
What is the licensing model?
The project is free for personal, educational, and research use; commercial use requires a paid license.
Can I run the demo locally?
Yes. The repository includes a FastAPI demo backend; local setup requires Python 3.9+ and FFmpeg according to the docs.
VAM Seek – 2D Video Seek Marker demo-trimmed.mp4 A lightweight 2D video seek grid library for video streaming sites. Navigate videos visually with a thumbnail grid instead of a 1D…
Sources
- Show HN: VAM Seek – 2D video navigation grid, 15KB, zero server load
- seek to a point in html5 video – javascript
- How to Capture Video Thumbnails Using JavaScript
- Video.js Plugins
Related posts
- A Year of Work on the ALPM Project: 15 Months of Rust-based Package Tools
- Kodbox: Open-source web desktop with multi-cloud storage and web IDE
- Ferrite: Rust Markdown editor with native Mermaid diagram rendering