无需登录 数据私有 本地保存

视频加速控制小书签 - 任意网页倍速播放

13
0
0
0

视频加速控制小书签

一键注入视频倍速控制面板,支持任意网页的 HTML5 视频。拖拽到书签栏,随时随地加速播放,最高支持 16倍 极速模式。

未检测到视频';}else{videos.forEach(function(vid,idx){var opt=document.createElement('option');opt.value=idx;var label=vid.src||vid.currentSrc||'视频 #'+(idx+1);try{var u=new URL(label,window.location.href);label=u.pathname.split('/').pop()||label;}catch(e){}if(label.length>35)label=label.substring(0,32)+'...';opt.textContent=(idx+1)+'. '+label;if(vid===VSC.currentVideo)opt.selected=true;vidSelect.appendChild(opt);});}}var presetBtns=document.querySelectorAll('#vsc-panel .vsc-preset-btn');presetBtns.forEach(function(btn){var btnSpeed=parseFloat(btn.getAttribute('data-speed'));if(Math.abs(btnSpeed-currentSpeed)<0.005){btn.classList.add('active');}else{btn.classList.remove('active');}});};VSC.createPanel=function(){var panel=document.createElement('div');panel.id='vsc-bookmarklet-panel';panel.innerHTML='
倍速控制器
1.00x
0.25x4x8x16x
';panel.style.cssText='position:fixed;z-index:2147483647;right:'+VSC.prefs.position.right+';bottom:'+VSC.prefs.position.bottom+';transition:opacity 0.2s;';document.body.appendChild(panel);VSC.panel=panel;var dragHandle=document.getElementById('vsc-drag-handle');dragHandle.addEventListener('mousedown',function(e){if(e.target.tagName==='BUTTON')return;VSC.dragging=true;var rect=panel.getBoundingClientRect();VSC.offsetX=e.clientX-rect.left;VSC.offsetY=e.clientY-rect.top;panel.style.transition='none';e.preventDefault();});dragHandle.addEventListener('touchstart',function(e){if(e.target.tagName==='BUTTON')return;VSC.dragging=true;var rect=panel.getBoundingClientRect();VSC.offsetX=e.touches[0].clientX-rect.left;VSC.offsetY=e.touches[0].clientY-rect.top;panel.style.transition='none';}, {passive:false});document.addEventListener('mousemove',function(e){if(!VSC.dragging)return;panel.style.right='auto';panel.style.bottom='auto';panel.style.left=(e.clientX-VSC.offsetX)+'px';panel.style.top=(e.clientY-VSC.offsetY)+'px';});document.addEventListener('touchmove',function(e){if(!VSC.dragging)return;panel.style.right='auto';panel.style.bottom='auto';panel.style.left=(e.touches[0].clientX-VSC.offsetX)+'px';panel.style.top=(e.touches[0].clientY-VSC.offsetY)+'px';}, {passive:false});document.addEventListener('mouseup',function(){if(VSC.dragging){VSC.dragging=false;panel.style.transition='opacity 0.2s';var rect=panel.getBoundingClientRect();VSC.prefs.position={right:(window.innerWidth-rect.right)+'px',bottom:(window.innerHeight-rect.bottom)+'px'};try{localStorage.setItem('vsc_prefs',JSON.stringify(VSC.prefs));}catch(e){}}});document.addEventListener('touchend',function(){if(VSC.dragging){VSC.dragging=false;panel.style.transition='opacity 0.2s';var rect=panel.getBoundingClientRect();VSC.prefs.position={right:(window.innerWidth-rect.right)+'px',bottom:(window.innerHeight-rect.bottom)+'px'};try{localStorage.setItem('vsc_prefs',JSON.stringify(VSC.prefs));}catch(e){}}});document.getElementById('vsc-speed-slider').addEventListener('input',function(){VSC.applySpeed(parseFloat(this.value));});document.getElementById('vsc-btn-min').addEventListener('click',function(){VSC.isMinimized=!VSC.isMinimized;var body=panel.querySelector('div>div');var children=body.children;for(var i=1;i 📌 拖拽我到书签栏 ← 视频倍速小书签
🎯 任意网页 ⚡ 0.25x~16x 🎨 暗色面板 📱 移动端适配 💾 记忆设置 🖱 可拖动
🎬 演示视频 — 点击右上测试按钮体验

