🎬 Video-Control-JS

Video-Control-JS is a lightweight JavaScript utility that lets you control the playback speed of any HTML5 video element on any webpage.
It works instantly via a bookmarklet or a normal script import, with zero dependencies.

Perfect for:

• YouTube
• Google Drive videos
• Online courses
• Any website using <video> tags
• Works on desktop, Android, and iPhone browsers

---

🚀 Features

• ⚡ Increase or decrease video playback speed
• 🔁 Reset video speed to normal (1.0x)
• 🎥 Controls all video elements on the page
• 📌 One-click bookmarklet
• 📦 Clean script / CDN import
• ♻ Safe to inject multiple times
• 🧼 No UI, no tracking, no dependencies
• 🖱 Drag-and-drop UI for speed control
• 🔢 Preset speed buttons (0.5x, 1x, 1.25x… 10x)
• 🎚 Fine control slider (0.25x - 10x)
• 🌍 Mobile-friendly (touch support included)

---

📌 Usage

How to add bookmarklet on mobile

Android

1. Create a new bookmark (any page → ⋮ menu → Bookmark)
2. Edit the bookmark → Replace the URL with the bookmarklet code below

iPhone

1. Save any page as bookmark
2. Edit bookmark → Replace URL with the bookmarklet code below

1️⃣ Bookmarklet (One-Click Speed Control)

Create a new browser bookmark and paste this as the URL:

javascript:(function(){var s=document.createElement('script');s.src='https://cdn.jsdelivr.net/gh/Ishanoshada/Video-Control-JS@main/script.js?'+Date.now();document.body.appendChild(s);})();

Click the bookmark on any page with a video to enable speed controls.

---

2️⃣ CDN Script Import

Load directly from GitHub using jsDelivr:

<script src="https://cdn.jsdelivr.net/gh/Ishanoshada/Video-Control-JS@main/script.js"></script>

---

3️⃣ Local / Normal Script Import

Clone or download the repository and include:

<script src="./script.js"></script>

⚡ Cross-Origin Notes

Example Inline Bookmarklet for YouTube & Other Restricted Sites:

