YouTube Quick Speed Interface

Modify the YouTube HTML player interface
目前为 2023-05-20 提交的版本。查看最新版本。
Wrap lines
// ==UserScript==
// @name         YouTube Quick Speed Interface
// @name:en      YouTube Quick Speed Interface
// @namespace    https://twitter.com/CobleeH
// @version      1.01
// @description  Modify the YouTube HTML player interface
// @description:en Modify the YouTube HTML player interface
// @author       Your Name
// @match        https://www.youtube.com/*
// @grant        none
// @license MIT
// ==/UserScript==

(function() {
    'use strict';

    // Write your script code here

    // 添加倍速选项 (Add speed options)
    var rightControls = document.querySelector('.ytp-right-controls');
    var leftControls = document.querySelector('.ytp-left-controls');
    if (rightControls && leftControls) {
        var speedOptions = document.createElement('div');
        speedOptions.style.display = 'flex';
        speedOptions.style.alignItems = 'center';
        speedOptions.style.order = '2'; // 设置为较低的顺序 (Set a lower order)
        speedOptions.style.marginLeft = '10px'; // 向左移动10像素 (Move 10 pixels to the left)
        speedOptions.style.marginRight = '25px'; // 设置右侧边距为10像素 (Set right margin to 10 pixels)

        var label = document.createElement('span');
        label.innerText = 'Speed';
        speedOptions.appendChild(label);

        var speeds = [0.5, 1, 1.5, 2];
        speeds.forEach(function(speed) {
            var option = document.createElement('div');
            option.innerText = speed + 'x';
            option.classList.add('ytp-speed-option');
            option.style.cursor = 'pointer';
            option.style.marginLeft = '5px'; // 调整选项之间的间距 (Adjust the spacing between options)
            option.addEventListener('click', function() {
                var player = document.querySelector('.video-stream');
                if (player) {
                    player.playbackRate = speed;
                }
                highlightOption(option);
            });

            option.addEventListener('mouseover', function() {
                option.classList.add('highlighted');
            });

            option.addEventListener('mouseout', function() {
                if (!option.classList.contains('active')) {
                    option.classList.remove('highlighted');
                }
            });

            speedOptions.appendChild(option);

            // 检查当前播放速度，如果与选项匹配，则添加高亮样式 (Check the current playback speed and add highlight style if it matches the option)
            var player = document.querySelector('.video-stream');
            if (player && player.playbackRate === speed) {
                highlightOption(option);
            }
        });

        leftControls.style.order = '1'; // 将左侧控制区域的顺序设置为较高 (Set a higher order for the left control area)
        rightControls.style.order = '3'; // 将右侧控制区域的顺序设置为较高 (Set a higher order for the right control area)

        document.querySelector('.ytp-chrome-controls').appendChild(speedOptions);
    }

    function highlightOption(option) {
        // 移除其他选项的高亮样式 (Remove highlight style from other options)
        var options = document.querySelectorAll('.ytp-speed-option');
        options.forEach(function(opt) {
            opt.classList.remove('active');
        });

        // 添加当前选项的高亮样式 (Add highlight style to the current option)
        option.classList.add('active');
    }

    // 添加高亮样式 (Add highlight styles)
    var style = document.createElement('style');
    style.innerHTML = `
        .ytp-speed-option {
            transition: background-color 0.3s;
        }

        .ytp-speed-option:hover {
            background-color: rgba(211, 211, 211, 0.4);
        }

        .ytp-speed-option.active,
        .ytp-speed-option.active:hover {
            background-color: rgba(211, 211, 211, 0.4);
        }
    `;
    document.head.appendChild(style);
})();

/*
================ Chinese Version =================

在YouTube播放器上添加倍速选项

此脚本将在YouTube HTML播放器界面中添加一个倍速控制功能，允许您使用预定义的倍速选项更改视频的播放速度。

使用说明：
- 安装脚本后，您将在播放器控制栏旁边看到一个“Speed”标签。
- 单击所需的速度选项以更改播放速度。
- 选定的速度选项将突出显示，并在视频播放时应用。

注意：
- 此脚本适用于YouTube的HTML播放器界面。
- 若要使用此脚本，将其粘贴到浏览器的开发者工具控制台或扩展程序中。

================ English Version ================

Adding Playback Speed Options to YouTube Player

This script adds a playback speed control feature to the YouTube HTML player interface, allowing you to change the video's playback speed using predefined speed options.

Instructions:
- After installing the script, you will see a "Speed" label next to the player controls.
- Click on the desired speed option to change the playback speed.
- The selected speed option will be highlighted and applied during video playback.

Note:
- This script is compatible with YouTube's HTML player interface.
- To use this script, paste it into your browser's developer tools console or extension program.
*/
欢迎访问Greasy Fork镜像
