html5视频播放速度控制器 html5 video speed controller

本来是想要控制youtube视频的速度，研究调试网页的代码半天也没整太明白。然后稍微google了一下，发现可以直接通过选择video标签然后改变它的playbackRate属性，而且它的值应该没有限制（大于等于0的数应该都行）。比如设置为3.3x速度播放：

var player = document.querySelector("video");
player.playbackRate = 3.3;

接着我就想顺便研究下怎么做成个油猴脚本，然后直接通过按键触发视频播放速度的调整

代码

因为只是调整一个播放速度，所以代码非常简单，vlc用的其实是[和]减速加速，但我还安装了vimium插件，会和这个冲突，原本想就换成{和}吧，结果b站也用了这两个键(当你播放一个视频列表的时候，它们被用来切换上一个视频下一个视频)，所以最后我使用了-+=三个键分别用来减速加速和回到一倍速。

每次加减速的步长是0.1。最低调到0.1倍，最高调到10倍，但实际上应该是没有限制的(最低可以到0)。

另外可能有时候想要看下到底调到多少倍速了，但是直接向网页添加一个元素应该有点丑，而且要兼顾不同的视频网站(要想漂亮应该要多花点功夫，不是很专业就暂时放弃了)，所以我选择直接把调速信息输出到控制台 (chrome中F12打开开发者工具，ESC可以调出控制台)。

// ==UserScript==
// @name        html5 video speed controller (vlc like)
// @namespace   github.com/sky-bro
// @version     1.0.2
// @description Simple html5 video speed control with '-', '+', and '=' (vlc like). '-': decrease by 0.1, '+': increase by 0.1, '=': back to 1.0x
// @author      https://sky-bro.github.io
// @match       https://www.youtube.com/*
// @match       https://www.bilibili.com/*
// @match       *://*.zhihuishu.com/*
// @grant       none
// @updateURL   https://raw.githubusercontent.com/sky-bro/tampermonkey-scripts/main/html5/speed-control.meta.js
// @downloadURL   https://raw.githubusercontent.com/sky-bro/tampermonkey-scripts/main/html5/speed-control.user.js
// ==/UserScript==

(function() {
    'use strict';
    function setPlaybackRate(player, rate) {
        if (rate < 0.1) rate = 0.1;
        else if (rate > 10) rate = 10;
        player.playbackRate = rate;
        console.log("playing in %sx", (rate).toFixed(1));
    }

    window.addEventListener('keypress', function(event) {
        var player = document.querySelector("video");
        // console.log(event);
        var curRate = Number(player.playbackRate);
        // vlc actually uses '[' and ']', but they are used by vimium
        if (event.key == "-") {
            console.log("- pressed");
            setPlaybackRate(player, curRate - 0.1);
        } else if(event.key == "+") {
            console.log("+ pressed");
            setPlaybackRate(player, curRate + 0.1);
        } else if(event.key == "=") {
            console.log("= pressed");
            setPlaybackRate(player, 1);
        }
    });
})();

安装脚本

在有了油猴插件之后，可以直接点击github/sky-bro/tampermonkey-scripts/html5/speed-control.user.js安装这个插件, 或者在greasyfork上搜索安装这个脚本: html5 video speed controller

自行扩展

如果你有想要变速的视频网站(只要使用的html5视频，也就是html中有video这个标签)，可以修改脚本代码，注释中添加一个@match行用来匹配你需要的网站。

另外html5视频给我们提供的接口/变量还有更多，可以参考HTML 5 视频/音频参考手册自己玩一玩，增加一些功能。

大家可能浏览器都用了各种不同的插件，如果功能过多很可能出现按键冲突，还是根据自己需要调整/增加功能比较好。

我写完脚本后搜了一下，实际上html5视频相关的插件有很多了，比如功能最多的HTML5 video player enhanced script，可以看它的代码学习学习。

相关链接

• HTML 5 视频/音频参考手册
• HTML5 video player enhanced script