在網頁視訊播放體驗上，鍵盤快捷鍵的缺失常常是一個令人頭疼的問題。這不僅影響了觀看效率，也降低了使用者體驗。今天，我們帶來了一段 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
在程式碼小抄可以看到更多優質程式碼，也歡迎大家積極分享，可能會獲得我們官方的小禮品 🎁~
往期推薦
