Technical Specification: Free Online Video Frame Extractor

Overview

A high-performance, browser-based utility that allows users to upload local video files (MP4) and extract specific frames as high-resolution images. The application utilizes the HTML5 <video> API and the <canvas> element to perform frame capture entirely client-side, ensuring user privacy and zero data transfer.

Core Feature List

• Drag-and-Drop Upload: Intuitive upload zone for selecting local video files.
• Precision Seek Controls: Playback controls with frame-by-frame navigation (prev/next frame buttons) for millisecond accuracy.
• Snapshot Capture: A single click captures the current video frame and renders it into a preview thumbnail.
• Customizable Output: Option to select image format (JPG or PNG) and download the captured frame.
• Visual Timestamp Overlay: Automatically detects the current timestamp of the extracted frame for reference.
• Client-Side Processing: Zero server involvement; video data never leaves the user's browser.

UI Layout Design

• Header: Clean, centered title and a short descriptive subtitle. No branding or logos.
• Main Tool Area (Split-View):
  • Left/Top Pane: Video player with a standardized, professional control bar (play/pause, volume, seek bar, frame-step buttons).
  • Right/Bottom Pane: A "Captured Frames" gallery that populates as the user takes snapshots. Each item includes a thumbnail, the timestamp, and a download button.
• Empty State: A modern upload card with an icon and clear CTA text when no video is loaded.

Styling & Color Palette (Light Mode Only)

• Background: Crisp off-white (#f8fafc) for the main container, pure white (#ffffff) for cards.
• Primary Accent: Vibrant Indigo (#4f46e5) for active buttons and primary actions.
• Secondary Colors: Neutral Gray tones (#e2e8f0 for borders, #475569 for text) to maintain a professional, minimalist SaaS aesthetic.
• Typography: Sans-serif, system-safe fonts (Inter, system-ui) for high readability.
• Shadows: Soft, subtle drop shadows (shadow-sm or shadow-md from Tailwind CSS convention) to create depth without visual clutter.

Interaction Design

• Micro-interactions: Buttons will feature smooth transition effects on hover (color shift) and active states (scale down).
• Smooth Transitions: Captured images fade into the gallery area using CSS transitions.
• Modal Windows: All alerts (e.g., "File too large" or "Extraction successful") must be rendered as custom, absolute-positioned HTML modals. Browser native alert() or prompt() are strictly forbidden.

Technical Implementation Directives

• Architecture: Single-file HTML/CSS/JS architecture. Use CDN links for libraries like Tailwind CSS.
• State Management: Use standard JavaScript objects/variables for current video state.
• NO STORAGE: Forbidden from using localStorage, sessionStorage, or cookies to ensure compatibility with sandboxed iframes.
• Browser Compatibility: Use the HTML5 Video API currentTime property to seek and drawImage() on a canvas to extract frames.
• Responsiveness: Use Flexbox/Grid for a layout that stacks vertically on mobile and horizontally on desktop.
• Security: Ensure all external links use target="_blank" and rel="noopener noreferrer".