在任何网站上控制视频播放速度
大多数视频播放器把速度封顶在 2 倍,或者干脆隐藏控件。浏览器没有那个限制。一条简短的 JustZix 规则让你对页面上的每个视频都有精细的速度控制,无论是谁做的播放器。
为什么规则胜过播放器 UI
原生的 HTMLMediaElement 暴露一个 playbackRate 属性。播放器外壳只是它之上的一层皮肤。当你直接设置 playbackRate,你就绕过皮肤,与元素对话。JustZix 让你把那段代码附加到一个 URL 模式上,这样每次你打开一个匹配的页面它都会自动运行。
最小配方
新建一条 JavaScript 规则,限定到你观看长视频的网站。这段代码把每个视频设为 1.5 倍,并且多次运行也安全:
document.querySelectorAll('video').forEach(function (v) {
v.playbackRate = 1.5;
});
这对已经在 DOM 里的视频有效。许多网站在页面之后才加载播放器,所以你也想捕获稍后出现的视频。
捕获稍后添加的视频
一个 MutationObserver 监视文档,并把你的速度应用到任何新视频上。它是防御性的:如果某个节点不是元素,它绝不抛出错误。
(function () {
var target = 1.5;
function apply(root) {
var list = root.querySelectorAll ? root.querySelectorAll('video') : [];
list.forEach(function (v) { v.playbackRate = target; });
}
apply(document);
var obs = new MutationObserver(function (records) {
records.forEach(function (rec) {
rec.addedNodes.forEach(function (n) {
if (n.nodeType === 1) {
if (n.tagName === 'VIDEO') { n.playbackRate = target; }
else { apply(n); }
}
});
});
});
obs.observe(document.documentElement, { childList: true, subtree: true });
})();
一个细微之处:有些播放器在新片段开始时会重置 playbackRate。为了挺过这一点,也监听 ratechange 和 loadeddata 事件并重新应用你的值。
document.addEventListener('loadeddata', function (e) {
var v = e.target;
if (v && v.tagName === 'VIDEO') { v.playbackRate = 1.5; }
}, true);
第三个参数 true 启用捕获,所以即便媒体事件不冒泡,处理器仍会触发。
键盘快捷键和速度徽章
当你能不用找菜单就微调速度时,看教程会更轻松。这条规则把方括号键绑定为步进速度,并在角落显示一个小徽章。
(function () {
var speed = 1;
var badge = document.createElement('div');
badge.style.cssText = 'position:fixed;top:8px;right:8px;z-index:2147483647;'
+ 'background:#000;color:#fff;font:600 13px sans-serif;'
+ 'padding:4px 8px;border-radius:6px;opacity:0;transition:opacity .3s';
document.body.appendChild(badge);
function setSpeed(next) {
speed = Math.min(5, Math.max(0.25, Math.round(next * 100) / 100));
document.querySelectorAll('video').forEach(function (v) {
v.playbackRate = speed;
});
badge.textContent = speed + 'x';
badge.style.opacity = '1';
clearTimeout(badge._t);
badge._t = setTimeout(function () { badge.style.opacity = '0'; }, 1200);
}
document.addEventListener('keydown', function (e) {
if (e.target && /INPUT|TEXTAREA/.test(e.target.tagName)) { return; }
if (e.key === ']') { setSpeed(speed + 0.25); }
if (e.key === '[') { setSpeed(speed - 0.25); }
if (e.key === '\\') { setSpeed(1); }
});
})();
徽章使用实用上最高的 z-index,所以它在全屏播放器之上仍然可见;而且当你在表单字段中输入时它会忽略按键。
限定规则范围
- 为单个网站匹配像
*://*.example.com/*这样宽泛的模式,或为一整类页面用通配符。 - 为每个网站保留一条规则,这样你可以给每一个设定它自己的默认速度。
- 如果某个播放器表现异常,从弹窗里禁用规则,而不是删除它。
浏览我们的现成示例获取这条规则的复制即用版本,或者下载 JustZix 开始。当你处理完速度,下一步是夺回画中画按钮——参见给任何视频添加画中画按钮。
为这篇文章评分
暂无评分 — 成为第一个。