cursor初体验摸鱼视频播放器

老王2024-09-262024-09-26
[up主专用，视频内嵌代码贴在这]
刚试用了下cursor，我不会代码，但是还是一步步提问给整出来了，欢迎使用~
功能：

// 在网页【左下角】添加视频播放器，自动播放【XJJ】视频，
右上角开启【自动】，解放双手，
右下角【白色块】可调整大小，
拖动视频可以移动位置，
【切换源】换源。
如果有更加精彩的小姐姐API也可以留言叫我加入（目前只有3个视频源
我不会代码，想改的也可以把代码直接贴进cursor让它给改- -！
cursor还是挺好玩的.
本教程用到 Win10 电脑和篡改猴 (Tampermonkey) 浏览器插件

篡改猴插件链接: https://www.tampermonkey.net/
源码

// ==UserScript==
// @name         摸鱼视频播放器（cursor版）
// @namespace    http://tampermonkey.net/
// @version      1.17
// @description  在网页【左下角】添加视频播放器，自动播放【XJJ】视频，右上角开启【自动】，解放双手，右下角【白色块】可调整大小，拖动视频可以移动位置
// @match        *://*/*
// @grant        GM_xmlhttpRequest
// @grant        GM_addStyle
// ==/UserScript==

(function() {
    'use strict';

    // 常量定义
    const DEFAULT_WIDTH = '225px';
    const DEFAULT_HEIGHT = '400px';
    const LARGE_WIDTH = '450px';
    const LARGE_HEIGHT = '800px';
    const SMALL_WIDTH = '112.5px';
    const SMALL_HEIGHT = '200px';
    const HIDE_CONTROLS_DELAY = 3000;

    const apiList = [
        { name: '颜值视频', url: 'https://sp.4n2.cn/?api=bianzhuang&type=json' },
        { name: '小姐姐视频', url: 'https://api.kuleu.com/api/xjj?type=json' },
        { name: '随机视频', url: 'https://sp.4n2.cn/?api=sw&type=json' }
    ];

    let currentSourceIndex = 0;
    let autoMode = false; // 确保初始状态为关闭
    let videoHistory = [];
    let historyIndex = -1;
    let isDragging = false;
    let isResizing = false;
    let offsetX, offsetY, startWidth, startHeight;
    let hideControlsTimeout;

    // 样式定义
    GM_addStyle(`
        #fishPlayer {
            position: fixed;
            left: 10px;
            bottom: 10px;
            z-index: 9999;
            display: none;
            cursor: default;
            border-radius: 10px; // 添加圆角
            overflow: hidden; // 确保内容不超出圆角
        }
        #fishToggle {
            position: fixed;
            left: 10px;
            bottom: 10px;
            z-index: 10000;
            background: transparent;
            color: white;
            border: 1px solid black;
            padding: 5px 10px;
            border-radius: 5px;
            cursor: pointer;
        }
        #fishVideo {
            width: 100%;
            height: 100%;
            background: black;
            position: relative;
            border-radius: 10px; // 为视频添加圆角
        }
        #fishControls, #fishSizeControls, #fishSource {
            display: none;
        }
        #fishControls {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            display: flex;
            justify-content: space-between;
            padding: 5px;
            box-sizing: border-box;
        }
        #fishLeftControls, #fishRightControls {
            display: flex;
            flex-direction: column;
        }
        #fishSizeControls {
            display: none; // 隐藏大中小按钮
        }
        #fishSwitch, #fishRetry, #fishAuto, .sizeBtn {
            background: transparent;
            color: white;
            border: 1px solid white;
            padding: 5px;
            border-radius: 5px;
            cursor: pointer;
            margin-bottom: 5px;
            pointer-events: auto;
        }
        #fishSource {
            font-size: 12px;
            text-align: center;
            color: white;
        }
        #resizeHandle {
            position: absolute;
            width: 15px;
            height: 15px;
            background: rgba(255, 255, 255, 0.5);
            right: 0;
            bottom: 0;
            cursor: nwse-resize;
        }
    `);

    // HTML模板
    const playerHtml = `
        <div id="fishPlayer" style="display: none;">
            <video id="fishVideo" controls autoplay></video>
            <div id="fishControls">
                <div id="fishLeftControls">
                    <button id="fishSwitch">切换源</button>
                    <button id="fishRetry">重试源</button>
                    <div id="fishSource"></div>
                </div>
                <div id="fishRightControls">
                    <button id="fishAuto">自动：关</button>
                    <!-- 大中小按钮已被注释掉，但保留代码以便将来使用 -->
                    <!--
                    <button class="sizeBtn" id="sizeLarge">大</button>
                    <button class="sizeBtn" id="sizeDefault">中</button>
                    <button class="sizeBtn" id="sizeSmall">小</button>
                    -->
                </div>
            </div>
            <div id="resizeHandle"></div>
        </div>
        <button id="fishToggle">XJJ</button>
    `;

    document.body.insertAdjacentHTML('beforeend', playerHtml);

    // DOM元素
    const toggle = document.getElementById('fishToggle');
    const player = document.getElementById('fishPlayer');
    const video = document.getElementById('fishVideo');
    const resizeHandle = document.getElementById('resizeHandle');
    const switchBtn = document.getElementById('fishSwitch');
    const retryBtn = document.getElementById('fishRetry');
    const autoBtn = document.getElementById('fishAuto');
    const sourceDiv = document.getElementById('fishSource');
    const controls = document.querySelectorAll('#fishControls, #fishSizeControls, #fishSource');

    // 功能函数
    function setPlayerSize(width, height) {
        player.style.width = width;
        player.style.height = height;
        video.style.width = '100%';
        video.style.height = '100%';
    }

    let videoCache = []; // 用于存储视频 URL 的缓存
    let currentVideoIndex = -1; // 当前视频在缓存中的索引

    function loadVideo(direction = 'next', switchSource = false) {
        if (switchSource) {
            currentSourceIndex = (currentSourceIndex + 1) % apiList.length;
            videoCache = [];
            currentVideoIndex = -1;
        }

        sourceDiv.textContent = `当前源: ${apiList[currentSourceIndex].name}`;

        if (direction === 'previous' && currentVideoIndex > 0) {
            currentVideoIndex--;
            playVideo(videoCache[currentVideoIndex]);
            return;
        }

        if (direction === 'next' && currentVideoIndex < videoCache.length - 1) {
            currentVideoIndex++;
            playVideo(videoCache[currentVideoIndex]);
            return;
        }

        GM_xmlhttpRequest({
            method: 'GET',
            url: apiList[currentSourceIndex].url,
            onload: function(response) {
                let videoUrl;
                try {
                    const data = JSON.parse(response.responseText);
                    videoUrl = data.url || data.video || (data.data && data.data.url);
                } catch (e) {
                    videoUrl = response.responseText.trim();
                }
                if (videoUrl && videoUrl.startsWith('http')) {
                    if (direction === 'next') {
                        videoCache = videoCache.slice(0, currentVideoIndex + 1);
                        videoCache.push(videoUrl);
                        currentVideoIndex = videoCache.length - 1;
                    }
                    playVideo(videoUrl);
                } else {
                    console.error('无效的视频URL:', videoUrl);
                    sourceDiv.textContent += ' (加载失败)';
                    loadVideo(direction, switchSource); // 加载失败时重试
                }
            },
            onerror: function(error) {
                console.error('请求失败:', error);
                sourceDiv.textContent += ' (请求失败)';
                loadVideo(direction, switchSource); // 请求失败时重试
            }
        });
    }

    function playVideo(videoUrl) {
        video.src = videoUrl;
        video.play().catch(e => console.error('视频播放失败:', e));
        updateVideoHistory(videoUrl);
    }

    function updateVideoHistory(videoUrl) {
        if (historyIndex === videoHistory.length - 1) {
            videoHistory.push(videoUrl);
        } else {
            videoHistory = videoHistory.slice(0, historyIndex + 1);
            videoHistory.push(videoUrl);
        }
        historyIndex = videoHistory.length - 1;
    }

    function loadNextVideo() {
        loadVideo('next');
    }

    function loadPreviousVideo() {
        loadVideo('previous');
    }

    function switchSource() {
        loadVideo('next', true);
    }

    // 修改 toggle 按钮的事件监听器
    toggle.addEventListener('click', () => {
        if (player.style.display === 'none') {
            player.style.display = 'block';
            if (!video.src) {
                loadVideo();
            } else {
                video.play().catch(e => console.error('视频播放失败:', e));
            }
        } else {
            player.style.display = 'none';
            video.pause();
        }
    });

    switchBtn.addEventListener('click', switchSource);
    retryBtn.addEventListener('click', loadVideo);

    autoBtn.addEventListener('click', () => {
        autoMode = !autoMode;
        autoBtn.textContent = `自动：${autoMode ? '开' : '关'}`;
        console.log('自动播放模式:', autoMode ? '开启' : '关闭'); // 添加日志
    });

    video.addEventListener('ended', () => {
        console.log('视频播放结束'); // 添加日志
        if (autoMode) {
            console.log('自动播放模式开启，加载下一个视频'); // 添加日志
            loadNextVideo();
        }
    });

    video.addEventListener('wheel', (event) => {
        event.preventDefault();
        if (event.deltaY > 0) {
            loadNextVideo();
        } else {
            loadPreviousVideo();
        }
    });

    player.addEventListener('mouseenter', () => {
        clearTimeout(hideControlsTimeout);
        controls.forEach(control => control.style.display = 'flex');
    });

    player.addEventListener('mouseleave', () => {
        hideControlsTimeout = setTimeout(() => {
            controls.forEach(control => control.style.display = 'none');
        }, HIDE_CONTROLS_DELAY);
    });

    player.addEventListener('mousedown', (event) => {
        if (event.target === resizeHandle) {
            isResizing = true;
            startWidth = player.offsetWidth;
            startHeight = player.offsetHeight;
            offsetX = event.clientX;
            offsetY = event.clientY;
            event.preventDefault();
        } else if (!event.target.closest('button')) {
            isDragging = true;
            offsetX = event.clientX - player.offsetLeft;
            offsetY = event.clientY - player.offsetTop;
            event.preventDefault();
        }
    });

    document.addEventListener('mousemove', (event) => {
        if (isDragging) {
            player.style.left = `${event.clientX - offsetX}px`;
            player.style.top = `${event.clientY - offsetY}px`;
        } else if (isResizing) {
            const newWidth = Math.max(100, startWidth + (event.clientX - offsetX));
            const newHeight = Math.max(100, startHeight + (event.clientY - offsetY));
            setPlayerSize(`${newWidth}px`, `${newHeight}px`);
        }
    });

    document.addEventListener('mouseup', () => {
        isDragging = false;
        isResizing = false;
    });

    // 使用事件委托处理大小调整按钮
    document.getElementById('fishRightControls').addEventListener('click', (event) => {
        if (event.target.classList.contains('sizeBtn')) {
            switch(event.target.id) {
                case 'sizeLarge':
                    setPlayerSize(LARGE_WIDTH, LARGE_HEIGHT);
                    break;
                case 'sizeDefault':
                    setPlayerSize(DEFAULT_WIDTH, DEFAULT_HEIGHT);
                    break;
                case 'sizeSmall':
                    setPlayerSize(SMALL_WIDTH, SMALL_HEIGHT);
                    break;
            }
        }
    });

    // 初始化播放器大小
    setPlayerSize(DEFAULT_WIDTH, DEFAULT_HEIGHT);

    // 确保 XJJ 按钮默认显示
    toggle.style.display = 'block';
})();
功能：

本教程用到 Win10 电脑 和 篡改猴 (Tampermonkey) 浏览器插件

源码

老王

本教程用到 Win10 电脑和篡改猴 (Tampermonkey) 浏览器插件
