视频进度控制脚本

// 视频进度控制脚本 - 直接复制到浏览器控制台运行 // 支持左右箭头键快进/快退视频 (function () { 'use strict'; // 配置 const SEEK_SECONDS = 5; // 每次跳转的秒数 const LONG_SEEK_SECONDS = 10; // 长按Shift时跳转的秒数 console.log('🎬 视频键盘控制已启用'); console.log(`← 左箭头: 后退 ${SEEK_SECONDS} 秒`); console.log(`→ 右箭头: 前进 ${SEEK_SECONDS} 秒`); console.log(`Shift + ← / →: 前进/后退 ${LONG_SEEK_SECONDS} 秒`); console.log(`空格键: 播放/暂停`); console.log(`↑ / ↓: 音量增减`); // 查找页面上的视频元素 function getVideoElement() { // 优先查找正在播放的视频 const videos = document.querySelectorAll('video'); for (let video of videos) { if (!video.paused || video.currentTime > 0) { return video; } } // 如果没有正在播放的,返回第一个视频 return videos[0] || null; } // 显示提示信息 function showToast(message) { const existingToast = document.getElementById('video-seek-toast'); if (existingToast) { existingToast.remove(); } const toast = document.createElement('div'); toast.id = 'video-seek-toast'; toast.textContent = message; toast.style.cssText = ` position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0, 0, 0, 0.8); color: white; padding: 15px 30px; border-radius: 8px; font-size: 18px; font-weight: bold; z-index: 999999; pointer-events: none; animation: fadeInOut 1s ease-in-out; `; // 添加动画样式 if (!document.getElementById('video-seek-toast-style')) { const style = document.createElement('style'); style.id = 'video-seek-toast-style'; style.textContent = ` @keyframes fadeInOut { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); } 20% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); } } `; document.head.appendChild(style); } document.body.appendChild(toast); setTimeout(() => toast.remove(), 1000); } // 格式化时间 function formatTime(seconds) { const h = Math.floor(seconds / 3600); const m = Math.floor((seconds % 3600) / 60); const s = Math.floor(seconds % 60); if (h > 0) { return `${h}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`; } return `${m}:${s.toString().padStart(2, '0')}`; } // 键盘事件处理 function handleKeyPress(e) { const video = getVideoElement(); if (!video) { console.warn('未找到视频元素'); return; } // 如果焦点在输入框上,不处理 const activeElement = document.activeElement; if (activeElement && ( activeElement.tagName === 'INPUT' || activeElement.tagName === 'TEXTAREA' || activeElement.isContentEditable )) { return; } let seekAmount = e.shiftKey ? LONG_SEEK_SECONDS : SEEK_SECONDS; let handled = false; switch (e.key) { case 'ArrowLeft': // 左箭头 - 后退 video.currentTime = Math.max(0, video.currentTime - seekAmount); showToast(`⏪ ${formatTime(video.currentTime)}`); handled = true; break; case 'ArrowRight': // 右箭头 - 前进 video.currentTime = Math.min(video.duration, video.currentTime + seekAmount); showToast(`⏩ ${formatTime(video.currentTime)}`); handled = true; break; case ' ': // 空格 - 播放/暂停 if (video.paused) { video.play(); showToast('▶️ 播放'); } else { video.pause(); showToast('⏸️ 暂停'); } handled = true; break; case 'ArrowUp': // 上箭头 - 增加音量 video.volume = Math.min(1, video.volume + 0.1); showToast(`🔊 音量: ${Math.round(video.volume * 100)}%`); handled = true; break; case 'ArrowDown': // 下箭头 - 减少音量 video.volume = Math.max(0, video.volume - 0.1); showToast(`🔉 音量: ${Math.round(video.volume * 100)}%`); handled = true; break; case 'f': case 'F': // F键 - 全屏 if (document.fullscreenElement) { document.exitFullscreen(); } else { video.requestFullscreen().catch(err => { console.error('无法全屏:', err); }); } handled = true; break; case 'm': case 'M': // M键 - 静音 video.muted = !video.muted; showToast(video.muted ? '🔇 静音' : '🔊 取消静音'); handled = true; break; } if (handled) { e.preventDefault(); e.stopPropagation(); } } // 移除旧的监听器(如果存在) if (window.videoSeekControlListener) { document.removeEventListener('keydown', window.videoSeekControlListener); } // 添加新的监听器 window.videoSeekControlListener = handleKeyPress; document.addEventListener('keydown', handleKeyPress, true); console.log('✅ 键盘控制已激活!'); // 显示启动提示 showToast('⌨️ 键盘控制已启动'); })();