☰

自用video tool

悬浮播放器，支持播放控制缩放、镜像等功能

// ==UserScript==
// @name         自用video tool
// @namespace    http://tampermonkey.net/
// @version      12.0
// @description  悬浮播放器，支持播放控制缩放、镜像等功能
// @author       i22333
// @match        *://*/*
// @grant        GM_addStyle
// @license MIT
// ==/UserScript==

(function() {
    'use strict';

    // 添加自定义样式
    GM_addStyle(`
        #media-player-container {
            position: fixed;
            left: 10px;
            right: 10px;
            bottom: 10px;
            background-color: rgba(0, 0, 0, 0.8);
            z-index: 10000;
            display: none;
            border-radius: 10px;
            overflow: hidden;
            resize: both;
        }
        #player-video {
            width: 100%;
            height: 100%;
            object-fit: contain;
            transition: transform 0.3s ease;
            transform-origin: center center;
        }
        #player-video.zoomed {
            object-fit: cover;
            transform-origin: center center;
        }
        /* === 集成控制组样式 === */
        #control-group-container {
            position: absolute;
            bottom: 5px;
            left: 50%;
            transform: translateX(-50%);
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            border: none;
            border-radius: 5px;
            z-index: 10003;
            width: 320px;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            font-size: 12px;
        }
        /* 进度条部分 */
        #progress-container {
            padding: 8px 15px 5px; /* 上8px 左右15px 下5px */
            width: 100%;
            box-sizing: border-box;
        }
        #progress-bar {
            position: relative;
            height: 5px;
            background-color: rgba(255, 255, 255, 0.2);
            border-radius: 0px;
            cursor: pointer;
            margin-bottom: 3px; /* 增加与时间显示的间距 */
        }
        #progress-played {
            position: absolute;
            height: 5px;
            background-color: #ff4d4d;
            border-radius: 0px;
            width: 0;
        }
        #progress-thumb {
            position: absolute;
            width: 12px;
            height: 12px;
            background-color: #ff4d4d;
            border-radius: 50%;
            top: -3px;
            left: 0;
            transform: translateX(-50%);
            cursor: pointer;
            z-index: 1;
        }
        #time-container {
            display: flex;
            justify-content: space-between;
            color: #ddd;
            font-size: 10px;
            padding: 5px 0 0px; /* 上3px 下5px */
        }
        #preview-time {
            position: absolute;
            bottom: 30px;
            background: rgba(0, 0, 0, 0.6);
            color: white;
            padding: 3px 8px;
            border-radius: 5px;
            font-size: 12px;
            display: none;
            z-index: 10005;
        }

        /* 播放按钮组 */
        #play-control-button {
            display: flex;
            justify-content: space-between;
            width: 100%;
            height: 30px;
            padding: 0px 0 5px; /* 上3px 下5px */
        }
        #play-control-button > div {
            width: 14%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: none !important;
            margin: 0 1px; /* 增加按钮间距 */
        }

        #control-button-group {
            position: absolute;
            top: 5px;
            left: 0px;
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            border: none;
            padding: 0;
            border-radius: 5px;
            cursor: pointer;
            font-size: 12px;
            z-index: 10003;
            display: flex;
            justify-content: space-between;
            width: 120px;
            height: 40px;
        }
        #control-button-group > div {
            width: 33%;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: none !important;
        }

        #speed-control-menu {
            position: absolute;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            background-color: rgba(0, 0, 0, 0.5);
            border-radius: 5px;
            padding: 5px;
            display: none;
            flex-direction: column;
            z-index: 10004;
            width: 80px;
            max-height: 120px;
            overflow-y: auto;
        }
        .speed-option {
            color: white;
            padding: 5px 10px;
            cursor: pointer;
            font-size: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 20px;
        }
        .controls-visible { opacity: 1; pointer-events: auto; }
        .controls-hidden { opacity: 0; pointer-events: none; }
        #detect-media-button {
            position: fixed;
            left: 20px;
            top: 70%;
            transform: translateY(-50%);
            z-index: 10001;
            background-color: #00aaff;
            color: white;
            border: none;
            padding: 10px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 15px;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
        }

        #detect-media-button:active {
            transform: translateY(-50%) scale(0.95);
        }
        /* 竖屏模式优化 */
        [aspect-ratio="9/16"] {
            transform: rotate(90deg) scale(1.75);
            transform-origin: center center;
        }
    `);

    // 创建播放器容器
    const mediaPlayer = document.createElement('div');
    mediaPlayer.id = 'media-player-container';
    document.body.appendChild(mediaPlayer);

    // 视频元素
    const playerVideo = document.createElement('video');
    playerVideo.id = 'player-video';
    playerVideo.controls = false;
    mediaPlayer.appendChild(playerVideo);

    // === 创建集成控制组 ===
    const controlGroupContainer = document.createElement('div');
    controlGroupContainer.id = 'control-group-container';
    mediaPlayer.appendChild(controlGroupContainer);

    // 进度条部分
    const progressContainer = document.createElement('div');
    progressContainer.id = 'progress-container';

    const progressBar = document.createElement('div');
    progressBar.id = 'progress-bar';

    const progressPlayed = document.createElement('div');
    progressPlayed.id = 'progress-played';

    const progressThumb = document.createElement('div');
    progressThumb.id = 'progress-thumb';

    const timeContainer = document.createElement('div');
    timeContainer.id = 'time-container';
    timeContainer.innerHTML = '<span id="current-time">00:00</span>  <span id="total-time">00:00</span>';

    const previewTime = document.createElement('div');
    previewTime.id = 'preview-time';

    progressBar.appendChild(progressPlayed);
    progressBar.appendChild(progressThumb);
    progressContainer.appendChild(progressBar);
    progressContainer.appendChild(timeContainer);
    progressContainer.appendChild(previewTime);

    controlGroupContainer.appendChild(progressContainer);

        // === 进度条功能实现 ===
    function formatTime(seconds) {
        const minutes = Math.floor(seconds / 60);
        const secs = Math.floor(seconds % 60);
        return `${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
    }

    function updateProgressBar() {
        if (!playerVideo.duration || playerVideo.duration === Infinity) return;

        const percent = (playerVideo.currentTime / playerVideo.duration) * 100;
        progressPlayed.style.width = `${percent}%`;
        progressThumb.style.left = `${percent}%`;

        document.getElementById('current-time').textContent = formatTime(playerVideo.currentTime);
        document.getElementById('total-time').textContent = formatTime(playerVideo.duration);
    }

    function seekToPosition(e) {
        if (!playerVideo.duration || playerVideo.duration === Infinity) return;

        const rect = progressBar.getBoundingClientRect();
        const position = (e.clientX - rect.left) / rect.width;
        const time = Math.max(0, Math.min(playerVideo.duration, playerVideo.duration * position));

        playerVideo.currentTime = time;
        updateProgressBar();
    }

    function showPreviewTime(e) {
        if (!playerVideo.duration || playerVideo.duration === Infinity) return;

        const rect = progressBar.getBoundingClientRect();
        const position = (e.clientX - rect.left) / rect.width;
        const time = Math.max(0, Math.min(playerVideo.duration, playerVideo.duration * position));

        previewTime.textContent = formatTime(time);
        previewTime.style.display = 'block';
        previewTime.style.left = `${e.clientX - rect.left + 10}px`;
    }

    function hidePreviewTime() {
        previewTime.style.display = 'none';
    }

    // 进度条事件监听
    playerVideo.addEventListener('timeupdate', updateProgressBar);
    progressBar.addEventListener('click', seekToPosition);

    let isDragging = false;
    progressThumb.addEventListener('mousedown', () => {
        isDragging = true;
        playerVideo.pause();
    });

    document.addEventListener('mousemove', (e) => {
        if (isDragging) {
            const rect = progressBar.getBoundingClientRect();
            const position = (e.clientX - rect.left) / rect.width;
            const percent = Math.max(0, Math.min(100, position * 100));

            progressPlayed.style.width = `${percent}%`;
            progressThumb.style.left = `${percent}%`;

            const time = Math.max(0, Math.min(playerVideo.duration, playerVideo.duration * position));
            document.getElementById('current-time').textContent = formatTime(time);

            previewTime.textContent = formatTime(time);
            previewTime.style.display = 'block';
            previewTime.style.left = `${e.clientX - rect.left + 10}px`;
        }
    });

    document.addEventListener('mouseup', (e) => {
        if (isDragging) {
            isDragging = false;
            const rect = progressBar.getBoundingClientRect();
            const position = (e.clientX - rect.left) / rect.width;
            playerVideo.currentTime = playerVideo.duration * position;
            playerVideo.play();
            previewTime.style.display = 'none';
        }
    });

    progressBar.addEventListener('mousemove', showPreviewTime);
    progressBar.addEventListener('mouseout', hidePreviewTime);

            // 移动端触摸事件支持
            let touchStartX = 0;
            let touchStartTime = 0;

            progressBar.addEventListener('touchstart', (e) => {
                if (e.touches.length > 0) {
                    const touch = e.touches[0];
                    touchStartX = touch.clientX;
                    touchStartTime = playerVideo.currentTime;
                    playerVideo.pause();
                    isDragging = true;
                    showPreviewTime(touch.clientX);
                    e.preventDefault();
                }
            });

            progressBar.addEventListener('touchmove', (e) => {
                if (isDragging && e.touches.length > 0) {
                    const touch = e.touches[0];
                    const rect = progressBar.getBoundingClientRect();
                    const position = (touch.clientX - rect.left) / rect.width;
                    const percent = Math.max(0, Math.min(100, position * 100));

                    progressPlayed.style.width = `${percent}%`;
                    progressThumb.style.left = `${percent}%`;

                    const time = Math.max(0, Math.min(playerVideo.duration, playerVideo.duration * position));
                    document.getElementById('current-time').textContent = formatTime(time);

                    previewTime.textContent = formatTime(time);
                    previewTime.style.display = 'block';
                    previewTime.style.left = `${touch.clientX - rect.left + 10}px`;
                    e.preventDefault();
                }
            });

            progressBar.addEventListener('touchend', (e) => {
                if (isDragging) {
                    isDragging = false;
                    if (e.changedTouches.length > 0) {
                        const touch = e.changedTouches[0];
                        const rect = progressBar.getBoundingClientRect();
                        const position = (touch.clientX - rect.left) / rect.width;
                        playerVideo.currentTime = playerVideo.duration * position;
                        playerVideo.play();
                        previewTime.style.display = 'none';
                    }
                    e.preventDefault();
                }
            });

    // 初始隐藏时间提示
    previewTime.style.display = 'none';

    // 播放按钮组
    const playControlButton = document.createElement('div');
    playControlButton.id = 'play-control-button';
    ['缩', '方', '10s', '播停', '10s', '速', '全'].forEach(text => {
        const btn = document.createElement('div');
        btn.innerText = text;
        playControlButton.appendChild(btn);
    });
    controlGroupContainer.appendChild(playControlButton);

    // 统一状态管理
    let videoState = {
        isMirrored: false,
        currentScale: 1,
        isZoomed: false,
        isSeeking: false,
        isPlaying: false,
        isDetectionVisible: true,
        screenOrientation: 'landscape',
    };

    // 状态变量
    let screenOrientation = 'landscape';
    let isFullscreen = false;
    let windowStates = [
        { width: '328px', height: '185px', desc: '默认尺寸' },
        { width: '328px', height: '583px', desc: '竖版尺寸' },
    ];
    let currentWindowState = 0;

    // 添加全屏状态管理
    let originalDimensions = {
        width: '',
        height: ''
    };

    // 统一更新变换
    function updateVideoTransform() {
        const transforms = [];
        if (videoState.screenOrientation === 'portrait') {
            transforms.push('rotate(90deg) scale(1.78)');
        }
        if (videoState.currentScale !== 1) {
            transforms.push(`scale(${videoState.currentScale})`);
        }
        if (videoState.isMirrored) {
            transforms.push('scaleX(-1)');
        }
        playerVideo.style.transform = transforms.join(' ') || 'none';
    }

    // 窗口尺寸监听
    new ResizeObserver(() => {
        if (videoState.isZoomed && !playerVideo.classList.contains('zoomed')) {
            videoState.currentScale = Math.max(
                mediaPlayer.clientWidth / playerVideo.videoWidth,
                mediaPlayer.clientHeight / playerVideo.videoHeight
            );
            updateVideoTransform();
        }
    }).observe(mediaPlayer);

    // 按钮功能绑定
    playControlButton.children[0].addEventListener('click', toggleScale);
    playControlButton.children[1].addEventListener('click', toggleOrientation);
    playControlButton.children[2].addEventListener('click', () => playerVideo.currentTime -= 10);
    playControlButton.children[3].addEventListener('click', togglePlay);
    playControlButton.children[4].addEventListener('click', () => playerVideo.currentTime += 10);
    playControlButton.children[5].addEventListener('click', toggleSpeedMenu);
    playControlButton.children[6].addEventListener('click', toggleFullscreen);

    // 缩放功能
    function toggleScale() {
        const containerWidth = mediaPlayer.clientWidth;
        const containerHeight = mediaPlayer.clientHeight;
        const videoWidth = playerVideo.videoWidth;
        const videoHeight = playerVideo.videoHeight;

        if (!videoState.isZoomed) {
            const containerRatio = containerWidth / containerHeight;
            const videoRatio = videoWidth / videoHeight;
            if (Math.abs(containerRatio - videoRatio) > 0.01) {
                playerVideo.classList.add('zoomed');
            } else {
                videoState.currentScale = Math.max(
                    containerWidth / videoWidth,
                    containerHeight / videoHeight
                );
                updateVideoTransform();
            }
        } else {
            playerVideo.classList.remove('zoomed');
            videoState.currentScale = 1;
            updateVideoTransform();
        }
        videoState.isZoomed = !videoState.isZoomed;
    }

    // 方向切换
    function toggleOrientation() {
        videoState.screenOrientation =
            videoState.screenOrientation === 'landscape' ? 'portrait' : 'landscape';
        mediaPlayer.style.aspectRatio =
            videoState.screenOrientation === 'portrait' ? '9/16' : '16/9';
        updateVideoTransform();
    }

    // 播放控制
    function togglePlay() {
        if (playerVideo.paused) {
            playerVideo.play();
            ControlsManager.scheduleHide();
        } else {
            playerVideo.pause();
            ControlsManager.cancelHide();
            ControlsManager.show();
        }
        updatePlayButton();
    }

    // 更新播放按钮文本
    function updatePlayButton() {
        playControlButton.children[3].innerText = playerVideo.paused ? '播放' : '暂停';
    }

    // 控件管理模块
    const ControlsManager = (() => {
        let hideTimer;
        const controls = [
            '#control-group-container',
            '#control-button-group'
        ];

        return {
            init() {
                mediaPlayer.addEventListener('mousemove', () => this.reset());
                mediaPlayer.addEventListener('mouseleave', () => this.scheduleHide());
                playerVideo.addEventListener('play', () => this.scheduleHide());
                playerVideo.addEventListener('pause', () => this.cancelHide());
            },

            show() {
                controls.forEach(selector => {
                    const el = document.querySelector(selector);
                    el?.classList.remove('controls-hidden');
                    el.style.pointerEvents = 'auto';
                });
            },

            hide() {
                if(playerVideo.paused) return;
                controls.forEach(selector => {
                    const el = document.querySelector(selector);
                    el?.classList.add('controls-hidden');
                    el.style.pointerEvents = 'none';
                });
            },

            scheduleHide(delay = 3000) {
                this.cancelHide();
                hideTimer = setTimeout(() => this.hide(), delay);
            },

            cancelHide() {
                clearTimeout(hideTimer);
            },

            reset() {
                this.show();
                this.scheduleHide();
            }
        };
    })();

    ControlsManager.init();

    // 速度控制菜单
    const speedOptions = [0.1, 0.25, 0.75, 1, 1.25, 1.5, 2, 2.5, 3, 4];

    const speedControlMenu = document.createElement('div');
    speedControlMenu.id = 'speed-control-menu';
    speedOptions.forEach(speed => {
        const option = document.createElement('div');
        option.className = 'speed-option';
        option.innerText = `${speed}x`;
        option.addEventListener('click', () => {
            playerVideo.playbackRate = speed;
            speedControlMenu.style.display = 'none';
        });
        speedControlMenu.appendChild(option);
    });
    mediaPlayer.appendChild(speedControlMenu);

    // 显示/隐藏速度菜单
    function toggleSpeedMenu() {
        speedControlMenu.style.display = speedControlMenu.style.display === 'flex' ? 'none' : 'flex';
        resetMenuTimeout();
    }

    // 增强全屏函数
    function toggleFullscreen() {
        if (!isFullscreen) {
            originalDimensions = {
                width: mediaPlayer.style.width,
                height: mediaPlayer.style.height,
                aspectRatio: mediaPlayer.style.aspectRatio
            };

            mediaPlayer.requestFullscreen().then(() => {
                isFullscreen = true;
                mediaPlayer.style.width = '100%';
                mediaPlayer.style.height = '100%';
                applyOrientation();
            });
        } else {
            document.exitFullscreen();
        }
    }

    // 增强全屏状态监听
    document.addEventListener('fullscreenchange', () => {
        isFullscreen = !!document.fullscreenElement;
        if (!isFullscreen) {
            mediaPlayer.style.width = originalDimensions.width;
            mediaPlayer.style.height = originalDimensions.height;
            mediaPlayer.style.aspectRatio = originalDimensions.aspectRatio;
            playerVideo.style.transform = 'none';
        }
    });

    // 更新全屏按钮状态
    function updateFullscreenButton() {
        const fullscreenBtn = playControlButton.children[6];
        fullscreenBtn.innerText = isFullscreen ? '退出' : '全';
        fullscreenBtn.title = isFullscreen ? '退出全屏 (Esc)' : '进入全屏';
    }

    // 视频状态同步
    playerVideo.addEventListener('play', () => {
        videoState.isPlaying = true;
        videoState.isDetectionVisible = false;
        detectMediaButton.style.display = 'none';
        updatePlayButton();
    });

    playerVideo.addEventListener('pause', () => {
        videoState.isPlaying = false;
        videoState.isDetectionVisible = true;
        detectMediaButton.style.display = 'block';
        updatePlayButton();
    });

    playerVideo.addEventListener('ended', () => {
        videoState.isPlaying = false;
        videoState.isDetectionVisible = true;
        detectMediaButton.style.display = 'block';
        updatePlayButton();
    });

    // 创建控制按钮组
    const controlButtonGroup = document.createElement('div');
    controlButtonGroup.id = 'control-button-group';
    ['关', '切', '镜'].forEach(text => {
        const btn = document.createElement('div');
        btn.innerText = text;
        controlButtonGroup.appendChild(btn);
    });
    mediaPlayer.appendChild(controlButtonGroup);

    // 按钮功能绑定
    controlButtonGroup.children[0].addEventListener('click', closePlayer);
    controlButtonGroup.children[1].addEventListener('click', toggleResize);
    controlButtonGroup.children[2].addEventListener('click', toggleMirror);

    // 关闭功能
    let originalVideo = null;
    function closePlayer() {
        if (document.fullscreenElement) {
            document.exitFullscreen();
        }

        if (playerVideo.src && originalVideo) {
            originalVideo.pause();
        }
        mediaPlayer.style.display = 'none';
        playerVideo.pause();
        playerVideo.src = '';
        detectMediaButton.style.display = 'block';

        document.documentElement.style.overflow = '';
    }

    // 切换窗口尺寸
    function toggleResize() {
        if (isFullscreen) {
            document.exitFullscreen().then(() => {
                currentWindowState = (currentWindowState + 1) % windowStates.length;
                applyWindowState();
            });
        } else {
            currentWindowState = (currentWindowState + 1) % windowStates.length;
            applyWindowState();
        }
    }

    // 应用窗口状态
    function applyWindowState() {
        const state = windowStates[currentWindowState];
        mediaPlayer.style.width = state.width;
        mediaPlayer.style.height = state.height;
        console.log(`切换到状态: ${state.desc}`);
    }

    // 镜像功能
    function toggleMirror() {
        videoState.isMirrored = !videoState.isMirrored;
        updateVideoTransform();
    }

    // 检测媒体功能
    const detectMediaButton = document.createElement('button');
    detectMediaButton.id = 'detect-media-button';
    detectMediaButton.innerText = '检';
    detectMediaButton.style.display = 'none';
    document.body.appendChild(detectMediaButton);

    const detectMedia = () => {
        const videos = document.querySelectorAll('video');
        let targetVideo = null;

        for (const video of videos) {
            if (video.src && (
                video.src.endsWith('.m3u8') ||
                video.querySelector('source[src$=".m3u8"]') !== null
            )) {
                targetVideo = video;
                break;
            }

            if (!video.paused && !targetVideo) {
                targetVideo = video;
            }
        }
        return targetVideo || videos[0] || null;
    };

    document.addEventListener('play', (e) => {
        if (e.target.tagName === 'VIDEO' && !e.target.isSameNode(playerVideo)) {
            videoState.isDetectionVisible = true;
            detectMediaButton.style.display = 'block';
        }
    }, true);

    detectMediaButton.addEventListener('click', () => {
        if (!videoState.isDetectionVisible) return;

        const media = detectMedia();
        if (media) {
            originalVideo = media;
            const source = media.src || media.querySelector('source')?.src;

            playerVideo.src = source;
            playerVideo.currentTime = media.currentTime;
            media.pause();
            mediaPlayer.style.display = 'block';
            ControlsManager.show();
            playerVideo.play();
            videoState.isDetectionVisible = false;
            detectMediaButton.style.display = 'none';
        }
    });

    // 视频结束自动隐藏
    playerVideo.addEventListener('ended', () => {
        playerVideo.src = '';
        detectMediaButton.style.display = 'block';
    });
})();

QingJ © 2025

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