MarkDown

// ==UserScript==
// @name        🔇Video Controls 视频控制按钮倍速静音暂停按钮
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Add speed control, mute, and play/pause buttons for videos on any webpage.
// @description:zh-CN  为任意网页上的视频添加倍速控制、静音和播放/暂停按钮。
// @author       YourName
// @match        *://*/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    if (window.self !== window.top) {
        return; // 如果当前不是顶级文档，则退出脚本
    }

    let funcDone = false;
    let array = [1, 1.5, 2, 2.5, 3, 3.5, 4, 6, 8, 16];
    let count = array.length;

    if (!funcDone) {
        let controlsDiv = document.createElement('div');
        controlsDiv.style.position = 'fixed';
        controlsDiv.style.bottom = '50px';
        controlsDiv.style.left = '50px';
        controlsDiv.style.zIndex = '9999';

        // 创建倍速控制按钮
        for (let i = 0; i < count; i++) {
            let speed = array[i];
            let btn = createSpeedButton(speed);
            controlsDiv.appendChild(btn);
        }

        // 创建静音按钮
        let muteBtn = createMuteButton();
        controlsDiv.appendChild(muteBtn);

        // 创建播放/暂停按钮
        let playPauseBtn = createPlayPauseButton();
        controlsDiv.appendChild(playPauseBtn);

        // 添加按钮组到页面
        //document.querySelector('body').appendChild(controlsDiv);
        //document.querySelector('html body').appendChild(controlsDiv);
        //document.getElementsByTagName("body")[0].appendChild(controlsDiv);
        //if (window.self === window.top) {
           // 仅在主页面执行添加控件的逻辑
           document.body.appendChild(controlsDiv);
           //document.getElementsByTagName("body")[0].appendChild(controlsDiv);
        //}
        funcDone = true;
    }

    function createSpeedButton(speed) {
        let btn = document.createElement('button');
        //btn.style.backgroundColor = '#008CBA';
        //btn.style.backgroundColor = '#10a2ff';
        btn.style.backgroundColor = 'transparent';
        btn.style.display = 'block';
        btn.style.marginRight = '4px';
        btn.style.border = '1px solid #D3D3D3';
        btn.style.borderRadius = '2px';
        btn.style.width = '40px';
        btn.style.height = '30px';
        //btn.style.color = '#ffffff';
        //btn.style.color = '#999999';
        // 计算背景颜色的亮度
        var backgroundColor = getComputedStyle(document.body).backgroundColor;
        function getBrightness(color) {
                 var rgb = color.match(/\d+/g);
                 var brightness = (rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000;
                 return brightness;
        }
        // 根据背景颜色亮度设置文本颜色
        if (getBrightness(backgroundColor) > 125) {
            btn.style.color = '#61666d'; // 如果背景颜色亮度高，则设置文本颜色为黑色
        } else {
           btn.style.color = '#999999'; // 如果背景颜色亮度低，则设置文本颜色为白色
        }
        btn.style.fontSize = '14px';
        btn.style.cursor = 'pointer';
        btn.innerHTML = '×' + speed;

        btn.addEventListener('click', function () {
            document.querySelectorAll('video').forEach(v => v.playbackRate = speed);
        });

        return btn;
    }

    function createMuteButton() {
        let btn = document.createElement('button');
        btn.style.backgroundColor = '#930000';//#FF0000'; // Red color for mute button
        btn.style.display = 'block';
        btn.style.marginRight = '4px';
        btn.style.border = '1px solid #D3D3D3';
        btn.style.borderRadius = '2px';
        btn.style.width = '40px';
        btn.style.height = '30px';
        btn.style.color = '#ffffff';
        btn.style.fontSize = '14px';
        btn.style.cursor = 'pointer';
        btn.innerHTML = 'Mute';

        btn.addEventListener('click', function () {
            let isMuted = !document.querySelector('video').muted;
            document.querySelectorAll('video').forEach(v => v.muted = isMuted);
            btn.innerHTML = isMuted ? 'Unmute' : 'Mute';
            btn.style.backgroundColor = isMuted ? '#FF0000' : '#930000';// : '#FF0000';
        });

        return btn;
    }

    function createPlayPauseButton() {
        let btn = document.createElement('button');
        btn.style.backgroundColor = '#005200'; // Green color for play button
        btn.style.display = 'block';
        btn.style.marginRight = '4px';
        btn.style.border = '1px solid #D3D3D3';
        btn.style.borderRadius = '2px';
        btn.style.width = '40px';
        btn.style.height = '30px';
        btn.style.color = '#ffffff';
        btn.style.fontSize = '14px';
        btn.style.cursor = 'pointer';
        btn.innerHTML = 'Play';

        btn.addEventListener('click', function () {
            let videos = document.querySelectorAll('video');
            videos.forEach(v => {
                if (v.paused) {
                    v.play();
                    btn.innerHTML = 'Pause';
                    btn.style.backgroundColor = '#4CAF50';//#FF0000';//'#FF9800'; // Orange color for pause button
                } else {
                    v.pause();
                    btn.innerHTML = 'Play';
                    btn.style.backgroundColor = '#005200';//'#4CAF50'; // Green color for play button
                }
            });
        });

        return btn;
    }

})();