您需要先安装一个扩展,例如 篡改猴、Greasemonkey 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 Userscripts ,之后才能安装此脚本。
您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。
您需要先安装用户脚本管理器扩展后才能安装此脚本。
Enhanced YouTube playback with hold-for-speed controls and resume watching. Hold right arrow for fast playback, left for slow-mo, and save your place in videos!
当前为
- // ==UserScript==
- // @name Better YouTube Video Controls
- // @namespace http://tampermonkey.net/
- // @version 1.3
- // @description Enhanced YouTube playback with hold-for-speed controls and resume watching. Hold right arrow for fast playback, left for slow-mo, and save your place in videos!
- // @author Henry Suen
- // @match *://*.youtube.com/*
- // @license MIT
- // @grant GM_getValue
- // @grant GM_setValue
- // @grant GM_registerMenuCommand
- // ==/UserScript==
- (function() {
- 'use strict';
- // --- USER CONFIGURABLE SETTINGS ---
- // Get user settings or use defaults
- let HOLD_RIGHT_PLAYBACK_SPEED = GM_getValue('holdRightPlaybackSpeed', 2.5);
- let HOLD_LEFT_PLAYBACK_SPEED = GM_getValue('holdLeftPlaybackSpeed', 0.2);
- let LONG_PRESS_THRESHOLD = GM_getValue('longPressThreshold', 250); // Default 250ms
- let SKIP_SECONDS = GM_getValue('skipSeconds', 5); // Default 5 seconds
- let RESUME_WATCHING = GM_getValue('resumeWatching', true); // Default to on
- // Register menu commands for user configuration
- GM_registerMenuCommand('Set Right Arrow Hold Speed (Fast)', function() {
- const newSpeed = parseFloat(prompt('Enter playback speed when holding right arrow (e.g., 2.0, 3.0):', HOLD_RIGHT_PLAYBACK_SPEED));
- if (!isNaN(newSpeed) && newSpeed > 0) {
- HOLD_RIGHT_PLAYBACK_SPEED = newSpeed;
- GM_setValue('holdRightPlaybackSpeed', newSpeed);
- alert(`Right arrow hold speed set to ${newSpeed}x`);
- } else {
- alert('Invalid value. Please enter a positive number.');
- }
- });
- GM_registerMenuCommand('Set Left Arrow Hold Speed (Slow)', function() {
- const newSpeed = parseFloat(prompt('Enter playback speed when holding left arrow (e.g., 0.5, 0.75):', HOLD_LEFT_PLAYBACK_SPEED));
- if (!isNaN(newSpeed) && newSpeed > 0 && newSpeed <= 1) {
- HOLD_LEFT_PLAYBACK_SPEED = newSpeed;
- GM_setValue('holdLeftPlaybackSpeed', newSpeed);
- alert(`Left arrow hold speed set to ${newSpeed}x`);
- } else {
- alert('Invalid value. Please enter a number between 0 and 1.');
- }
- });
- GM_registerMenuCommand('Set Skip Seconds', function() {
- const newSkip = parseInt(prompt('Enter seconds to skip on right/left arrow tap:', SKIP_SECONDS));
- if (!isNaN(newSkip) && newSkip > 0) {
- SKIP_SECONDS = newSkip;
- GM_setValue('skipSeconds', newSkip);
- alert(`Skip seconds set to ${newSkip}`);
- } else {
- alert('Invalid value. Please enter a positive number.');
- }
- });
- GM_registerMenuCommand('Toggle Resume Watching', function() {
- RESUME_WATCHING = !RESUME_WATCHING;
- GM_setValue('resumeWatching', RESUME_WATCHING);
- alert(`Resume Watching: ${RESUME_WATCHING ? 'Enabled' : 'Disabled'}`);
- });
- // --- END OF USER CONFIGURABLE SETTINGS ---
- // Store the original playback rate
- let originalPlaybackRate = 1.0;
- // Flag to track if we're handling a long press
- let isLongPress = false;
- // Track when the key was pressed
- let keyDownTime = 0;
- // Flag to ensure we only process one keydown at a time
- let keyAlreadyDown = false;
- // Track which key is being held
- let activeKey = null;
- // Reference to our speed indicator element
- let speedIndicator = null;
- // Reference to our timeout for detecting long press
- let longPressTimeout = null;
- // Our own UI indicator for actions
- let actionIndicator = null;
- // Timeout for hiding the action indicator
- let hideActionTimeout = null;
- // Variables for tracking video position
- let currentVideoId = null;
- let positionSaveInterval = null;
- let lastSavedPosition = 0;
- // Store the element that had focus before we blurred the progress bar
- let lastActiveElement = null;
- // --- Utility Functions ---
- // Extract video ID from YouTube URL
- function getVideoId() {
- const url = window.location.href;
- const match = url.match(/(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]{11})/);
- return match ? match[1] : null;
- }
- // Save current video position
- function saveVideoPosition() {
- const video = findYouTubeVideo();
- if (!video || !RESUME_WATCHING) return;
- const videoId = getVideoId();
- if (!videoId) return;
- // Only update if position changed significantly (more than 1 second)
- if (Math.abs(video.currentTime - lastSavedPosition) > 1) {
- lastSavedPosition = video.currentTime;
- GM_setValue(`videoPosition_${videoId}`, video.currentTime);
- }
- }
- // Start tracking video position
- function startPositionTracking() {
- if (!RESUME_WATCHING) return;
- // Clear any existing interval
- if (positionSaveInterval) {
- clearInterval(positionSaveInterval);
- }
- // Set up the new interval
- positionSaveInterval = setInterval(saveVideoPosition, 5000);
- // Update the current video ID
- currentVideoId = getVideoId();
- }
- // Restore video position
- function restoreVideoPosition() {
- if (!RESUME_WATCHING) return;
- const videoId = getVideoId();
- if (!videoId) return;
- const savedPosition = GM_getValue(`videoPosition_${videoId}`, 0);
- if (savedPosition > 0) {
- const video = findYouTubeVideo();
- if (video) {
- // Don't resume if we're near the start or very close to where we left off
- if (video.currentTime < 3 && savedPosition > 5) {
- video.currentTime = savedPosition;
- // Update YouTube's internal state to be aware of our time change
- const ytplayer = findYouTubePlayer();
- if (ytplayer && typeof ytplayer.seekTo === 'function') {
- try {
- ytplayer.seekTo(savedPosition, true);
- } catch(e) {}
- }
- // Show a notification that we've resumed
- showActionIndicator(`Resumed at ${formatTime(savedPosition)}`, 3000);
- }
- }
- }
- }
- // Format time in MM:SS format
- function formatTime(seconds) {
- const minutes = Math.floor(seconds / 60);
- const remainingSeconds = Math.floor(seconds % 60);
- return `${minutes}:${remainingSeconds < 10 ? '0' : ''}${remainingSeconds}`;
- }
- // Find video element on YouTube
- function findYouTubeVideo() {
- return document.querySelector('#movie_player video');
- }
- // Find YouTube player element
- function findYouTubePlayer() {
- return document.querySelector('#movie_player');
- }
- // Utility function to check if an element is an input field
- function isInputField(element) {
- if (!element) return false;
- const tagName = element.tagName.toLowerCase();
- const type = (element.type || '').toLowerCase();
- return (tagName === 'input' &&
- ['text', 'password', 'email', 'number', 'search', 'tel', 'url'].includes(type)) ||
- tagName === 'textarea' ||
- element.isContentEditable;
- }
- // Check if focus is on progress bar
- function isProgressBarFocused() {
- // There are multiple elements that make up the progress bar
- const progressBar = document.querySelector('.ytp-progress-bar');
- const scrubber = document.querySelector('.ytp-scrubber-container');
- const progressList = document.querySelectorAll('.ytp-progress-list');
- if (document.activeElement === progressBar ||
- document.activeElement === scrubber ||
- (progressList && Array.from(progressList).includes(document.activeElement))) {
- return true;
- }
- // Check for aria attributes that might indicate focus on progress controls
- const activeElement = document.activeElement;
- if (activeElement && (
- activeElement.getAttribute('aria-valuemin') !== null ||
- activeElement.getAttribute('aria-valuemax') !== null ||
- activeElement.getAttribute('role') === 'slider'
- )) {
- // Check if it's in the player controls
- const isInControls = activeElement.closest('.ytp-chrome-bottom');
- return isInControls !== null;
- }
- return false;
- }
- // Remove focus from progress bar and trigger volume control
- function handleVolumeKeyOnProgressBar(isVolumeUp) {
- if (isProgressBarFocused()) {
- // Store the active element so we can restore it later
- lastActiveElement = document.activeElement;
- // Blur the progress bar
- if (lastActiveElement && lastActiveElement.blur) {
- lastActiveElement.blur();
- }
- // Move focus to the player itself
- const player = findYouTubePlayer();
- if (player && player.focus) {
- player.focus();
- }
- // Create and dispatch a synthetic key event to trigger YouTube's volume control
- // We do this after ensuring focus is off the progress bar
- setTimeout(() => {
- const event = new KeyboardEvent('keydown', {
- key: isVolumeUp ? 'ArrowUp' : 'ArrowDown',
- code: isVolumeUp ? 'ArrowUp' : 'ArrowDown',
- keyCode: isVolumeUp ? 38 : 40,
- which: isVolumeUp ? 38 : 40,
- bubbles: true,
- cancelable: true,
- composed: true
- });
- // Dispatch to player element to ensure YouTube's volume control is triggered
- if (player) {
- player.dispatchEvent(event);
- } else {
- // Fallback to document if player can't be found
- document.dispatchEvent(event);
- }
- }, 10);
- return true;
- }
- return false;
- }
- // --- UI Elements ---
- // Create the speed indicator UI element
- function createSpeedIndicator() {
- // Remove any existing indicator first
- removeSpeedIndicator();
- // Create a new indicator
- speedIndicator = document.createElement('div');
- speedIndicator.id = 'speed-indicator';
- speedIndicator.textContent = '1x'; // Default text - will be updated when shown
- // Style the indicator with larger text
- const style = speedIndicator.style;
- style.position = 'absolute';
- style.right = '20px';
- style.top = '20px';
- style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
- style.color = 'white';
- style.padding = '8px 16px'; // Larger padding
- style.borderRadius = '6px';
- style.fontSize = '28px'; // Large font size
- style.fontWeight = 'bold';
- style.zIndex = '9999';
- style.display = 'none'; // Hidden by default
- style.opacity = '0';
- style.transition = 'opacity 0.3s ease';
- // Add it to the player
- const player = findYouTubePlayer();
- if (player) {
- player.appendChild(speedIndicator);
- } else {
- document.body.appendChild(speedIndicator); // Fallback
- }
- return speedIndicator;
- }
- // Create action indicator for volume and skip
- function createActionIndicator() {
- if (actionIndicator) {
- return actionIndicator;
- }
- actionIndicator = document.createElement('div');
- actionIndicator.id = 'action-indicator';
- // Style the action indicator
- const style = actionIndicator.style;
- style.position = 'absolute';
- style.left = '50%';
- style.top = '50%';
- style.transform = 'translate(-50%, -50%)';
- style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
- style.color = 'white';
- style.padding = '12px 20px';
- style.borderRadius = '8px';
- style.fontSize = '24px';
- style.fontWeight = 'bold';
- style.zIndex = '10000';
- style.display = 'none';
- style.opacity = '0';
- style.transition = 'opacity 0.3s ease';
- // Add it to the player
- const player = findYouTubePlayer();
- if (player) {
- player.appendChild(actionIndicator);
- } else {
- document.body.appendChild(actionIndicator);
- }
- return actionIndicator;
- }
- // Show the speed indicator with a fade-in effect
- function showSpeedIndicator(speed) {
- if (!speedIndicator) {
- speedIndicator = createSpeedIndicator();
- }
- speedIndicator.textContent = speed + 'x'; // Update with current speed
- speedIndicator.style.display = 'block';
- setTimeout(() => {
- speedIndicator.style.opacity = '1';
- }, 10); // Small delay to ensure the transition works
- }
- // Hide the speed indicator with a fade-out effect
- function hideSpeedIndicator() {
- if (speedIndicator) {
- speedIndicator.style.opacity = '0';
- setTimeout(() => {
- speedIndicator.style.display = 'none';
- }, 300); // Wait for the transition to complete
- }
- }
- // Remove the speed indicator completely
- function removeSpeedIndicator() {
- if (speedIndicator && speedIndicator.parentNode) {
- speedIndicator.parentNode.removeChild(speedIndicator);
- speedIndicator = null;
- }
- }
- // Show action indicator
- function showActionIndicator(text, duration = 1000) {
- // Clear any existing hide timeout
- if (hideActionTimeout) {
- clearTimeout(hideActionTimeout);
- hideActionTimeout = null;
- }
- const indicator = createActionIndicator();
- // If indicator is already visible, just update text without the fade-out/fade-in
- if (indicator.style.opacity === '1') {
- indicator.textContent = text;
- } else {
- indicator.textContent = text;
- indicator.style.display = 'block';
- // Use a timeout to ensure the transition works
- setTimeout(() => {
- indicator.style.opacity = '1';
- }, 10);
- }
- // Set a new timeout to hide the indicator
- hideActionTimeout = setTimeout(() => {
- indicator.style.opacity = '0';
- setTimeout(() => {
- indicator.style.display = 'none';
- }, 300);
- }, duration);
- }
- // --- Action Functions ---
- // Function to perform a seek forward or backward
- function performSeek(forward = true) {
- const video = findYouTubeVideo();
- if (!video) return false;
- // Calculate new time
- const currentTime = video.currentTime;
- const newTime = currentTime + (forward ? SKIP_SECONDS : -SKIP_SECONDS);
- const finalTime = Math.max(0, newTime);
- // Update both the HTML5 video element and YouTube's internal state
- video.currentTime = finalTime;
- // Try to sync with YouTube's API
- const player = findYouTubePlayer();
- if (player && typeof player.seekTo === 'function') {
- try {
- player.seekTo(finalTime, true);
- } catch(e) {}
- }
- // Show our custom UI indicator
- showActionIndicator(`${forward ? 'Forward' : 'Backward'} ${SKIP_SECONDS}s`);
- return true;
- }
- // Function to change playback speed
- function changePlaybackSpeed(speed) {
- const video = findYouTubeVideo();
- if (!video) return false;
- // Store original rate on first change
- if (originalPlaybackRate === 1.0) {
- originalPlaybackRate = video.playbackRate;
- }
- // Set new speed
- video.playbackRate = speed;
- // Also try to set through YouTube's API if available
- const player = findYouTubePlayer();
- if (player && typeof player.setPlaybackRate === 'function') {
- try {
- player.setPlaybackRate(speed);
- } catch(e) {}
- }
- // Show indicator
- showSpeedIndicator(speed);
- return true;
- }
- // Function to reset playback speed
- function resetPlaybackSpeed() {
- const video = findYouTubeVideo();
- if (!video) return false;
- // Reset to original speed
- video.playbackRate = originalPlaybackRate;
- // Also try to reset through YouTube's API
- const player = findYouTubePlayer();
- if (player && typeof player.setPlaybackRate === 'function') {
- try {
- player.setPlaybackRate(originalPlaybackRate);
- } catch(e) {}
- }
- // Hide speed indicator
- hideSpeedIndicator();
- return true;
- }
- // --- Key Event Handlers ---
- // Main handler for key down events
- const handleKeyDown = function(event) {
- // Skip if we're in an input field
- if (isInputField(document.activeElement)) return;
- // Handle arrow keys
- if (event.key === 'ArrowRight' || event.key === 'ArrowLeft') {
- // Prevent default immediately
- event.preventDefault();
- event.stopPropagation();
- // Store which key was pressed
- activeKey = event.key;
- // Only proceed if we found a video and it's the first keydown
- if (findYouTubeVideo() && !keyAlreadyDown) {
- keyAlreadyDown = true;
- keyDownTime = Date.now();
- // Set up a timeout to check for long press
- longPressTimeout = setTimeout(() => {
- // If key is still being pressed after threshold
- if (keyAlreadyDown) {
- isLongPress = true;
- // Different behavior based on which arrow key
- if (activeKey === 'ArrowRight') {
- // Right arrow for fast playback
- changePlaybackSpeed(HOLD_RIGHT_PLAYBACK_SPEED);
- } else if (activeKey === 'ArrowLeft') {
- // Left arrow for slow playback
- changePlaybackSpeed(HOLD_LEFT_PLAYBACK_SPEED);
- }
- }
- }, LONG_PRESS_THRESHOLD);
- }
- }
- // Handle up/down arrow keys on progress bar
- else if ((event.key === 'ArrowUp' || event.key === 'ArrowDown') && isProgressBarFocused()) {
- // Prevent default to avoid any time change
- event.preventDefault();
- event.stopPropagation();
- // Handle volume control properly by fixing focus and dispatching a new event
- handleVolumeKeyOnProgressBar(event.key === 'ArrowUp');
- }
- };
- // Main handler for key up events
- const handleKeyUp = function(event) {
- // Skip if we're in an input field
- if (isInputField(document.activeElement)) return;
- if (event.key === 'ArrowRight' || event.key === 'ArrowLeft') {
- // Prevent default
- event.preventDefault();
- event.stopPropagation();
- // Only process if this is the active key (prevents issues with multiple keys)
- if (event.key === activeKey) {
- // Clear the timeout to prevent speed change activation if key was released quickly
- if (longPressTimeout) {
- clearTimeout(longPressTimeout);
- longPressTimeout = null;
- }
- // If this was a long press, reset playback speed
- if (isLongPress) {
- resetPlaybackSpeed();
- } else if (keyAlreadyDown) {
- // This was a quick tap, perform a seek
- performSeek(event.key === 'ArrowRight');
- }
- // Reset tracking variables
- isLongPress = false;
- keyDownTime = 0;
- keyAlreadyDown = false;
- activeKey = null;
- }
- }
- };
- // --- Setup Functions ---
- // More comprehensive event handling
- function setupGlobalEventHandlers() {
- // Capture all keyboard events at the window level
- window.addEventListener('keydown', (e) => {
- // Skip if we're in an input field to allow normal typing
- if (isInputField(document.activeElement)) {
- return;
- }
- if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
- // Always handle left/right arrows
- handleKeyDown(e);
- // Always prevent propagation
- e.stopPropagation();
- e.preventDefault();
- } else if ((e.key === 'ArrowUp' || e.key === 'ArrowDown') && isProgressBarFocused()) {
- // For up/down, handle and prevent default when progress bar is focused
- handleKeyDown(e);
- e.stopPropagation();
- e.preventDefault();
- }
- }, true);
- window.addEventListener('keyup', (e) => {
- // Skip if we're in an input field
- if (isInputField(document.activeElement)) {
- return;
- }
- if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
- // Call our handler first
- handleKeyUp(e);
- // Always prevent propagation to YouTube
- e.stopPropagation();
- e.preventDefault();
- }
- }, true);
- }
- // Additional handler for the YouTube player specifically
- function addYouTubePlayerHandlers() {
- const player = findYouTubePlayer();
- if (player) {
- // Create our indicators now that we have the player
- createSpeedIndicator();
- createActionIndicator();
- // Additional direct event listeners for the player
- player.addEventListener('keydown', function(e) {
- if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
- e.preventDefault();
- e.stopPropagation();
- } else if ((e.key === 'ArrowUp' || e.key === 'ArrowDown') && isProgressBarFocused()) {
- // For up/down on progress bar, handle and prevent
- e.preventDefault();
- e.stopPropagation();
- handleVolumeKeyOnProgressBar(e.key === 'ArrowUp');
- }
- }, true);
- // Try to restore video position
- setTimeout(() => {
- restoreVideoPosition();
- startPositionTracking();
- }, 1500); // Give YouTube a moment to initialize the video
- }
- }
- // Function to handle YouTube video element being added or replaced
- function handleVideoElementChange() {
- const video = findYouTubeVideo();
- if (video) {
- // Try to restore video position
- setTimeout(() => {
- restoreVideoPosition();
- startPositionTracking();
- }, 1500); // Give YouTube a moment to initialize the video
- }
- }
- // Setup functions that will need to be called once the page is loaded
- function setupOnLoad() {
- // Set up the global event handlers
- setupGlobalEventHandlers();
- // Add player-specific handlers
- addYouTubePlayerHandlers();
- // Also try to intercept YouTube's internal keyboard event handling
- const originalDocKeyDown = document.onkeydown;
- const originalDocKeyUp = document.onkeyup;
- document.onkeydown = function(e) {
- // Skip if we're in an input field
- if (isInputField(document.activeElement)) {
- return originalDocKeyDown ? originalDocKeyDown(e) : true;
- }
- if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
- handleKeyDown(e);
- return false; // Prevent default
- } else if ((e.key === 'ArrowUp' || e.key === 'ArrowDown') && isProgressBarFocused()) {
- // Completely prevent default when progress bar is focused
- handleKeyDown(e);
- return false;
- }
- return originalDocKeyDown ? originalDocKeyDown(e) : true;
- };
- document.onkeyup = function(e) {
- // Skip if we're in an input field
- if (isInputField(document.activeElement)) {
- return originalDocKeyUp ? originalDocKeyUp(e) : true;
- }
- if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
- handleKeyUp(e);
- return false; // Prevent default
- }
- return originalDocKeyUp ? originalDocKeyUp(e) : true;
- };
- }
- // Watch for DOM changes to catch the player element if it loads after the script
- const observer = new MutationObserver(function(mutations) {
- // Look for the player
- if (!document.querySelector('#movie_player')) {
- return;
- }
- // Check if we need to set up the player
- if (!speedIndicator) {
- addYouTubePlayerHandlers();
- }
- // Also watch for video element changes
- const video = findYouTubeVideo();
- if (video && currentVideoId != getVideoId()) {
- handleVideoElementChange();
- }
- });
- // Start observing the document
- observer.observe(document, { childList: true, subtree: true });
- // Listen for navigation events (YouTube is a SPA)
- function handleNavigation() {
- // Check for video ID change
- const newVideoId = getVideoId();
- if (newVideoId && newVideoId !== currentVideoId) {
- currentVideoId = newVideoId;
- // Clear existing tracking
- if (positionSaveInterval) {
- clearInterval(positionSaveInterval);
- positionSaveInterval = null;
- }
- // Handle the video element for the new page
- handleVideoElementChange();
- }
- }
- // YouTube uses History API for navigation
- const originalPushState = history.pushState;
- history.pushState = function() {
- originalPushState.apply(this, arguments);
- handleNavigation();
- };
- window.addEventListener('popstate', handleNavigation);
- // Call setup once the page is fully loaded
- if (document.readyState === 'complete') {
- setupOnLoad();
- } else {
- window.addEventListener('load', setupOnLoad);
- }
- // Clean up when the page unloads
- window.addEventListener('unload', function() {
- // Save final position before unloading
- saveVideoPosition();
- removeSpeedIndicator();
- if (actionIndicator && actionIndicator.parentNode) {
- actionIndicator.parentNode.removeChild(actionIndicator);
- }
- observer.disconnect();
- if (longPressTimeout) {
- clearTimeout(longPressTimeout);
- }
- if (hideActionTimeout) {
- clearTimeout(hideActionTimeout);
- }
- if (positionSaveInterval) {
- clearInterval(positionSaveInterval);
- }
- });
- })();
QingJ © 2025
镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址