视频快进快退+自定义按钮(可拖动+开关+记忆秒数)

可拖动快进快退面板,含自定义输入、开关和秒数记忆,操作window.player.currentTime

// ==UserScript==
// @name         视频快进快退+自定义按钮(可拖动+开关+记忆秒数)
// @namespace    http://tampermonkey.net/
// @version      1.2
// @description  可拖动快进快退面板,含自定义输入、开关和秒数记忆,操作window.player.currentTime
// @author       t.k
// @license      MIT
// @match        *://*/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // 本地存储key
    const PANEL_VISIBLE_KEY = '__jump_panel_visible__';
    const CUSTOM_SECONDS_KEY = '__jump_custom_seconds__';

    // 按钮配置
    const backwardButtons = [
        { label: '⏪10s', offset: -10 },
        { label: '⏪1m', offset: -60 },
        { label: '⏪10m', offset: -600 }
    ];
    const forwardButtons = [
        { label: '⏩10s', offset: 10 },
        { label: '⏩1m', offset: 60 },
        { label: '⏩10m', offset: 600 }
    ];

    // 右上角开关按钮
    const toggleBtn = document.createElement('button');
    toggleBtn.textContent = '快进/快退面板';
    toggleBtn.style.position = 'fixed';
    toggleBtn.style.top = '20px';
    toggleBtn.style.right = '28px';
    toggleBtn.style.zIndex = '999999';
    toggleBtn.style.background = '#222';
    toggleBtn.style.color = '#fff';
    toggleBtn.style.border = 'none';
    toggleBtn.style.borderRadius = '6px';
    toggleBtn.style.padding = '7px 16px';
    toggleBtn.style.cursor = 'pointer';
    toggleBtn.style.fontSize = '15px';
    toggleBtn.style.opacity = '0.5';
    toggleBtn.style.transition = 'opacity 0.2s';
    toggleBtn.onmouseenter = () => toggleBtn.style.opacity = '0.95';
    toggleBtn.onmouseleave = () => toggleBtn.style.opacity = '0.5';
    document.body.appendChild(toggleBtn);

    // 可拖动面板
    const dragContainer = document.createElement('div');
    dragContainer.style.position = 'fixed';
    dragContainer.style.left = '40px';
    dragContainer.style.top = '60px';
    dragContainer.style.zIndex = '999998';
    dragContainer.style.userSelect = 'none';
    dragContainer.style.background = 'rgba(0,0,0,0.05)';
    dragContainer.style.borderRadius = '10px';
    dragContainer.style.padding = '14px 18px 12px 18px';
    dragContainer.style.boxShadow = '0 2px 12px rgba(0,0,0,0.12)';
    dragContainer.style.display = 'inline-block';
    dragContainer.style.backdropFilter = 'blur(2px)';
    dragContainer.style.minWidth = '320px';
    dragContainer.style.fontFamily = 'sans-serif';

    // 拖动逻辑
    let isDragging = false, startX, startY, startLeft, startTop;
    dragContainer.addEventListener('mousedown', function(e) {
        // 只允许在面板空白区拖动
        if (e.target !== dragContainer) return;
        isDragging = true;
        startX = e.clientX;
        startY = e.clientY;
        startLeft = parseInt(dragContainer.style.left);
        startTop = parseInt(dragContainer.style.top);
        e.preventDefault();
    });
    document.addEventListener('mousemove', function(e) {
        if (!isDragging) return;
        dragContainer.style.left = (startLeft + e.clientX - startX) + 'px';
        dragContainer.style.top = (startTop + e.clientY - startY) + 'px';
    });
    document.addEventListener('mouseup', function() {
        isDragging = false;
    });

    // 标题
    const title = document.createElement('div');
    title.textContent = '快进/快退控制';
    title.style.fontWeight = 'bold';
    title.style.fontSize = '16px';
    title.style.marginBottom = '8px';
    title.style.color = '#333';
    dragContainer.appendChild(title);

    // 快退按钮行
    const backRow = document.createElement('div');
    backRow.style.display = 'flex';
    backRow.style.flexDirection = 'row';
    backRow.style.gap = '10px';
    backRow.style.marginBottom = '8px';

    backwardButtons.forEach(({label, offset}) => {
        const btn = document.createElement('button');
        btn.textContent = label;
        btn.style.opacity = '0.3';
        btn.style.background = '#000';
        btn.style.color = '#fff';
        btn.style.border = 'none';
        btn.style.borderRadius = '6px';
        btn.style.padding = '8px 16px';
        btn.style.cursor = 'pointer';
        btn.style.fontSize = '16px';
        btn.style.transition = 'opacity 0.2s';
        btn.onmouseenter = () => btn.style.opacity = '0.7';
        btn.onmouseleave = () => btn.style.opacity = '0.3';
        btn.onclick = () => {
            if (window.player && typeof window.player.currentTime === 'number') {
                let t = window.player.currentTime + offset;
                if (t < 0) t = 0;
                if (window.player.duration && t > window.player.duration) t = window.player.duration;
                window.player.currentTime = t;
            } else {
                alert('window.player.currentTime 不存在!');
            }
        };
        backRow.appendChild(btn);
    });
    dragContainer.appendChild(backRow);

    // 快进按钮行
    const forwardRow = document.createElement('div');
    forwardRow.style.display = 'flex';
    forwardRow.style.flexDirection = 'row';
    forwardRow.style.gap = '10px';
    forwardRow.style.marginBottom = '8px';

    forwardButtons.forEach(({label, offset}) => {
        const btn = document.createElement('button');
        btn.textContent = label;
        btn.style.opacity = '0.3';
        btn.style.background = '#000';
        btn.style.color = '#fff';
        btn.style.border = 'none';
        btn.style.borderRadius = '6px';
        btn.style.padding = '8px 16px';
        btn.style.cursor = 'pointer';
        btn.style.fontSize = '16px';
        btn.style.transition = 'opacity 0.2s';
        btn.onmouseenter = () => btn.style.opacity = '0.7';
        btn.onmouseleave = () => btn.style.opacity = '0.3';
        btn.onclick = () => {
            if (window.player && typeof window.player.currentTime === 'number') {
                let t = window.player.currentTime + offset;
                if (t < 0) t = 0;
                if (window.player.duration && t > window.player.duration) t = window.player.duration;
                window.player.currentTime = t;
            } else {
                alert('window.player.currentTime 不存在!');
            }
        };
        forwardRow.appendChild(btn);
    });
    dragContainer.appendChild(forwardRow);

    // 自定义行
    const customRow = document.createElement('div');
    customRow.style.display = 'flex';
    customRow.style.flexDirection = 'row';
    customRow.style.alignItems = 'center';
    customRow.style.gap = '8px';

    const input = document.createElement('input');
    input.type = 'number';
    input.placeholder = '秒数';
    input.style.width = '70px';
    input.style.padding = '7px';
    input.style.border = '1px solid #aaa';
    input.style.borderRadius = '6px';
    input.style.fontSize = '15px';
    input.style.background = 'rgba(255,255,255,0.7)';
    input.style.color = '#222';

    // 恢复自定义秒数
    const savedSeconds = localStorage.getItem(CUSTOM_SECONDS_KEY);
    if (savedSeconds && !isNaN(savedSeconds)) {
        input.value = savedSeconds;
    }

    // 保存自定义秒数
    input.addEventListener('input', () => {
        if (input.value && !isNaN(input.value)) {
            localStorage.setItem(CUSTOM_SECONDS_KEY, input.value);
        }
    });

    const btnBack = document.createElement('button');
    btnBack.textContent = '⏪自定义';
    btnBack.style.opacity = '0.3';
    btnBack.style.background = '#000';
    btnBack.style.color = '#fff';
    btnBack.style.border = 'none';
    btnBack.style.borderRadius = '6px';
    btnBack.style.padding = '8px 16px';
    btnBack.style.cursor = 'pointer';
    btnBack.style.fontSize = '16px';
    btnBack.style.transition = 'opacity 0.2s';
    btnBack.onmouseenter = () => btnBack.style.opacity = '0.7';
    btnBack.onmouseleave = () => btnBack.style.opacity = '0.3';
    btnBack.onclick = () => {
        const val = parseFloat(input.value);
        if (isNaN(val) || val <= 0) return alert('请输入正数秒数');
        if (window.player && typeof window.player.currentTime === 'number') {
            let t = window.player.currentTime - val;
            if (t < 0) t = 0;
            if (window.player.duration && t > window.player.duration) t = window.player.duration;
            window.player.currentTime = t;
        } else {
            alert('window.player.currentTime 不存在!');
        }
    };

    const btnForward = document.createElement('button');
    btnForward.textContent = '⏩自定义';
    btnForward.style.opacity = '0.3';
    btnForward.style.background = '#000';
    btnForward.style.color = '#fff';
    btnForward.style.border = 'none';
    btnForward.style.borderRadius = '6px';
    btnForward.style.padding = '8px 16px';
    btnForward.style.cursor = 'pointer';
    btnForward.style.fontSize = '16px';
    btnForward.style.transition = 'opacity 0.2s';
    btnForward.onmouseenter = () => btnForward.style.opacity = '0.7';
    btnForward.onmouseleave = () => btnForward.style.opacity = '0.3';
    btnForward.onclick = () => {
        const val = parseFloat(input.value);
        if (isNaN(val) || val <= 0) return alert('请输入正数秒数');
        if (window.player && typeof window.player.currentTime === 'number') {
            let t = window.player.currentTime + val;
            if (t < 0) t = 0;
            if (window.player.duration && t > window.player.duration) t = window.player.duration;
            window.player.currentTime = t;
        } else {
            alert('window.player.currentTime 不存在!');
        }
    };

    customRow.appendChild(input);
    customRow.appendChild(btnBack);
    customRow.appendChild(btnForward);

    dragContainer.appendChild(customRow);

    // 面板显示/隐藏逻辑
    function setPanelVisible(visible) {
        dragContainer.style.display = visible ? 'inline-block' : 'none';
        localStorage.setItem(PANEL_VISIBLE_KEY, visible ? '1' : '0');
        toggleBtn.textContent = visible ? '关闭快进/快退面板' : '快进/快退面板';
        toggleBtn.style.background = visible ? '#d32f2f' : '#222';
    }

    // 开关按钮事件
    toggleBtn.onclick = function() {
        const visible = dragContainer.style.display === 'none';
        setPanelVisible(visible);
    };

    // 初始化显示状态
    const initialVisible = localStorage.getItem(PANEL_VISIBLE_KEY) === '1';
    setPanelVisible(initialVisible);

    // 加入页面
    document.body.appendChild(dragContainer);

})();

QingJ © 2025

镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址