Video Speed Controller for phone

Add a video speed controller to webpages with videos.
当前为 2023-08-18 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         Video Speed Controller for phone
// @namespace    http://tampermonkey.net/
// @version      0.2
// @description  Add a video speed controller to webpages with videos.
// @author       Cool
// @match        *://*/*
// @grant        GM_addStyle
// @license MIT
// ==/UserScript==


(function () {
    'use strict';
    // Add a button to control video speed
    const speedButton = document.createElement('div');
    speedButton.id = 'videoSpeedButton';
    speedButton.innerHTML = '1.0x';
    speedButton.style.cssText = `
        position: fixed;
        top: 50%;
        right: 20px;
        background: rgba(0, 0, 0, 0.3);
        color: white;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 99999;
        font-size: 12px;
    `;
    document.body.appendChild(speedButton);

    // Define video playback speeds
    const playbackSpeeds = [1.0, 1.25, 1.5, 2.0, 2.5, 3.0, 4.0, 'Close'];

    speedButton.addEventListener('mouseenter', () => {
        const speedList = document.createElement('ul');
        speedList.style.cssText = `
            position: absolute;
            top: 0;
            left: 0;
            list-style: none;
            background: rgba(0, 0, 0, 0.8);
            padding: 5px;
            border-radius: 5px;
            text-align: center;
        `;

        playbackSpeeds.forEach(speed => {
            const listItem = document.createElement('li');
            listItem.style.padding = '5px';
            listItem.style.cursor = 'pointer';
            listItem.textContent = speed === 'Close' ? 'Close' : speed.toFixed(2) + 'x';

            listItem.addEventListener('click', () => {
                if (speed === 'Close') {
                  speedButton.removeChild(speedList);
                  speedButton.style.display = 'none';
                } else {
                    document.querySelectorAll('video').forEach(video => {
                        video.playbackRate = speed;
                    });
                  speedButton.textContent = speed.toFixed(2) + 'x';
                }
            });

            speedList.appendChild(listItem);
        });

        speedButton.appendChild(speedList);
    });

    speedButton.addEventListener('mouseleave', () => {
        speedButton.removeChild(speedButton.querySelector('ul'));
    });

    // Add styles to the button
    GM_addStyle(`
        #videoSpeedButton:hover {
            background: rgba(0, 0, 0, 0.6);
        }
    `);
})();