背景

在学堂在线学模电,过程中出现一个问题,需要快进快退时右手拿着笔很不方便而且鼠标拖动快进步长太大,想到 YouTube上看视频用键盘快捷键控制视频播放,可以随心所欲的快进快退,很不习惯这种方式,正好最近在学习 Javascript,自然想着写脚本控制视频播放。

预想的按键

  • SPACE 键控制播放与暂停
  • F 键开启全屏与退出全屏
  • LEFT 键快退10s
  • RIGHT 键快进10s
  • UP 键使音量放大10%
  • DOWN 键使音量减小10%
  • M 键静音
  • home 键回到视频头
  • end 键跳转到视频末尾

实现的过程

使用键盘事件来处理,键盘事件有三种,采用哪一种呢:

  • keypress
  • keydown
  • keyup

搜索得知: keypress 事件在按键被按下并产生一个字符才被触发,keydown 则无论有没有字符产生,事件均会被触发,keyup 则是按键被释放,事件才被触发。

Test

1
2
3
4
5
6
7
8
(function () {
    document.onkeydown = function (e) {
        event.preventDefault();
        var evt = e || window.event;
        if (evt.keyCode)
            alert("Hello World!");
    }
})()

运行上面这段代码你会发现,无论按哪个按键都会弹出 “Hello World!”

1
2
3
4
5
6
7
8
(function () {
    document.onkeypress = function (e) {
        event.preventDefault();
        var evt = e || window.event;
        if (evt.keyCode)
            alert("Hello World!");
    }
})()

然而这段代码只有当按键能产生字符才会弹出”Hello World!“,当按shiftalt 等键不会弹出”Hello World!”

1
2
3
4
5
6
7
8
(function () {
    document.onkeyup = function (e) {
        event.preventDefault();
        var evt = e || window.event;
        if (evt.keyCode)
            alert("Hello World!");
    }
})()

这段代码在按键被释放才会弹出”Hello World!”

分析后采用keydown事件,利用这个网站 获取每个按键的KeyCode。

获取视频对象:

1
var v = document.querySelector("video");

查询文档得知:

  • v.currentTime 获得当前视频播放进度
  • v.duration 获得视频总长度(以秒为单位)
  • v.volume 获得当前音量
  • v.paused 判断是否处于暂停状态
  • v.play() 播放
  • v.pause() 暂停
  • v.requestFullscreen() 全屏
  • document.exitFullscreen() 退出全屏

— 一阵鼓捣后 —

在 Chrome Console 可以运行,但是当我关闭浏览器,下次又得复制代码到 Console,这怎么可以呢?在网上找有什么方法可以将js植入到一个网站,发现了油猴(Tampermonkey),研究了一下,发现这玩意号称第二个“Chrome Web Store” ,果断安装油猴 Tampermonkey 新建脚本,ctrl+c/ctrl+v完成!

终于可以学习了

1)

代码: VideoAssistant

脚本也可以用于国内其他视频网站,讲道理采用HTML5播放器的视频网站都可以,如果不可以,看是否采用的flash播放器

参考资料