// ==UserScript== // @name HTML5视频手势 // @namespace http://tampermonkey.net/ // @version 68.02 // @description 集多家之长的手机浏览器触摸手势插件,让网页播放器像软件一样好用。 // @author Gemini & 仙 // @license MIT // @match *://*/* // @grant GM_addStyle // @grant GM_setClipboard // @grant GM_registerMenuCommand // @grant GM_unregisterMenuCommand // @grant GM_setValue // @grant GM_getValue // @run-at document-start // @downloadURL none // ==/UserScript== (function() { 'use strict'; const CFG = { minDist: 10, longPress: 500, rateBase: 2.0, senseX: 0.25, senseY: 1.0, progressBarColor: '#FF6699', uiTimeout: 2500, maxScale: 8.0, senseRate: 0.015 }; let seekSec = GM_getValue('gt_seek_sec', 10); let seekMode = GM_getValue('gt_seek_mode', 'sec'); let fpsMode = GM_getValue('gt_fps', 30); let state = { isScreenLocked: false, pinchMode: 'speed', scale: 1.0, panX: 0, panY: 0 }; let startX, startY, initVol, initTime, initRate, targetV, targetP, isTouch = false, action = null, lpTimer = null, toastTimer = null, lastTapTime = 0, tapCount = 0, uiTimer = null; let activeSeekSide = null, seekAccumulator = 0, seekSessionTimer = null, wasPlayingBeforeSequence = false; let initPinchDist = 0, initScale = 1.0, initPanX = 0, initPanY = 0, initSpeed = 1.0, initCenterX = 0, initCenterY = 0, originDx = 0, originDy = 0; let blockGestureUntil = 0; let enforceStateUntil = 0; let enforceTarget = null; window.addEventListener('message', (e) => { if (e.data && e.data.type === 'gt_lock_orientation') { if (screen.orientation && screen.orientation.lock) screen.orientation.lock(e.data.dir).catch(()=>{}); } else if (e.data && e.data.type === 'gt_unlock_orientation') { if (screen.orientation && screen.orientation.unlock) screen.orientation.unlock(); } }); const VIP_SELECTORS = '.video-js, .vjs-custom-skin, .player-container, .art-video-player, .xgplayer, .tcplayer, .prism-player, .mui-player, [data-testid="videoComponent"], [data-testid="video-container"], .player-wrapper, .one-video-player_display-w, .one-video-player, vk-video-player, [aria-label="Видео плеер"], [aria-label="Video Player"], .plyr, #html5video, #movie_player, .html5-video-player, .bpx-player-container, .dplayer, .artplayer-app, .MacPlayer, .ckplayer, #playleft, iframe'; const IGNORE_TOUCH_SELECTORS = '.gt-btn-base, .dplayer-controller, .dplayer-bar-wrap, .vjs-control-bar, .art-bottom, .art-controls, .bpx-player-control-wrap, .plyr__controls, .xgplayer-controls, .tcplayer-controls, .prism-controlbar, .mui-player-controls, .wrapper-bottom, [data-testid="player_controls"], [data-testid="progress_bar"], [data-testid="volume-slider"], input[type="range"], .buttons-bar, .progress-bar-container'; const findUp = (el, selector) => { while (el && el !== document.body && el !== document.documentElement) { if (el.matches && el.matches(selector)) return el; el = el.parentNode || el.host; } return null; }; const isExcludedZone = (e) => { const path = (typeof e.composedPath === 'function') ? e.composedPath() : []; if (path.length > 0) { for (let el of path) { if (el.matches && el.matches(IGNORE_TOUCH_SELECTORS)) return true; } return false; } return !!findUp(e.target, IGNORE_TOUCH_SELECTORS); }; const getValidPlayerRoot = (video) => { let current = video.parentNode || (video.getRootNode && video.getRootNode().host) || video; let bestMatch = null; let fallbackMatch = null; let depth = 0; while (current && current !== document.body && current !== document.documentElement && depth < 15) { if (current.getBoundingClientRect) { const rect = current.getBoundingClientRect(); if (rect.width > 50 && rect.height > 50) { if (!fallbackMatch) fallbackMatch = current; if (current.matches && current.matches(VIP_SELECTORS)) { bestMatch = current; } } } current = current.parentNode || current.host; depth++; } return bestMatch || fallbackMatch || video.parentNode || video; }; const findDeepVid = (root) => { if (!root) return null; let v = root.querySelector ? root.querySelector('video') : null; if (v) return v; let els = root.querySelectorAll ? root.querySelectorAll('*') : []; for (let el of els) { if (el.shadowRoot) { v = findDeepVid(el.shadowRoot); if (v) return v; } } return null; }; const hijackFullscreenAPI = () => { const fsMethods = ['requestFullscreen', 'webkitRequestFullscreen', 'mozRequestFullScreen', 'msRequestFullscreen']; fsMethods.forEach(method => { if (Element.prototype[method]) { const originalMethod = Element.prototype[method]; Element.prototype[method] = function(...args) { let target = this; if (this.tagName === 'VIDEO') { const isNaked = !this.parentNode.classList?.contains('gt-video-wrapper') && !findUp(this.parentNode, VIP_SELECTORS.replace(', iframe', '')); if (isNaked) { target = this.parentNode; target.classList.add('gt-fullscreen-active'); } } const promise = originalMethod.apply(target, args); let v = target.tagName === 'VIDEO' ? target : findDeepVid(target); if (!v) v = findDeepVid(document); if (v && screen.orientation && screen.orientation.lock) { const dir = (v.videoWidth === 0 || v.videoWidth >= v.videoHeight) ? 'landscape' : 'portrait'; screen.orientation.lock(dir).catch(()=>{ try { window.top.postMessage({ type: 'gt_lock_orientation', dir: dir }, '*'); } catch(err){} }); } return promise; }; } }); }; hijackFullscreenAPI(); const toggleNativeFullscreen = (container, video) => { const isFS = !!(document.fullscreenElement || document.webkitFullscreenElement) || container.classList.contains('gt-fullscreen-active'); const fsBtn = container.querySelector('.art-icon-fullscreenOn, .art-control-fullscreen, .dplayer-full-icon, .plyr__control[data-plyr="fullscreen"], .vjs-fullscreen-control, .xgplayer-fullscreen, .tcplayer-fullscreen-btn, .prism-fullscreen-btn, [aria-label*="全屏"], [title*="全屏"], .fullscreen-btn, .bilibili-player-video-btn-fullscreen'); if (isFS) { if (fsBtn) { try { fsBtn.click(); } catch(e){} } if (document.exitFullscreen) document.exitFullscreen().catch(()=>{}); else if (document.webkitExitFullscreen) document.webkitExitFullscreen(); container.classList.remove('gt-fullscreen-active'); if (screen.orientation?.unlock) { screen.orientation.unlock(); try { window.top.postMessage({ type: 'gt_unlock_orientation' }, '*'); } catch(e){} } } else { const forceLockLandscape = () => { let dir = 'landscape'; if (video && video.videoWidth > 0 && video.videoHeight > 0) { dir = (video.videoWidth < video.videoHeight) ? 'portrait' : 'landscape'; } if (screen.orientation?.lock) { screen.orientation.lock(dir).catch(()=>{ try { window.top.postMessage({ type: 'gt_lock_orientation', dir: dir }, '*'); } catch(err){} }); } else { try { window.top.postMessage({ type: 'gt_lock_orientation', dir: dir }, '*'); } catch(err){} } }; if (fsBtn) { try { fsBtn.click(); } catch(e){} } container.classList.add('gt-fullscreen-active'); const reqFs = container.requestFullscreen || container.webkitRequestFullscreen || container.mozRequestFullScreen; if (reqFs) { const p = reqFs.call(container); if (p && p.then) { p.then(() => setTimeout(forceLockLandscape, 150)).catch(()=>{ if (video.webkitEnterFullscreen) video.webkitEnterFullscreen(); setTimeout(forceLockLandscape, 150); }); } else { setTimeout(forceLockLandscape, 150); } } else if (video.webkitEnterFullscreen) { video.webkitEnterFullscreen(); setTimeout(forceLockLandscape, 150); } } }; const showMsg = (txt) => { let uiLayer = null; if (targetP) { if (targetP.shadowRoot) uiLayer = targetP.shadowRoot.querySelector('.gt-ui-layer'); if (!uiLayer) uiLayer = targetP.querySelector('.gt-ui-layer'); } let t; if (uiLayer) { t = uiLayer.querySelector('.gt-toast'); if (!t) { t = document.createElement('div'); t.className = 'gt-toast'; uiLayer.appendChild(t); } t.style.position = 'absolute'; } else { t = document.getElementById('gt-toast-global'); if (!t) { t = document.createElement('div'); t.id = 'gt-toast-global'; t.className = 'gt-toast'; document.body.appendChild(t); } t.style.position = 'fixed'; t.style.zIndex = '2147483647'; } t.innerText = txt; t.classList.add('show'); clearTimeout(toastTimer); toastTimer = setTimeout(() => t.classList.remove('show'), 800); }; GM_registerMenuCommand('🔗 拷贝视频源(直链/页面)', () => { if (sniffedUrl) { GM_setClipboard(sniffedUrl); showMsg('已复制嗅探流媒体直链'); return; } let v = targetV || findDeepVid(document); if (!v) { showMsg('未找到视频元素'); return; } let src = v.src; if (!src || src.startsWith('blob:')) { const s = v.querySelector('source'); if (s && s.src) src = s.src; } if (src && !src.startsWith('blob:')) { GM_setClipboard(src); showMsg('已复制视频直链'); } else { GM_setClipboard(window.location.href); showMsg('已复制网页源地址'); } }); let menuIdResume = null; const updateResumeMenu = () => { let resume = GM_getValue('gt_resume_playback', true); if (menuIdResume !== null) { GM_unregisterMenuCommand(menuIdResume); } const title = resume ? '🟢 [已开启] 从历史位置播放' : '⚪ [已关闭] 从历史位置播放'; menuIdResume = GM_registerMenuCommand(title, () => { GM_setValue('gt_resume_playback', !resume); showMsg(`历史位置恢复已${!resume ? '开启' : '关闭'}`); updateResumeMenu(); }); }; updateResumeMenu(); const toggleAdBlockStyles = (enable) => { let styleEl = document.getElementById('gt-adblock-style'); if (enable) { if (!styleEl) { styleEl = document.createElement('style'); styleEl.id = 'gt-adblock-style'; styleEl.textContent = ` .dplayer-pause-ad, .dplayer-notice, .dplayer-ad, .artplayer-plugin-ads, .art-ad, .art-notice, .play-ad, .pause-ad, .player-ad, .ad-box, .ad-mask, .pause-html, #pause-html, [class*="pause-html"], [id*="pause-html"], [class*="pause-ad"], [id*="pause-ad"], [class*="play-ad"], [id*="play-ad"], [class*="ad_box"], [id*="ad_box"], [class*="ad-wrap"], [id*="ad-wrap"], [class*="player_ad"], [id*="player_ad"], [id*="player_pause"], [class*="player_pause"], [title*="关闭广告"], [title*="广告"], a[href*="mms0.baidu.com"], img[src*="mms0.baidu.com"] { display: none !important; pointer-events: none !important; opacity: 0 !important; z-index: -2147483648 !important; width: 0 !important; height: 0 !important; } `; (document.head || document.documentElement).appendChild(styleEl); } } else { if (styleEl) styleEl.remove(); } }; let menuIdAdBlock = null; const updateAdBlockMenu = () => { let blockAds = GM_getValue('gt_block_ads', true); if (menuIdAdBlock !== null) { GM_unregisterMenuCommand(menuIdAdBlock); } const title = blockAds ? '🟢 [已开启] 拦截暂停广告' : '⚪ [已关闭] 拦截暂停广告'; menuIdAdBlock = GM_registerMenuCommand(title, () => { GM_setValue('gt_block_ads', !blockAds); toggleAdBlockStyles(!blockAds); showMsg(`暂停广告拦截已${!blockAds ? '开启' : '关闭'}`); updateAdBlockMenu(); }); }; toggleAdBlockStyles(GM_getValue('gt_block_ads', true)); updateAdBlockMenu(); const getVideoKey = (v) => { let route = window.location.host + window.location.pathname + window.location.search + window.location.hash; if (v.duration && !isNaN(v.duration) && v.duration !== Infinity) { route += '_' + Math.floor(v.duration); } return route; }; const saveProgress = (v) => { if (!v || isNaN(v.duration) || v.duration <= 5 || v.currentTime < 2) return; const key = getVideoKey(v); let history = GM_getValue('gt_video_history', {}); history[key] = { t: Math.floor(v.currentTime), ts: Date.now() }; const keys = Object.keys(history); if (keys.length > 1000) { keys.sort((a, b) => history[b].ts - history[a].ts); let newHistory = {}; for (let i = 0; i < 1000; i++) { newHistory[keys[i]] = history[keys[i]]; } history = newHistory; } GM_setValue('gt_video_history', history); }; let sniffedUrl = ''; const mediaReg = /\.(m3u8|mpd|mp4|webm|flv)(\?|$)/i; const sniff = (url) => { try { if (url && typeof url === 'string' && mediaReg.test(url) && url.startsWith('http')) sniffedUrl = url; } catch(e){} }; const oFetch = window.fetch; window.fetch = function(...args) { try { let u = typeof args[0] === 'string' ? args[0] : (args[0] && args[0].url ? args[0].url : ''); sniff(u); } catch(e){} return oFetch.apply(window, args); }; const oOpen = XMLHttpRequest.prototype.open; XMLHttpRequest.prototype.open = function(method, url, ...rest) { try { sniff(url); } catch(e){} return oOpen.call(this, method, url, ...rest); }; const toggleOrientation = () => { if (!screen.orientation) return; const dir = screen.orientation.type.startsWith('landscape') ? 'portrait' : 'landscape'; if (screen.orientation.lock) { screen.orientation.lock(dir).catch(()=>{ try { window.top.postMessage({ type: 'gt_lock_orientation', dir: dir }, '*'); } catch(e){} }); } }; const UI_COMPONENTS_CSS = ` .gt-ui-layer { position: absolute !important; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none !important; z-index: 2147483647 !important; } .gt-mini-progress { position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: rgba(255,255,255,0.2); z-index: 2147483640; pointer-events: none; overflow: hidden; opacity: 0.9; transition: height 0.2s, opacity 0.3s; box-shadow: 0 -1px 1px rgba(0,0,0,0.2); } .gt-mini-progress .gt-fill { height: 100%; width: 0%; background: ${CFG.progressBarColor}; transition: width 0.1s linear; box-shadow: 0 0 4px ${CFG.progressBarColor}; } :fullscreen .gt-mini-progress, .gt-fullscreen-active .gt-mini-progress { height: 3px !important; } .gt-lock-shield { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2147483645; background: rgba(0,0,0,0); touch-action: none; display: none; pointer-events: auto; } :fullscreen .gt-lock-shield, .gt-fullscreen-active .gt-lock-shield { position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important; } .gt-btn-base { position: absolute; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; z-index: 2147483647; opacity: 0; pointer-events: none; transition: opacity 0.3s ease, transform 0.15s ease; border: none; background: transparent; color: rgba(255, 255, 255, 0.95); filter: drop-shadow(0px 2px 4px rgba(0,0,0,0.8)); } .gt-btn-base * { pointer-events: none !important; } .gt-btn-base svg { width: 15px; height: 15px; transition: all 0.2s ease; transform-origin: center center; fill: none !important; stroke: currentColor !important; stroke-width: 2 !important; stroke-linecap: round !important; stroke-linejoin: round !important; } .gt-btn-base svg * { fill: none !important; stroke: currentColor !important; stroke-width: 2 !important; stroke-linecap: round !important; stroke-linejoin: round !important; } .gt-btn-base span { font-size: 11px; font-weight: 800; font-family: system-ui; letter-spacing: 0.5px; transform-origin: center center; display: inline-block; } .gt-ui-visible .gt-btn-base { opacity: 0.65 !important; pointer-events: auto !important; } .gt-ui-visible .gt-btn-base.hidden-by-state { display: none !important; pointer-events: none !important; } .gt-btn-base:active { opacity: 0.9 !important; color: #fff; } .gt-rotate-btn { top: 10px; left: 10px; } .gt-seek-mode-btn { top: calc(10px + 32px); left: 10px; } .gt-seek-val-btn { top: calc(10px + 64px); left: 10px; } .gt-fit-btn { top: calc(10px + 96px); left: 10px; } .gt-shot-btn { top: calc(10px + 128px); left: 10px; } .gt-reset-speed-btn { top: calc(10px + 160px); left: 10px; } .gt-pip-btn { top: 10px; right: 10px; } .gt-lock-btn { top: calc(50% - 32px); right: 10px; transform: translateY(-50%); } .gt-mode-btn { top: calc(50% + 32px); right: 10px; transform: translateY(-50%); } .gt-reset-zoom-btn { top: calc(50% + 72px); right: 10px; transform: translateY(-50%); } :fullscreen .gt-btn-base, .gt-fullscreen-active .gt-btn-base { width: 38px; height: 38px; } :fullscreen .gt-ui-visible .gt-btn-base, .gt-fullscreen-active .gt-ui-visible .gt-btn-base { opacity: 0.5 !important; } :fullscreen .gt-btn-base svg, .gt-fullscreen-active .gt-btn-base svg { width: 22px; height: 22px; } :fullscreen .gt-btn-base span, .gt-fullscreen-active .gt-btn-base span { font-size: 14px; } :fullscreen .gt-rotate-btn, .gt-fullscreen-active .gt-rotate-btn { top: 20px; left: 20px; } :fullscreen .gt-seek-mode-btn, .gt-fullscreen-active .gt-seek-mode-btn { top: calc(20px + 60px); left: 20px; } :fullscreen .gt-seek-val-btn, .gt-fullscreen-active .gt-seek-val-btn { top: calc(20px + 120px); left: 20px; } :fullscreen .gt-fit-btn, .gt-fullscreen-active .gt-fit-btn { top: calc(20px + 180px); left: 20px; } :fullscreen .gt-shot-btn, .gt-fullscreen-active .gt-shot-btn { top: calc(20px + 240px); left: 20px; } :fullscreen .gt-reset-speed-btn, .gt-fullscreen-active .gt-reset-speed-btn { top: calc(20px + 300px); left: 20px; } :fullscreen .gt-pip-btn, .gt-fullscreen-active .gt-pip-btn { top: 20px; right: 20px; } :fullscreen .gt-lock-btn, .gt-fullscreen-active .gt-lock-btn { top: calc(50% - 35px); right: 20px; } :fullscreen .gt-mode-btn, .gt-fullscreen-active .gt-mode-btn { top: calc(50% + 35px); right: 20px; } :fullscreen .gt-reset-zoom-btn, .gt-fullscreen-active .gt-reset-zoom-btn { top: calc(50% + 85px); right: 20px; } .gt-seek-msg { position: absolute !important; top: 50% !important; color: rgba(255, 255, 255, 0.95) !important; z-index: 2147483647 !important; pointer-events: none !important; opacity: 0; transition: opacity 0.15s ease-out; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: center !important; gap: 6px !important; font-family: system-ui, -apple-system, sans-serif !important; white-space: nowrap !important; text-shadow: 0 0 10px rgba(0,0,0,0.8), 0 0 4px rgba(0,0,0,0.6), 0 2px 4px rgba(0,0,0,0.5) !important; } .gt-seek-msg.left { left: 15%; transform: translateY(-50%); } .gt-seek-msg.right { right: 15%; transform: translateY(-50%); } .gt-seek-msg.show { opacity: 1; } .gt-seek-text { display: block !important; font-size: 15px !important; font-weight: 500 !important; line-height: 1 !important; white-space: nowrap !important; transform-origin: center center !important; will-change: transform; } .gt-arrows { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: center !important; font-size: 22px !important; font-weight: 400 !important; line-height: 1 !important; } .gt-arrows span { display: block !important; line-height: 1 !important; white-space: nowrap !important; } .gt-pop-anim { animation: gt-pop 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275); } @keyframes gt-pop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } } .gt-arrow-slide-r { animation: gt-slide-r 0.6s infinite; } @keyframes gt-slide-r { 0% { transform: translateX(-4px); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateX(4px); opacity: 0; } } .gt-arrow-slide-l { animation: gt-slide-l 0.6s infinite; } @keyframes gt-slide-l { 0% { transform: translateX(4px); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateX(-4px); opacity: 0; } } .gt-toast { position: absolute; top: 10%; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.15); color: #fff; padding: 4px 10px; border-radius: 4px; font: 700 14px system-ui; z-index: 2147483647; pointer-events: none; opacity: 0; transition: opacity 0.2s; text-shadow: 0 0 2px #000; border: 1px solid rgba(255,255,255,0.05); } .gt-toast.show { opacity: 1; } `; GM_addStyle(` :fullscreen { background-color: #000 !important; } #gt-toast-global { position: fixed; top: 10%; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.15); color: #fff; padding: 4px 10px; border-radius: 4px; font: 700 14px system-ui; z-index: 2147483647; pointer-events: none; opacity: 0; transition: opacity 0.2s; text-shadow: 0 0 2px #000; border: 1px solid rgba(255,255,255,0.05); } #gt-toast-global.show { opacity: 1; } `); const SVG_LOCK = ``; const SVG_UNLOCK = ``; const SVG_SPEED = ``; const SVG_ZOOM = ``; const SVG_RESET_ZOOM = ``; const SVG_SEC = ``; const SVG_FRAME = ``; const SVG_FIT = ``; const SVG_SHOT = ``; const SVG_PIP = ``; const getFS = () => document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement; const identify = (e) => { let targetVideo = null; let rootContainer = null; let cx = e.clientX, cy = e.clientY; if (e.touches && e.touches.length > 0) { cx = e.touches[0].clientX; cy = e.touches[0].clientY; } else if (e.changedTouches && e.changedTouches.length > 0) { cx = e.changedTouches[0].clientX; cy = e.changedTouches[0].clientY; } if (cx !== undefined && cy !== undefined) { let currentRoot = document; while (currentRoot) { let els = currentRoot.elementsFromPoint(cx, cy) || []; for (let el of els) { if (el.tagName === 'VIDEO') { targetVideo = el; break; } } if (targetVideo) break; let nextRoot = null; for (let el of els) { if (el.shadowRoot) { nextRoot = el.shadowRoot; break; } } currentRoot = nextRoot; } } if (!targetVideo) { const findDeepVid = (root) => { let v = root.querySelector('video'); if (v) { const r = v.getBoundingClientRect(); if (r.width > 0 && cx >= r.left - 10 && cx <= r.right + 10 && cy >= r.top - 10 && cy <= r.bottom + 10) return v; } for (let el of root.querySelectorAll('*')) { if (el.shadowRoot) { v = findDeepVid(el.shadowRoot); if (v) return v; } } return null; }; targetVideo = findDeepVid(document); } if (!targetVideo) return null; if (targetVideo.gtRoot && document.contains(targetVideo.gtRoot)) { rootContainer = targetVideo.gtRoot; } else { rootContainer = getValidPlayerRoot(targetVideo); if (rootContainer && rootContainer !== document.body && rootContainer !== document.documentElement) { targetVideo.gtRoot = rootContainer; } } if (!rootContainer || rootContainer === document.body || rootContainer === document.documentElement) return null; return { root: rootContainer, video: targetVideo, isNaked: (!rootContainer.classList?.contains('gt-video-wrapper') && !findUp(rootContainer, VIP_SELECTORS.replace(', iframe', ''))) }; }; let activeUIEl = null; const updateUIState = (root, video) => { if(!root) return; let uiLayer = null; if (root.shadowRoot) uiLayer = root.shadowRoot.querySelector('.gt-ui-layer'); if (!uiLayer) uiLayer = root.querySelector('.gt-ui-layer'); if(!uiLayer) return; const btnLock = uiLayer.querySelector('.gt-lock-btn'), btnMode = uiLayer.querySelector('.gt-mode-btn'), btnRot = uiLayer.querySelector('.gt-rotate-btn'), btnRst = uiLayer.querySelector('.gt-reset-speed-btn'), btnZoomRst = uiLayer.querySelector('.gt-reset-zoom-btn'), btnSeekMode = uiLayer.querySelector('.gt-seek-mode-btn'), btnSeekVal = uiLayer.querySelector('.gt-seek-val-btn'), btnFit = uiLayer.querySelector('.gt-fit-btn'), btnShot = uiLayer.querySelector('.gt-shot-btn'), btnPip = uiLayer.querySelector('.gt-pip-btn'), shield = uiLayer.querySelector('.gt-lock-shield'); const isFS = !!getFS() || root.classList.contains('gt-fullscreen-active'); if(btnLock) btnLock.innerHTML = state.isScreenLocked ? SVG_LOCK : SVG_UNLOCK; if(btnMode) btnMode.innerHTML = state.pinchMode === 'speed' ? SVG_SPEED : SVG_ZOOM; if(btnSeekMode) btnSeekMode.innerHTML = seekMode === 'sec' ? SVG_SEC : SVG_FRAME; if(btnSeekVal) btnSeekVal.innerHTML = `${seekMode === 'sec' ? seekSec + 's' : fpsMode + 'f'}`; if(btnFit) btnFit.innerHTML = SVG_FIT; if(btnShot) btnShot.innerHTML = SVG_SHOT; if(btnPip) btnPip.innerHTML = SVG_PIP; if (state.isScreenLocked) { if(shield) shield.style.display = 'block'; [btnMode, btnRot, btnRst, btnZoomRst, btnSeekMode, btnSeekVal, btnFit, btnShot, btnPip].forEach(b => b?.classList.add('hidden-by-state')); } else { if(shield) shield.style.display = 'none'; [btnMode, btnSeekMode, btnSeekVal, btnFit, btnShot, btnPip].forEach(b => b?.classList.remove('hidden-by-state')); if(btnRot) { if(isFS) btnRot.classList.remove('hidden-by-state'); else btnRot.classList.add('hidden-by-state'); } if(btnRst) { if(video && video.playbackRate !== 1.0) btnRst.classList.remove('hidden-by-state'); else btnRst.classList.add('hidden-by-state'); } if(btnZoomRst) { if(state.scale > 1.0) btnZoomRst.classList.remove('hidden-by-state'); else btnZoomRst.classList.add('hidden-by-state'); } } }; const wakeUpUI = (root, video) => { if (!root) return; let uiLayer = null; if (root.shadowRoot) uiLayer = root.shadowRoot.querySelector('.gt-ui-layer'); if (!uiLayer) uiLayer = root.querySelector('.gt-ui-layer'); if(!uiLayer) return; if (activeUIEl && activeUIEl !== uiLayer) activeUIEl.classList.remove('gt-ui-visible'); activeUIEl = uiLayer; uiLayer.classList.add('gt-ui-visible'); updateUIState(root, video); if (uiTimer) clearTimeout(uiTimer); uiTimer = setTimeout(() => { if (activeUIEl) activeUIEl.classList.remove('gt-ui-visible'); activeUIEl = null; }, CFG.uiTimeout); }; const hideUI = (root) => { if (!root) return; let uiLayer = null; if (root.shadowRoot) uiLayer = root.shadowRoot.querySelector('.gt-ui-layer'); if (!uiLayer) uiLayer = root.querySelector('.gt-ui-layer'); if(uiLayer) { uiLayer.classList.remove('gt-ui-visible'); if (activeUIEl === uiLayer) activeUIEl = null; } if (uiTimer) clearTimeout(uiTimer); }; const applyTransform = () => { if(!targetV) return; if (state.scale <= 1.05) { state.scale = 1.0; state.panX = 0; state.panY = 0; } else { const mX = (targetV.clientWidth * state.scale - targetV.clientWidth) / 2, mY = (targetV.clientHeight * state.scale - targetV.clientHeight) / 2; state.panX = Math.max(-mX, Math.min(mX, state.panX)); state.panY = Math.max(-mY, Math.min(mY, state.panY)); } targetV.style.setProperty('transition', 'none', 'important'); targetV.style.setProperty('will-change', 'transform', 'important'); targetV.style.transform = `translate(${state.panX}px, ${state.panY}px) scale(${state.scale})`; }; let pendingRate = null; let lastRateUpdateTime = 0; const setRateThrottled = (v, rate) => { pendingRate = rate; const now = Date.now(); if (now - lastRateUpdateTime > 150) { v.playbackRate = pendingRate; lastRateUpdateTime = now; pendingRate = null; } }; const bindTap = (btn, handler) => { let lastExec = 0; const wrap = (e) => { e.stopPropagation(); e.stopImmediatePropagation(); if (e.type === 'touchend' && e.cancelable) e.preventDefault(); const now = Date.now(); if (now - lastExec < 300) return; lastExec = now; handler(e); const icon = btn.querySelector('svg') || btn.querySelector('span'); if (icon) { icon.classList.remove('gt-pop-anim'); void icon.offsetWidth; icon.classList.add('gt-pop-anim'); } }; btn.addEventListener('touchend', wrap, {passive: false, capture: true}); btn.addEventListener('click', wrap, {capture: true}); ['touchstart', 'mousedown', 'pointerdown', 'contextmenu', 'dblclick'].forEach(evt => { btn.addEventListener(evt, (e)=>{e.stopPropagation(); e.stopImmediatePropagation();}, { capture: true, passive: false }); }); }; const buildUI = (root, video) => { let uiLayer = document.createElement('div'); uiLayer.className = 'gt-ui-layer'; const styleEl = document.createElement('style'); styleEl.textContent = UI_COMPONENTS_CSS; uiLayer.appendChild(styleEl); const bar = document.createElement('div'); bar.className = 'gt-mini-progress'; bar.innerHTML = '
'; uiLayer.appendChild(bar); const shield = document.createElement('div'); shield.className = 'gt-lock-shield'; const blk = (e) => { e.preventDefault(); e.stopPropagation(); e.stopImmediatePropagation(); wakeUpUI(root, video); }; ['click', 'mousedown', 'mouseup', 'pointerdown', 'pointerup', 'dblclick', 'touchstart', 'touchend'].forEach(evt => shield.addEventListener(evt, blk, {capture:true, passive:false})); uiLayer.appendChild(shield); const rBtn = document.createElement('div'); rBtn.className = 'gt-btn-base gt-rotate-btn'; rBtn.innerHTML = ``; bindTap(rBtn, () => { toggleOrientation(); wakeUpUI(root, video); }); uiLayer.appendChild(rBtn); const smBtn = document.createElement('div'); smBtn.className = 'gt-btn-base gt-seek-mode-btn'; bindTap(smBtn, () => { seekMode = seekMode === 'sec' ? 'frame' : 'sec'; GM_setValue('gt_seek_mode', seekMode); updateUIState(root, video); showMsg(`切换为: ${seekMode==='sec'?'按秒':'按帧'}`); wakeUpUI(root, video); }); uiLayer.appendChild(smBtn); const svBtn = document.createElement('div'); svBtn.className = 'gt-btn-base gt-seek-val-btn'; bindTap(svBtn, () => { if(seekMode==='sec'){ const a=[10,15,30,1,5]; seekSec=a[(a.indexOf(seekSec)+1)%a.length]; GM_setValue('gt_seek_sec', seekSec); showMsg(`步进: ${seekSec}s`);} else { fpsMode=fpsMode===30?60:30; GM_setValue('gt_fps', fpsMode); showMsg(`帧率: ${fpsMode}`);} updateUIState(root, video); wakeUpUI(root, video); }); uiLayer.appendChild(svBtn); const fitBtn = document.createElement('div'); fitBtn.className = 'gt-btn-base gt-fit-btn'; fitBtn.innerHTML = SVG_FIT; bindTap(fitBtn, () => { const fits = ['contain', 'cover', 'fill']; const current = video.style.objectFit || 'contain'; const next = fits[(fits.indexOf(current) + 1) % fits.length]; video.style.objectFit = next; showMsg(next === 'cover' ? '画面: 铺满裁切' : (next === 'fill' ? '画面: 暴力拉伸' : '画面: 原始比例')); wakeUpUI(root, video); }); uiLayer.appendChild(fitBtn); const shotBtn = document.createElement('div'); shotBtn.className = 'gt-btn-base gt-shot-btn'; shotBtn.innerHTML = SVG_SHOT; bindTap(shotBtn, () => { try { const canvas = document.createElement('canvas'); canvas.width = video.videoWidth; canvas.height = video.videoHeight; canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height); const dataURL = canvas.toDataURL('image/png'); const a = document.createElement('a'); a.href = dataURL; a.download = `Screenshot_${Math.floor(Date.now()/1000)}.png`; a.click(); showMsg('截图已保存'); } catch (e) { showMsg('截图失败: 跨域限制'); } wakeUpUI(root, video); }); uiLayer.appendChild(shotBtn); if (document.pictureInPictureEnabled) { const pipBtn = document.createElement('div'); pipBtn.className = 'gt-btn-base gt-pip-btn'; pipBtn.innerHTML = SVG_PIP; bindTap(pipBtn, () => { if (document.pictureInPictureElement) document.exitPictureInPicture(); else video.requestPictureInPicture().catch(() => showMsg('小窗启动失败')); wakeUpUI(root, video); }); uiLayer.appendChild(pipBtn); } const lBtn = document.createElement('div'); lBtn.className = 'gt-btn-base gt-lock-btn'; bindTap(lBtn, () => { state.isScreenLocked = !state.isScreenLocked; if(state.isScreenLocked){ const r=video.getBoundingClientRect(); const clk=new MouseEvent('click', {bubbles:true, cancelable:true, clientX:r.left+r.width/2, clientY:r.top+r.height/2}); video.dispatchEvent(clk); } wakeUpUI(root, video); }); uiLayer.appendChild(lBtn); const mBtn = document.createElement('div'); mBtn.className = 'gt-btn-base gt-mode-btn'; bindTap(mBtn, () => { state.pinchMode = state.pinchMode==='speed'?'zoom':'speed'; wakeUpUI(root, video); showMsg(state.pinchMode==='speed'?'双指: 变速':'双指: 缩平移'); }); uiLayer.appendChild(mBtn); const rstBtn = document.createElement('div'); rstBtn.className = 'gt-btn-base gt-reset-speed-btn'; rstBtn.innerHTML = `1.0x`; bindTap(rstBtn, () => { video.playbackRate = 1.0; showMsg('恢复原速'); wakeUpUI(root, video); }); uiLayer.appendChild(rstBtn); const zoomRstBtn = document.createElement('div'); zoomRstBtn.className = 'gt-btn-base gt-reset-zoom-btn'; zoomRstBtn.innerHTML = SVG_RESET_ZOOM; bindTap(zoomRstBtn, () => { state.scale = 1.0; state.panX = 0; state.panY = 0; if (video.parentNode && video.parentNode.dataset.gtOverflow) { video.parentNode.style.overflow = video.parentNode.dataset.gtOverflow; } if (video) video.style.transform = `translate(0px, 0px) scale(1)`; showMsg('恢复大小'); wakeUpUI(root, video); }); uiLayer.appendChild(zoomRstBtn); if (root.shadowRoot) { root.shadowRoot.appendChild(uiLayer); } else { const style = window.getComputedStyle(root); if (style.position === 'static') root.style.position = 'relative'; root.appendChild(uiLayer); } return uiLayer; }; const checkAndBuildUI = (root, video) => { let uiLayer = root.shadowRoot ? root.shadowRoot.querySelector('.gt-ui-layer') : root.querySelector('.gt-ui-layer'); if (!uiLayer) { uiLayer = buildUI(root, video); } return uiLayer; }; const setupPlayer = (video) => { if (!video) return false; const root = getValidPlayerRoot(video); if (!root || root === document.body || root === document.documentElement) return false; video.style.setProperty('touch-action', 'none', 'important'); video.style.setProperty('overscroll-behavior', 'none', 'important'); video.style.setProperty('transition', 'none', 'important'); video.style.setProperty('will-change', 'transform', 'important'); root.style.setProperty('touch-action', 'none', 'important'); root.style.setProperty('overscroll-behavior', 'none', 'important'); const isNaked = (!root.classList?.contains('gt-video-wrapper') && !findUp(root, VIP_SELECTORS.replace(', iframe', ''))); if (isNaked) video.setAttribute('controlslist', 'nofullscreen'); if (!video.dataset.gtSetupDone) { video.dataset.gtSetupDone = 'true'; video.gtRoot = root; const tryRestore = () => { if (GM_getValue('gt_resume_playback', true)) { const key = getVideoKey(video); const history = GM_getValue('gt_video_history', {}); const targetT = history[key] ? history[key].t : 0; if (targetT > 3 && targetT < video.duration - 5) { video.currentTime = targetT; showMsg(`已恢复至 ${Math.floor(targetT/60)}:${(targetT%60+'').padStart(2,'0')}`); const guardReset = () => { if (video.currentTime < 2) { video.currentTime = targetT; video.removeEventListener('timeupdate', guardReset); } }; video.addEventListener('timeupdate', guardReset); setTimeout(() => video.removeEventListener('timeupdate', guardReset), 2500); } } }; if (video.readyState >= 1) { setTimeout(tryRestore, 200); } else { video.addEventListener('loadedmetadata', () => setTimeout(tryRestore, 200), {once: true}); } let lastSaveTime = 0; video.addEventListener('timeupdate', () => { if (Math.abs(video.currentTime - lastSaveTime) > 5) { saveProgress(video); lastSaveTime = video.currentTime; } let uiLayer = checkAndBuildUI(root, video); if (uiLayer) { const fill = uiLayer.querySelector('.gt-mini-progress .gt-fill'); if (fill && video.duration) fill.style.width = `${(video.currentTime / video.duration) * 100}%`; } }); const restoreVol = () => { let savedVol = GM_getValue('gt_volume', null); let savedMuted = GM_getValue('gt_is_muted', null); if (savedVol !== null && !isNaN(savedVol)) video.volume = savedVol; if (savedMuted === false && video.muted) video.muted = false; video.removeEventListener('play', restoreVol); video.removeEventListener('touchstart', restoreVol, {capture: true}); }; video.addEventListener('play', restoreVol); video.addEventListener('touchstart', restoreVol, {capture: true, passive: true}); video.addEventListener('volumechange', () => { GM_setValue('gt_volume', video.volume); GM_setValue('gt_is_muted', video.muted); }); video.addEventListener('pause', () => { if (Date.now() < enforceStateUntil && enforceTarget === 'playing') video.play().catch(()=>{}); }); video.addEventListener('play', () => { if (Date.now() < enforceStateUntil && enforceTarget === 'paused') video.pause(); }); } checkAndBuildUI(root, video); return true; }; const getPinchData = (touches) => { const dx = touches[0].clientX - touches[1].clientX, dy = touches[0].clientY - touches[1].clientY; return { dist: Math.hypot(dx, dy), cx: (touches[0].clientX + touches[1].clientX) / 2, cy: (touches[0].clientY + touches[1].clientY) / 2 }; }; const handleAccumulatedSeek = (dir, uiLayer, video) => { activeSeekSide = dir; const stepVal = seekMode === 'sec' ? seekSec : (1 / fpsMode); seekAccumulator += stepVal; video.currentTime = dir === 'left' ? Math.max(0, video.currentTime - stepVal) : Math.min(video.duration || 0, video.currentTime + stepVal); let t = uiLayer.querySelector('#gt-seek-' + dir); if (!t) { t = document.createElement('div'); t.id = 'gt-seek-' + dir; t.className = `gt-seek-msg ${dir}`; uiLayer.appendChild(t); } t.innerHTML = dir === 'left' ? `