☰

视频加速

提供九宫格预设速度按钮和拖拽滑块。

// ==UserScript==
// @name         视频加速
// @version      7.0.0
// @description  提供九宫格预设速度按钮和拖拽滑块。
// @author       kuaisudaohang
// @match        *://*.bilibili.com/*
// @match        *://*.youtube.com/*
// @match        *://v.youku.com/v_show/*
// @match        *://*.iqiyi.com/*
// @match        *://v.qq.com/x/cover/*
// @match        *://*.mgtv.com/*
// @match        *://tv.sohu.com/*
// @match        *://*.acfun.cn/v/*
// @match        *://*.nicovideo.jp/watch/*
// @match        *://*.dailymotion.com/video/*
// @match        *://vimeo.com/*
// @match        *://ani.gamer.com.tw/*
// @grant        none
// @license      MIT
// @namespace https://greasyfork.org/users/1513773
// ==/UserScript==

(function() {
    'use strict';

    const style = document.createElement("style");
    document.head.appendChild(style);
    const sheet = style.sheet;

    sheet.insertRule(`.vsc-container { position: fixed; left: 15px; top: 50%; transform: translateY(-50%); z-index: 2147483647; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }`, 0);
    sheet.insertRule(`.vsc-icon { width: 42px; height: 42px; background: rgba(28, 28, 30, 0.8); border-radius: 50%; cursor: pointer; display: flex; justify-content: center; align-items: center; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); transition: all 0.3s ease; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }`, 1);
    // --- 修改：调整面板宽度以适应九宫格 ---
    sheet.insertRule(`.vsc-panel { position: absolute; left: 21px; top: 50%; width: 240px; padding: 15px 20px; background: rgba(28, 28, 30, 0.8); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 12px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); visibility: hidden; opacity: 0; transform: translateY(-50%) translateX(-20px) scale(0.95); pointer-events: none; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); color: #f5f5f7; }`, 2);
    sheet.insertRule(`.vsc-container:hover .vsc-panel { visibility: visible; opacity: 1; transform: translateY(-50%) translateX(0) scale(1); pointer-events: auto; }`, 3);
    sheet.insertRule(`.vsc-container:hover .vsc-icon { transform: scale(1.1) rotate(90deg); }`, 4);

    // --- 修改：将预设按钮容器改为九宫格布局 ---
    sheet.insertRule(`.vsc-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 20px; }`, 5);
    sheet.insertRule(`.vsc-btn { background: #3A3A3C; border: none; color: #f5f5f7; padding: 8px 0; border-radius: 8px; cursor: pointer; font-size: 14px; transition: background-color 0.2s; }`, 6);
    sheet.insertRule(`.vsc-btn:hover { background-color: #555; }`, 7);
    sheet.insertRule(`.vsc-btn.active { background-color: #007AFF; font-weight: 600; }`, 8);

    sheet.insertRule(`.vsc-slider-track { position: relative; flex: 1; height: 8px; background-color: rgba(255,255,255,0.2); border-radius: 4px; cursor: pointer; }`, 9);
    sheet.insertRule(`.vsc-slider-thumb { position: absolute; top: 50%; transform: translateY(-50%); width: 60px; height: 30px; background-color: #007AFF; border-radius: 8px; color: white; font-weight: 600; font-size: 14px; display: flex; justify-content: center; align-items: center; cursor: grab; box-shadow: 0 2px 10px rgba(0,0,0,0.2); user-select: none; -webkit-user-select: none; }`, 10);
    sheet.insertRule(`.vsc-slider-thumb:active { cursor: grabbing; transform: translateY(-50%) scale(1.1); }`, 11);
    sheet.insertRule(`.vsc-slider-controls { display: flex; align-items: center; gap: 8px; }`, 12);
    sheet.insertRule(`.vsc-step-btn { width: 30px; height: 30px; background: #3A3A3C; border: none; color: #f5f5f7; border-radius: 50%; font-size: 22px; line-height: 30px; cursor: pointer; transition: background-color 0.2s; }`, 13);
    sheet.insertRule(`.vsc-step-btn:hover { background-color: #555; }`, 14);

    const SPEED_MIN = 0.1;
    const SPEED_MAX = 16.0;
    // --- 修改：更新预设速度为9个，以适应九宫格 ---
    const config = [0.5, 0.75, 1.0, 1.25, 1.5, 2.0, 4.0, 8.0, 16.0];
    let mainVideo = null;
    let curSpeed = localStorage.getItem("videoSpeed") || 1;
    const iconSVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24" fill="white" width="24px" height="24px"><path d="M4 18l8.5-6L4 6v12zm9-12v12l8.5-6L13 6z"/></svg>`;


    function createSpeedController() {
        const container = document.createElement('div');
        container.className = 'vsc-container';
        const icon = document.createElement('div');
        icon.className = 'vsc-icon';
        icon.innerHTML = iconSVG;
        const panel = document.createElement('div');
        panel.className = 'vsc-panel';
        const optionsContainer = document.createElement('div');
        optionsContainer.className = 'vsc-options';
        config.forEach(speed => {
            const btn = document.createElement('button');
            btn.className = 'vsc-btn';
            btn.textContent = `${speed}x`;
            btn.dataset.speed = speed;
            optionsContainer.appendChild(btn);
        });
        const sliderControls = document.createElement('div');
        sliderControls.className = 'vsc-slider-controls';
        const sliderTrack = document.createElement('div');
        sliderTrack.className = 'vsc-slider-track';
        const sliderThumb = document.createElement('div');
        sliderThumb.className = 'vsc-slider-thumb';
        sliderTrack.appendChild(sliderThumb);
        const btnDecrease = document.createElement('button');
        btnDecrease.className = 'vsc-step-btn';
        btnDecrease.textContent = '-';
        const btnIncrease = document.createElement('button');
        btnIncrease.className = 'vsc-step-btn';
        btnIncrease.textContent = '+';
        sliderControls.append(sliderTrack, btnDecrease, btnIncrease);
        panel.append(optionsContainer, sliderControls);
        container.append(icon, panel);
        document.body.appendChild(container);
        optionsContainer.addEventListener('click', (e) => { if (e.target.matches('.vsc-btn')) { curSpeed = parseFloat(e.target.dataset.speed); setVideoSpeed(curSpeed); } });
        sliderThumb.addEventListener('mousedown', onDragStart);
        sliderTrack.addEventListener('click', onTrackClick);
        btnDecrease.addEventListener('click', () => handleStepChange(-0.25));
        btnIncrease.addEventListener('click', () => handleStepChange(0.25));
        updateUI(curSpeed);
    }

    function handleStepChange(amount) { let newSpeed = parseFloat(curSpeed) + amount; newSpeed = Math.max(SPEED_MIN, Math.min(newSpeed, SPEED_MAX)); curSpeed = newSpeed; setVideoSpeed(curSpeed); }
    let isDragging = false;
    function onDragStart(e) { e.preventDefault(); isDragging = true; document.addEventListener('mousemove', onDragMove); document.addEventListener('mouseup', onDragEnd); }
    function onDragEnd() { isDragging = false; document.removeEventListener('mousemove', onDragMove); document.removeEventListener('mouseup', onDragEnd); }
    function onDragMove(e) { if (!isDragging) return; const track = document.querySelector('.vsc-slider-track'); if (!track) return; const rect = track.getBoundingClientRect(); const thumbWidth = document.querySelector('.vsc-slider-thumb').offsetWidth; let positionX = e.clientX - rect.left; positionX = Math.max(thumbWidth / 2, Math.min(positionX, rect.width - thumbWidth / 2)); const percentage = (positionX - thumbWidth / 2) / (rect.width - thumbWidth); curSpeed = SPEED_MIN + percentage * (SPEED_MAX - SPEED_MIN); setVideoSpeed(curSpeed); }
    function onTrackClick(e) { if (e.target.classList.contains('vsc-slider-thumb')) return; onDragMove(e); }

    function updateUI(speed) {
        const speedFloat = parseFloat(speed);
        const container = document.querySelector('.vsc-container');
        if (!container) return;
        const buttons = container.querySelectorAll('.vsc-btn');
        buttons.forEach(btn => { btn.classList.toggle('active', parseFloat(btn.dataset.speed) === speedFloat); });
        const track = container.querySelector('.vsc-slider-track');
        const thumb = container.querySelector('.vsc-slider-thumb');
        if (!track || !thumb) return;
        thumb.textContent = `${speedFloat.toFixed(2)}x`;
        requestAnimationFrame(() => {
            const trackWidth = track.offsetWidth;
            const thumbWidth = thumb.offsetWidth;
            if (trackWidth <= 0 || thumbWidth <= 0) return;
            const percentage = (speedFloat - SPEED_MIN) / (SPEED_MAX - SPEED_MIN);
            const leftPosition = Math.max(0, Math.min(percentage * (trackWidth - thumbWidth), trackWidth - thumbWidth));
            thumb.style.left = `${leftPosition}px`;
        });
    }

    function setVideoSpeed(speed) {
        mainVideo = document.querySelector('video');
        if (mainVideo) {
            mainVideo.playbackRate = speed;
            localStorage.setItem("videoSpeed", speed);
            updateUI(speed);
        }
    }

    function initSpeedController() {
        const videoCheckInterval = setInterval(() => {
            mainVideo = document.querySelector('video');
            if (mainVideo) {
                if (!document.querySelector('.vsc-container')) {
                    createSpeedController();
                }
                setVideoSpeed(curSpeed);
                clearInterval(videoCheckInterval);
            }
        }, 500);
    }

    initSpeedController();
})();