Greasy Fork is available in English.
使用鼠标滚轮控制视频播放进度
当前为
// ==UserScript==
// @name 控制视频快进快退及倍速播放
// @namespace http://tampermonkey.net/
// @version 0.1
// @description 使用鼠标滚轮控制视频播放进度
// @author zwols
// @license MIT
// @match *://*/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
// 监听页面上所有的video元素
document.querySelectorAll('video').forEach(video => {
// 设置初始播放速度
video.playbackRate = 1.0;
// 添加操作指引
addGuideBox(video);
// 鼠标悬停在视频上时的处理
video.addEventListener('mouseover', function() {
// 添加滚轮事件监听器
video.addEventListener('wheel', handleWheel);
});
// 鼠标离开视频时的处理
video.addEventListener('mouseout', function() {
// 移除滚轮事件监听器
video.removeEventListener('wheel', handleWheel);
});
});
// 处理滚轮事件的函数
function handleWheel(event) {
event.preventDefault(); // 阻止默认的滚动行
const video = event.target;
const deltaY = event.deltaY;
// 按住Shift键时控制播放速度
if (event.shiftKey) {
const speedChange = 0.25; // 每次调整0.25倍速
const currentSpeed = video.playbackRate;
// 向上滚动增加速度���向下滚动减少速度
if (deltaY < 0) {
// 最大支持4倍速
video.playbackRate = Math.min(4, currentSpeed + speedChange);
} else {
// 最小支持0.25倍速
video.playbackRate = Math.max(0.25, currentSpeed - speedChange);
}
// 显示当前播放速度
showSpeedIndicator(video);
} else {
const seekAmount = 5; // 每次滚动调整5秒
// 向上滚动时快退，向下滚动时快进
if (deltaY < 0) {
video.currentTime = Math.max(0, video.currentTime - seekAmount);
} else {
video.currentTime = Math.min(video.duration, video.currentTime + seekAmount);
}
}
}
// 显示播放速度指示器
function showSpeedIndicator(video) {
let indicator = video.parentElement.querySelector('.speed-indicator');
// 如示器不存在，创建一个新的
if (!indicator) {
indicator = document.createElement('div');
indicator.className = 'speed-indicator';
indicator.style.cssText = `
position: absolute;
top: 10px;
right: 10px;
background: rgba(0, 0, 0, 0.7);
color: white;
padding: 5px 10px;
border-radius: 4px;
font-size: 14px;
z-index: 9999;
pointer-events: none;
opacity: 0;
transition: opacity 0.3s;
`;
video.parentElement.appendChild(indicator);
}
// 更新速度显示
indicator.textContent = `${video.playbackRate.toFixed(2)}x`;
indicator.style.opacity = '1';
// 2秒后隐藏指示器
clearTimeout(indicator.fadeTimeout);
indicator.fadeTimeout = setTimeout(() => {
indicator.style.opacity = '0';
}, 2000);
}
// 添加操作指引框
function addGuideBox(video) {
const guideBox = document.createElement('div');
guideBox.className = 'video-control-guide';
guideBox.style.cssText = `
position: fixed;
left: 10px;
top: 50%;
transform: translateY(-50%) translateX(-150px);
background: rgba(0, 0, 0, 0.8);
color: white;
padding: 15px;
border-radius: 8px;
font-size: 13px;
z-index: 9999;
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
opacity: 0;
transition: all 0.3s ease;
border-left: 3px solid #2196F3;
writing-mode: vertical-lr;
text-orientation: mixed;
line-height: 1.8;
`;
guideBox.innerHTML = `
<div style="color: #2196F3; font-weight: bold; margin-bottom: 10px;">zwols 视频控制指南</div>
<div style="margin-bottom: 10px;">
🖱️滚轮：快进/快退5秒
</div>
<div>
⇧+滚轮：调整播放速度
</div>
`;
document.body.appendChild(guideBox);
// 鼠标进入视频区域时显示指引
video.addEventListener('mouseover', () => {
guideBox.style.opacity = '1';
guideBox.style.transform = 'translateY(-50%) translateX(0)';
});
// 鼠标离开视频区域时隐藏指引
video.addEventListener('mouseout', () => {
guideBox.style.opacity = '0';
guideBox.style.transform = 'translateY(-50%) translateX(-150px)';
});
// 5秒后自动隐藏指引
setTimeout(() => {
guideBox.style.opacity = '0';
guideBox.style.transform = 'translateY(-50%) translateX(-150px)';
}, 5000);
// 点击视频时切换显示/隐藏指引
video.addEventListener('click', (e) => {
if (e.altKey) {
if (guideBox.style.opacity === '0') {
guideBox.style.opacity = '1';
guideBox.style.transform = 'translateY(-50%) translateX(0)';
} else {
guideBox.style.opacity = '0';
guideBox.style.transform = 'translateY(-50%) translateX(-150px)';
}
}
});
}
})();