在网页视频播放体验上，键盘快捷键的缺失常常是一个令人头疼的问题。这不仅影响了观看效率，也降低了用户体验。今天，我们带来了一段 JavaScript 脚本，它能够为网页视频添加键盘控制功能，让你可以用键盘快捷键来快进、快退、暂停、播放和全屏播放视频。
这段 JS 代码是一位鱼友为了解决知识星球看视频功能不好用，写的 JavaScript 脚本，完美解决了用键盘控制网页视频：快进、快退、暂停、开始、全屏。
下面是一个增强网页视频控制的 JavaScript 脚本示例，特别适用于知识星球等视频平台：
// ==UserScript==
// @name 知识星球视频增强
// @namespace http://tampermonkey.net/
// @version 2024-04-21
// @description 知识星球视频，通过键盘控制: 前进 后退 暂停 开始 全屏
// @author ohownew
// @match *://*wx.zsxq.com/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=zsxq.com
// @grant none
// ==/UserScript==
(function () {
'use strict';
var isFullScreen = false;
// 添加键盘事件监听器
document.addEventListener('keydown', function (event) {
const key = event.key;
// 获取视频元素
const video = document.querySelector('video');
// 按下左键，将视频当前时间减去5秒
if (key === 'ArrowLeft') {
video.currentTime -= 5;
}
// 按下右键，将视频当前时间加上5秒
elseif (key === 'ArrowRight') {
video.currentTime += 5;
}
// 按下空格键，播放或暂停视频
elseif (key === ' ') {
if (video.paused) {
video.play();
} else {
video.pause();
}
}
// 按下组合键 Shift + F，全屏或退出全屏
elseif (key === 'F') {
if (isFullScreen) {
video.webkitExitFullscreen();
isFullScreen = false;
} else {
video.webkitEnterFullscreen();
isFullScreen = true;
}
}
});
})();
这段脚本首先定义了一个 isFullScreen 变量来跟踪视频是否处于全屏状态。然后，通过 document.addEventListener 方法添加了一个键盘事件监听器，监听 keydown 事件。根据按下的键，执行相应的视频控制操作。
为了使这段脚本在浏览器中运行，你需要使用一个用户脚本管理器，如 Tampermonkey。Tampermonkey 是一款流行的浏览器扩展，它允许用户运行和管理用户脚本，以增强网页功能。通过 Tampermonkey，你可以轻松地安装、管理和运行用户脚本，从而实现对网页的个性化定制。
今天的代码大赏就到这里。希望通过这篇文章，你能够对如何使用 JavaScript 和 Tampermonkey 增强网页视频播放体验有一个更深入的理解。
快快将这段 JS 脚本添加到 Tampermonkey，在 完美观看视频，卷起来吧~
完整代码片段来源于代码小抄，欢迎点击进入小程序阅读！
在线访问：https://www.codecopy.cn/post/nseq3x
在代码小抄可以看到更多优质代码，也欢迎大家积极分享，可能会获得我们官方的小礼品 🎁~
往期推荐