三步上手

1
显示书签栏

Chrome/Edge按 Ctrl+Shift+B,Safari按 ⌘+Shift+B,或从浏览器设置中开启书签栏。

2
拖拽小书签

将上方紫色按钮直接拖到书签栏上,松开即可。看到"倍速控制器"书签出现即成功。

3
任意网页使用

打开任意含视频的网页,点击书签栏中的小书签,浮动控制面板即刻出现,随心调节倍速!

常见问题与知识点

Bookmarklet(小书签)是一种存储在浏览器书签中的微型JavaScript程序。与普通书签保存网址不同,小书签的"地址"是一段javascript:开头的代码。点击小书签时,浏览器会在当前页面执行这段代码。

安全性:本工具的小书签代码完全开源透明,仅在当前页面注入一个浮动的速度控制面板,不会收集任何数据、不会访问任何外部服务器、不会修改页面内容。所有代码都在您的浏览器本地运行,关闭页面后一切恢复原状。您可以在下方代码展示区查看完整源码。

本小书签控制的是网页中的HTML5 <video>标签。适用场景:

  • 直接使用HTML5播放器的网站:大多数学习平台、课程网站、自媒体站点、小型视频站。
  • 部分视频平台:如果平台底层使用标准video标签,则可以控制。
  • ⚠️ YouTube / B站等大型平台:这些平台使用自定义播放器(非标准video标签),小书签可能无法直接控制。但页面中如果有其他video元素(如预览、广告),仍可被控制。
  • 💡 提示:对于YouTube,可使用其自带的播放速度功能(设置→播放速度)。本工具更适合那些没有内置倍速功能的网页视频。

移动端浏览器通常没有书签栏,但您可以通过以下方式使用:

  1. 复制代码法:点击下方"复制小书签代码"按钮,复制完整JavaScript代码。
  2. 在手机浏览器中打开目标视频页面。
  3. 在地址栏中粘贴代码(注意:部分浏览器会自动去除javascript:前缀,需手动补上)。
  4. 点击地址栏的"前往"或确认键执行。
  5. 💡 更便捷:将代码保存在备忘录中,需要时复制粘贴到地址栏即可。

注:iOS Safari和部分安卓浏览器可能会限制地址栏执行JavaScript,体验可能不如桌面端流畅。

默认情况下,HTML5视频加速播放时音调会随之变化(速度越快音调越高)。这是浏览器默认行为。但现代浏览器支持preservesPitch属性:

  • video.preservesPitch = true(默认),浏览器会尝试使用音调保持算法,在加速时尽量维持原始音调。
  • 大多数现代浏览器(Chrome、Edge、Firefox)默认开启音调保持,所以在2x以内加速时,声音仍然可以接受。
  • 在极高倍速(8x以上)时,即使有音调保持,声音也可能变得难以理解。此时建议搭配字幕使用。

本小书签不会修改preservesPitch属性,保留浏览器的默认行为。

本小书签支持0.25x 到 16x的播放速度范围。这个范围基于以下考虑:

  • 浏览器限制:HTML5规范中playbackRate的有效范围通常是0.0625到16,超出范围浏览器会忽略或限制。
  • 实用性:16倍速已经可以在约4分钟内看完1小时的视频,对大多数用户来说足够快。
  • 性能:极高速播放需要浏览器实时解码大量帧,可能造成卡顿或掉帧,尤其在低性能设备上。
  • 可听性:超过16倍速后,音频几乎无法辨识,实用价值有限。

我们选择0.25x~16x作为兼顾实用性和兼容性的最佳范围。

检测不到视频的常见原因:

  • iframe嵌套:视频在跨域的<iframe>中,出于安全策略,外部脚本无法访问iframe内的video元素。这是最主要的原因。
  • 非标准播放器:部分网站使用Canvas+WebGL或Flash(已淘汰)渲染视频,不使用标准video标签。
  • 延迟加载:视频尚未加载到DOM中(如滚动到特定位置后才加载),滚动到视频位置后再点击小书签刷新检测。
  • Shadow DOM:视频封装在Shadow DOM中,普通查询无法穿透。可以尝试在控制台中手动查找。

