Skip to content

README.md

Latest commit

 

History

History
68 lines (49 loc) · 3.89 KB

README.md

File metadata and controls

68 lines (49 loc) · 3.89 KB
Raw

Flovid — Floating Video Widget

A zero-install, draggable browser widget that supercharges HTML5 video players with circular progress tracking, granular speed control, micro-navigation, live captions, and a sleek dark/light theme.

License

Quick Start

  1. Open any webpage with an HTML5 <video> element (YouTube, LMS, Coursera, etc.).
  2. Open DevTools Console (F12 → Console).
  3. Copy the entire contents of floVid.js and paste it into the console. Press Enter.
  4. The widget appears in the top-right corner. Drag it anywhere.

Features

Feature Description
Circular Progress Ring SVG ring with gradient stroke showing % completion and speed-adjusted remaining time
Rotary Scrubbing Click and drag on the circular progress ring in a clockwise/anti-clockwise motion to seek forward/backward
Dynamic Completion Time Dynamic "Completes at" estimation above the circle that adjusts in real-time to your playback speed
Hover Volume Scroll Hover over the widget and scroll your wheel up/down to adjust volume, featuring temporary circular feedback
Granular Speed Control Slider from 0.5x to 3.0x in 0.05x steps, with + / − nudge buttons
Micro-Navigation ⏪ / ⏩ ±5s seek buttons; click elapsed time to jump to any hh:mm:ss timestamp
Play / Pause Toggle Reliable play/pause button that works even when native video click is intercepted
Theme Toggle Instantly switch between dark and light modes
Window Fullscreen CSS fake-fullscreen keeps the widget visible; native fullscreen auto-hides it
Live Captions Web Speech API overlay (English) — experimental, Chrome only
SPA Adaptation Automatically detects and rebinds to new <video> elements when navigating between videos
CSP-Safe Built entirely with document.createElement / createElementNS — works on YouTube's Trusted Types CSP

How It Works

  • Injection: A single IIFE pasted into the console injects a fixed-position div (z-index: 99999) into document.body.
  • Video Binding: The script queries document.querySelector('video') and attaches event listeners. A MutationObserver watches for SPA video swaps and rebinds automatically.
  • Progress Math: (currentTime / duration) * 100 maps to SVG stroke-dashoffset on a 140×140px ring.
  • Speed-Aware Remaining Time: remainingWallClock / playbackRate gives real-world minutes left at the current speed.
  • DOM Construction: Every element is built programmatically via createEl() and createSvgEl() helpers to bypass Trusted Types restrictions.

File Overview

File Purpose
floVid.js The complete widget script (paste this into the console)
context.md Problem statement, goals, target users, and constraints
architecture.md Component breakdown, data flow, and system boundaries
decision.md Design decisions and trade-offs
prompts.md Iterative prompt history that shaped the project

Browser Support

  • Chrome (recommended) — full feature set including SpeechRecognition captions
  • Firefox / Edge / Safari — core widget works; captions may be limited

Known Limitations

  • Console-only: Must be re-pasted on every page reload (no extension persistence).
  • Captions require mic access: The Web Speech API captures ambient audio via the device microphone; it cannot tap the system audio stream directly due to browser security sandboxing.
  • Single video: Binds to the first <video> element found. On pages with multiple videos, it targets the primary player.

Author

Built by Varun Gautam — LinkedIn

Click the © 2026 Varun Gautam text inside the widget to visit the author's profile.

License

MIT © 2026 Varun Gautam