javascript:(function(){(function(){const e=document.getElementById("video-speed-controller");e&&e.remove();const t=document.getElementById("video-speed-icon");t&&t.remove();let n=!0;const o=document.createElement("div");o.id="video-speed-icon",o.innerHTML="%E2%9A%A1",o.style.cssText="position:fixed;bottom:20px;right:20px;width:50px;height:50px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-radius:50%;display:none;align-items:center;justify-content:center;font-size:24px;cursor:move;z-index:999998;box-shadow:0%204px%2012px%20rgba(0,0,0,.4);user-select:none;",o.onclick=e=>{!s&&r()};const%20i=document.createElement("div");i.id="video-speed-controller",i.style.cssText="position:fixed;top:20px;right:20px;background:rgba(0,0,0,.95);padding:15px;border-radius:12px;z-index:999999;min-width:320px;max-width:500px;border:2px%20solid%20#667eea;font-family:Arial;resize:both;overflow:auto";const%20d=document.createElement("div");d.style.cssText="display:flex;justify-content:space-between;align-items:center;cursor:move;margin-bottom:10px";const%20l=document.createElement("div");l.textContent="%E2%9A%A1%20Speed%20Control%20(0.25x%20-%2010x)",l.style.cssText="color:#fff;font-size:13px;font-weight:bold;flex:1";const%20a=document.createElement("button");a.textContent="%E2%88%92",a.style.cssText="background:#ff9800;color:#fff;border:none;width:25px;height:25px;border-radius:50%;cursor:pointer",a.onclick=e=>{e.stopPropagation(),c()};const%20u=document.createElement("button");u.textContent="%E2%9C%95",u.style.cssText="background:#f44336;color:#fff;border:none;width:25px;height:25px;border-radius:50%;cursor:pointer",u.onclick=e=>{e.stopPropagation(),i.remove(),o.remove()};d.append(l,a,u),i.appendChild(d);const%20m=document.createElement("div");m.style.cssText="color:#4caf50;font-size:22px;font-weight:bold;text-align:center;margin-bottom:10px",m.textContent="1.00x",i.appendChild(m);const%20p=document.createElement("input");p.type="range",p.min=".25",p.max="10",p.step=".05",p.value="1",p.style.width="100%",p.oninput=function(){const%20e=parseFloat(this.value);m.textContent=e.toFixed(2)+"x",document.querySelectorAll("video").forEach(t=>t.playbackRate=e)},i.appendChild(p);const%20g=[.5,1,1.25,1.5,1.75,2,2.5,3,4,5,6,7,8,10],v=document.createElement("div");v.style.cssText="display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:10px",g.forEach(e=>{const%20t=document.createElement("button");t.textContent=e+"x",t.style.cssText="background:#667eea;color:#fff;border:none;padding:8px;border-radius:6px;cursor:pointer;font-weight:bold",t.onclick=()=>{document.querySelectorAll("video").forEach(t=>t.playbackRate=e),p.value=e,m.textContent=e.toFixed(2)+"x"},v.appendChild(t)}),i.appendChild(v);const%20f=document.createElement("button");f.textContent="%E2%86%BA%20Reset%20to%201x",f.style.cssText="margin-top:10px;width:100%;background:#ff9800;color:#fff;border:none;padding:8px;border-radius:6px;cursor:pointer;font-weight:bold",f.onclick=()=>{p.value=1,m.textContent="1.00x",document.querySelectorAll("video").forEach(e=>e.playbackRate=1)},i.appendChild(f);function%20c(){i.style.display="none",o.style.display="flex",n=!1}function%20r(){i.style.display="block",o.style.display="none",n=!0}let%20s=!1,h,x,y,b;d.onmousedown=e=>{e.target.tagName!=="BUTTON"&&(x=e.clientX-i.offsetLeft,y=e.clientY-i.offsetTop,s=!0)},document.onmousemove=e=>{s&&(e.preventDefault(),h=e.clientX-x,b=e.clientY-y,i.style.left=h+"px",i.style.top=b+"px",i.style.right="auto")},document.onmouseup=()=>{s=!1};let%20k=!1;o.onmousedown=e=>{k=!1,x=e.clientX-o.offsetLeft,y=e.clientY-o.offsetTop},document.addEventListener("mousemove",e=>{1===e.buttons&&"flex"===o.style.display&&(k=!0,e.preventDefault(),h=e.clientX-x,b=e.clientY-y,o.style.left=h+"px",o.style.top=b+"px",o.style.right="auto",o.style.bottom="auto")}),document.addEventListener("mouseup",()=>setTimeout(()=>k=!1,100)),document.body.append(i,o),console.log("%E2%9A%A1%20Video%20Speed%20Controller%200.25x%E2%80%9310x%20loaded")})()})();

---

Speed changes apply to all active video elements on the page.

---

📂 Repository Structure

Video-Control-JS/
├── script.js        # Core video speed control logic
├── bookmarklet.js   # Bookmarklet loader
├── README.md

---

🧠 How It Works

• Detects all <video> elements on the page
• Modifies video.playbackRate dynamically
• Prevents duplicate loading using a global flag
• Designed to be simple, fast, and unobtrusive
• Supports drag-and-drop of the controller panel
• Provides preset speed buttons and slider for fine adjustments
• Works on mobile devices with touch events

---

🌍 Browser Compatibility

• Chrome (Desktop & Android)
• Firefox (Desktop & Android)
• Safari (Desktop & iOS)
• Edge & Brave
• Any modern browser supporting HTML5 video

---

⚠️ Notes & Limitations

• Some sandboxed or DRM-protected sites may block script injection
• Videos inside cross-origin iframes may not be accessible
• External script imports may fail on CORS-restricted sites
• Inline bookmarklet is recommended for maximum compatibility
• Works on desktop, Android, and iPhone
• Speed changes apply to all active video elements on the page

---

⭐ Support & Contributions

If this project helps you:

• ⭐ Star the repository
• 🍴 Fork it
• 🚀 Submit improvements or features
• 📝 Report issues or suggest new features

---

Made with ❤️ by Ishan Oshada