💡 如果页面有视频但未检测到,可尝试点击面板中的视频源下拉框旁的"刷新"(重新点击小书签)。

删除小书签与删除普通书签完全相同:

  • 桌面端:在书签栏右键点击小书签 → 选择"删除";或在书签管理器中找到并删除。
  • 移动端:打开浏览器书签列表 → 找到小书签 → 长按或点击菜单 → 删除。
  • 临时禁用:不想删除但暂时不用?可以将其移到一个不常用的书签文件夹中。
  • 面板关闭:点击面板右上角的 ✕ 按钮即可关闭浮动面板,页面恢复原状。再次点击小书签可重新打开。

小书签本身不修改任何浏览器设置,删除即可彻底移除。

几乎不会。我们的设计非常克制:

  • 仅注入一个轻量级浮动面板(DOM元素极少),不修改页面原有结构。
  • 面板处于空闲时不消耗CPU资源,仅在您调节速度时触发极短的计算。
  • 不会拦截或修改页面的键盘事件、鼠标事件。
  • 关闭面板后,所有注入的元素和事件监听器随之移除(display:none),页面恢复原状。
  • 使用localStorage存储偏好设置,占用空间不到200字节

您可以放心在任意网页使用,不会造成任何副作用。

可以。面板中的"视频源"下拉菜单会列出页面中所有检测到的video元素。您可以:

  • 从下拉菜单中选择任意一个视频进行控制。
  • 切换视频源后,速度设置会立即应用到新选择的视频。
  • 如果希望多个视频同时使用相同速度,目前需要逐个切换并设置。我们正在考虑在后续版本中加入"应用到全部"功能。

💡 页面中如果有隐藏的视频元素(如预加载的广告视频),也会出现在列表中,请根据编号和文件名辨别。

快进快退功能依赖于视频的可寻址性(seekable):

  • 点播视频(VOD):完全支持,可以自由前进/后退任意秒数。
  • ⚠️ 直播视频(Live Stream):通常video.durationInfinity或不可寻址,快进快退功能受限。只能后退到已缓冲的范围,无法快进到未直播的内容。
  • 💡 对于直播流,建议仅使用倍速调节功能(如1.5x追赶直播延迟)。

面板中的快进快退按钮在直播场景下会自动检测,如果无法操作则静默忽略。

小书签源码(格式化展示)

/** * 视频加速控制小书签 - Video Speed Controller Bookmarklet * 拖拽到书签栏,在任意网页一键注入倍速控制面板 * 支持 0.25x ~ 16x 倍速 | 快进快退 | 多视频切换 | 可拖动面板 | 设置记忆 */ (function() { // 防重复注入 - 如果面板已存在则切换显示 if (document.getElementById('vsc-bookmarklet-panel')) { var p = document.getElementById('vsc-bookmarklet-panel'); p.style.display = p.style.display === 'none' ? 'block' : 'none'; return; } var VSC = { panel: null, dragging: false, offsetX: 0, offsetY: 0, currentVideo: null, isMinimized: false, prefs: { speed: 1, position: { right: '20px', bottom: '80px' } } }; // 从localStorage恢复用户偏好 try { var stored = localStorage.getItem('vsc_prefs'); if (stored) { var parsed = JSON.parse(stored); /* 合并设置 */ } } catch(e) {} // 查找所有可见video元素 VSC.findAllVideos = function() { /* ... */ }; VSC.getActiveVideo = function() { /* ... */ }; VSC.applySpeed = function(speed) { /* ... */ }; VSC.updateUI = function() { /* ... */ }; VSC.createPanel = function() { /* 创建浮动面板UI */ }; VSC.init = function() { /* 入口 */ }; VSC.init(); })(); void(0);

上方展示的是格式化源码。实际书签中使用的是压缩版本(去除注释和多余空格),功能完全一致。点击"复制压缩版代码"可获取可直接使用的单行版本。

技术规格与兼容性

浏览器支持

Chrome / Edge / Firefox / Safari / Opera

移动端

支持触摸拖动 / 响应式面板

代码体积

压缩后约 3.5KB / 纯原生JS

隐私安全

零依赖 / 无网络请求 / 本地运行