🎥 Video Speed Quadrant Control Extension

Control video playback speed by simply hovering over different corners of any video!

This extension allows you to dynamically change the playback speed of any HTML5 video by moving your mouse to specific quadrants of the video element. It also displays a small overlay showing the current speed.

---

🧠 Features

✅ Lock speed with Shift + Click
Double your efficiency by locking the speed at any corner using Shift + Click on the video. Click again with Shift to unlock.

✅ Overlay display
A minimal overlay shows the current speed, and whether it’s locked.

✅ Auto-reset
If not locked, the speed resets to 1.0x when the mouse leaves the video.

• ⚡ Change speed just by hovering over corners:
  • Top-Left: 1.25x
  • Top-Right: 1.5x
  • Bottom-Left: 1.75x
  • Bottom-Right: 2.0x
• 🪄 Real-time speed update as you move the mouse
• 🎯 Works on all videos (even dynamically loaded ones)
• 🧩 Minimal, lightweight JavaScript-only solution
• 🧾 Speed is displayed as an overlay on the video
• 🔁 Automatically resets to 1x when mouse leaves video

---

📦 How to Use

Option 1: As a Local Extension

1. Clone or download this repository.
2. Open Chrome or your preferred Chromium browser.
3. Navigate to chrome://extensions/.
4. Enable Developer Mode (top right).
5. Click "Load unpacked" and select the folder.
6. Visit any page with a video (e.g. YouTube), and hover on the video to test.

Usage

Hover your mouse over different quadrants of a video to change the speed.

• Press Shift + Click to lock the current speed.
• Press Shift + Click again to unlock.
• Move your mouse out of the video to reset speed to 1x (if not locked).

✅ This works on most websites with HTML5 <video> tags.

---

Option 2: As a Bookmarklet

If you'd like to run it without installing an extension:

1. Create a new bookmark in your browser.
2. Paste the minified code in the URL field (optional minified version available in /dist).
3. Open any page with a video and click the bookmark.

---

🛠️ Developer Guide

Code Structure

• content.js: Main logic that adds hover events and overlays to video elements.
• manifest.json: Chrome extension manifest file.
• Optional: icon.png, if you want to give it a custom icon.

---

🚀 Planned Features

• UI for configuring quadrant speed values
• Support for double-click quadrant selection
• Option to persist custom speed preferences

---

💡 Example

---

📜 License

MIT License – free for personal and commercial use.

---

🙌 Credits

Crafted with ❤️ using plain JavaScript.